3 replies [Last post]
jonas
Offline
newbie
Hawaii
Last seen: 16 years 47 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2003-08-13
Posts: 2
Points: 0

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?

exorcyze
Offline
Regular
Last seen: 16 years 49 weeks ago
Joined: 2003-07-30
Posts: 18
Points: 0

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 Smile

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 Smile

Hope that helps...

jonas
Offline
newbie
Hawaii
Last seen: 16 years 47 weeks ago
Hawaii
Timezone: GMT-10
Joined: 2003-08-13
Posts: 2
Points: 0

IE6 table width and CSS

Thanks,
That gets everything the correct width. Now, I'm going to trying getting the table correctly positioned vertically.

clippit
Offline
newbie
Last seen: 15 years 16 weeks ago
Joined: 2005-03-20
Posts: 1
Points: 0

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%;
}