Wed, 2003-08-13 05:55
Forgive me for using tables, but since I have tabular data, it seemed appropriate.
I have a list generated in a table with table headings which works fine in Mozilla. In IE6 the table jumps down below a right float box and uses the entire window width. #content has a right hand margin of 120px, but this gets added to the page width rather than compressing the table to the proper width. So I get the heading of the page, the right float box where it should be, but the table data that should be between the left margin and the floating box is below the floated box. Then, the IE6 window opens a bottom scroll bar that represents the width of the window plus the set margin of 120px.
Here's what I was hoping to see:
page heading
table data - a little space - login menu
table data - a little space - login menu
table data - a little space
table data - a little space
table data - a little space
page footer
What I see now:
----------------IE6 window ends here>\/
page heading
blank space blank space - login menu
blank space blank space - login menu
table data table data table data table da - blank margin space
table data table data table data table da - blank margin space
table data table data table data table da - blank margin space
page footer
What I've found is that if I leave off the width: 100% in the table section of my CSS the table respects the margin but does not fill the width of the #content. Also if I set the #content to include a width it also works, but poorly. A % width allows the rightmenu to overlap when resizing the window and the white space is always different depending on the window size. I don't want the rightmenu to be a % because the content never changes whereas the #content always changes.
I'd like the table information to consume all the space inside the content area and not overflow to the entire width of the page. I also tried a #content{right: 120px;}.
How can I get my table data to stay inside and use the entire width of the #content block?
Fri, 2003-08-15 15:42
#1
table{width: 100%;} ignores margin as by <div> in IE6
First off, just have to say there's nothing wrong with using tables for tabular data, that's what they're for 
If I'm catching the problem correctly, IE is basically applying padding / margins _outside_ of the box width? I've seen it do that before & it's extremely annoying (especially since specs are very clear on where those should be applied). When you're using fluid designs (%-widths) it becomes even harder to just compensate for & hack in a value.
I removed the style from the table and then wrapped that table in another plain div. Then in your CSS, I added one thing and changed one thing:
#content div {width: 99%;}
#content table {width: 99%;}
Seemed to get rid of that extra margin, but unfortunately still left a tad extra. Didn't have time to track that down, sorry
Hope that helps...
Fri, 2003-08-15 23:06
#2
IE6 table width and CSS
Thanks,
That gets everything the correct width. Now, I'm going to trying getting the table correctly positioned vertically.
Sun, 2005-03-20 12:53
#3
table{width: 100%;} ignores margin as by <div> in IE6
I found another solution for this at href="http://www.webmasterworld.com/forum83/4792.htm.
Seems you can add height:1% to your content div and fool IE into working correctly.
I wound up with the folling CSS and my table worked properly:
#Content {
PADDING-RIGHT: 10px;
PADDING-LEFT: 10px;
PADDING-BOTTOM: 10px;
PADDING-TOP: 10px;
MARGIN: 0px 210px 50px 10px;
height:1%;
}