Table to Div - not working

[tiamat2012]

Hi everyone,

I'm trying to convert a table into divs. to be EXACTLY the same. I'm using the Display: table property. Can anyone see why this isn't working?

original table:

<table width="729" border="0" align="center" cellpadding="0" cellspacing="0" class="center" style="clear: both;">
  <!--DWLayoutTable-->
  <tr align="right">
    <td height="39" colspan="2" valign="top"><a href="/database/index.php"><img src="/database/img/bomt_db_logo.gif" width="281" border="0" align="left" /></a></td>
    <td colspan="5" valign="bottom"> <a href="view.php"><img src="/database/img/b_view.jpg" width="71" height="29" border="0" align="bottom" /></a><a href="updatemem.php"><img src="/database/img/b_update.jpg" width="71" height="29" border="0"></a><a href="addmem.php"><img src="/database/img/b_add.jpg" width="71" height="29" border="0"></a><a href="upload.php"><img src="/database/img/b_upload.jpg" width="111" height="29" border="0"></a></td>
  </tr>
  <tr valign="middle">
    <td height="25" colspan="4" background="/database/img/title.jpg">
		<span id="texttitle">Welcome!</span>
	</td>
  </tr>
</table>

css:

body {
	width: 800px;
	margin: 8px auto auto auto;
	background-color: #AFD1D8;
	font-family: arial, helvetica, sans-serif;
}

#texttitle {
  margin-left: 16px;
  font-weight: bold;
  font-size: 16px;
  color: white;
}

#path, #path a {
  font-size: 10px;
  color: white;
  background-color: #999999;
  text-decoration:none;
}

#main {
	display: inline-table;
	width: 100%;
}

#header {
	display: table-row;
	width: 100%;
	text-align: right;
}

#logo {
	display: table-cell;
	height: 39px;
	verticle-align: top;
}

#menu {
	display: table-cell;
	verticle-align: bottom;
}

#display {
	display: table-row;
	width: 100%;
	verticle-align: middle;
}

#title {
	width: 100%;
	display: table-cell;
	height: 25px;
	background: url("img/title.jpg") repeat-x;
	text-align: center;
}

div, a, img {
	margin: 0;
	padding: 0;
}

.center { text-align: center; }

.top { vertical-align: top; }
.middle { vertical-align: middle; }
.bottom { vertical-align: bottom; }

img { border-style: none; }

new table in divs:

<div id="main">
	<div id="header">
		<div id="logo">
			<a href="/database/index.php"><img src="/database/img/bomt_db_logo.gif" width="281" border="0" align="left" />
		</div>
		<div id="menu">
			<a href="view.php"><img src="/database/img/b_view.jpg" width="71" height="29" /></a>
			<a href="updatemem.php"><img src="/database/img/b_update.jpg" width="71" height="29" /></a>
			<a href="addmem.php"><img src="/database/img/b_add.jpg" width="71" height="29" /></a>
			<a href="upload.php"><img src="/database/img/b_upload.jpg" width="111" height="29" /></a>
		</div>
	</div>
	<div id="display">
		<div id="title">
			<span id="texttitle">Welcome to the Best of Montana Database!</span>
		</div>
	</div>
</div>

Any help would be greatly appreciated.

 

[Vragabond]

There is a reason why there's a table element. Table element is also not forbidden if you use divs and css. So, my advice to you... use tables. Because you are using them. CSS allows for complete visual customization of how elements are displayed, so you visually any element with another. It does not mean that's a good idea though. Some browsers are incapable of translating css and rely only on element names. If you have a heading and a paragraph, they know how to "render" that. If instead you would have two table cells that just look like heading and a paragraph, those browsers will think it's two table cells. So, if you are going to style an array of divs to look like table, just use a table.

I am not saying though that you should use a table. What you're displaying is not tabular data. But if you cannot see how that code could be rendered without the use of tables, it is better to use the tables than elements pretending to be tables.

A real life equivalent of what you're doing would be buying a huge Hummer-like SUV, most probably a Hummer, and paint a small Hybrid on its sides. Then trying to convince people that you're actually helping the environment because you're driving a hybrid. That there would not be a hybrid, right?

My suggestion is to scrap the whole thing and start anew.

 

[tiamat2012]

Hahaha, thanks vragabond.

The only reason is that when I try to just use divs, I'm trying to align pictures directly on top of each other, and it's not working, so I decided to see if I can duplicate the table.

-Kerry

 

[Vragabond]

There's hardly anything that can be styled easier using tables as opposed to using divs if you ask me. But it is also really hard for us to visualize your problem without seeing it. If you can show us the page or just a picture of a page, we could probably advise you best which elements to use and how to scatter them across the page.