Thursday, August 12, 2004

Use DIV instead of TABLE

After googling, I found a sample in
http://web.nwe.ufl.edu/writing/help/web/authoring/html/css/div.html

So, I came out a page like this :
.....
#menu {width:150px; float:left; display:block;}
#content {margin-left:25px;margin-right:25px;margin-top:5px;display:block; float:left;}
.....

<DIV ID="header" title="Header Area">
.........
</DIV>

<DIV ID="menu" title="Menu Area">
.........
</DIV>

<DIV id="content" summary="Page Content"></A>
............
</DIV>

Unfortunately, this layout was no good if I have a table inside content. The table got pushed down. Or, a style was with position:relative, then I got big space.
Therefore, I added style float:left to the content area. Now IE were good, but Mozilla. So, I added third line to dismiss content float to left.

#menu {width:150px; float:left; display:block;}
#content {margin-left:25px;margin-right:25px;margin-top:5px;display:block; float:left;}
#menu+#content{float:none;margin-left:175px;}

It's good at IE 5.5, 6, Mozilla, Opera, Safari IE 5.2, but IE 5.0.
At this point, I realized this kind of hacking was useless.

Then I looked at http://www.htmlite.com/SD008.php. Maybe, I should try position:absolute.
So, I had

#menu {position: absolute;left: 0px; width:150px;}
#content {position: absolute;left: 175px; margin-top:5px;}

.

In order to backward compatible, I added

TD#menu {position: relative;}
TD#content {position: relative; padding-left:25px; padding-right:25px; padding-top:5px;}

.

I were happy at this point. I could get IE 5, IE 5.2, IE 5.5, IE 6, Mozilla, Safari 1.0 and 1.2 looking right.
Only Opera wouldn't expand table inside content to 100% in a very special case.

1 comment:

Alex said...

Unfortunatly, those two items,
TD#menu {position: relative;}
TD#content {position: relative; padding-left:25px; padding-right:25px; padding-top:5px;}
, are no good for IE.
I must use other name.