PDA

Click to See Complete Forum and Search --> : Incorrect table width in IE when margin is used

Freaksworth
05-28-2007, 11:58 AM
Hi,

Since I don't have any server to upload my file to, I've included the code below. My question is included in the code.

Thanks in advance!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<HTML>
<BODY>

<TABLE STYLE="width: 500px;"><TR>

<TD STYLE="width: 75%;">
<P>When set to a width of 100% and a margin of 25 px, this table disappears behind the next table cell <i>in Internet Explorer</i>:</P>

<TABLE STYLE="width: 100%; background: yellow; margin: 25px;"><TR>
<TD>
<P>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</P>
</TD>
</TR></TABLE>

<P>When the margin is removed, however, the table becomes the correct width:</P>

<TABLE STYLE="width: 100%; background: yellow; "><TR>
<TD>
<P>Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood.</P>
</TD>
</TR></TABLE>

</TD>

<TD STYLE="width: 25%; background: orange;">
Pellentesque cursus, leo ac venenatis ornare, ligula libero vehicula arcu, sit amet facilisis est felis vel arcu. Aenean tempus arcu eget neque. Donec rutrum magna non magna. Cras consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra eleifend est.
</TD>

</TR></TABLE>

</BODY>
</HTML>
holyhttp
05-28-2007, 12:46 PM
The width of the left and right margins is added to the already 100% width of the table. The outer table will therefore stretch to 550px to accomodate the need of the inner table(s). With a "loose.dtd" IE is in quirks mode.
Try using the strict.dtd instead.
ray326
05-28-2007, 04:05 PM
No, the IE will be in standards mode. The loose DTD just allows deprecated tags and attributes. There shouldn't be any tables on that page in the first place, though. Here's a suggested replacement.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<body>

<div style="width: 500px; background:#fff">

<div style="width: 75%; float:left">
<p>
When set to a width of 100% and a margin of 25 px, this table
disappears behind the next table cell
<i>in Internet Explorer</i>:
</p>

<div
style="width: 100%; background: yellow; margin: 25px; float:left">
<p>
Just the good ol' boys, never meanin' no harm. Beats all
you've ever saw, been in trouble with the law since the day
they was born. Straight'nin' the curve, flat'nin' the hills.
Someday the mountain might get 'em, but the law never will.
Makin' their way, the only way they know how, that's just a
little bit more than the law will allow. Just good ol' boys,
wouldn't change if they could, fightin' the system like a
true modern day Robin Hood.
</p>
</div>

<p>
When the margin is removed, however, the table becomes the
correct width:
</p>

<div style="width: 100%; background: yellow; float:left">
<p>
Just the good ol' boys, never meanin' no harm. Beats all
you've ever saw, been in trouble with the law since the day
they was born. Straight'nin' the curve, flat'nin' the hills.
Someday the mountain might get 'em, but the law never will.
Makin' their way, the only way they know how, that's just a
little bit more than the law will allow. Just good ol' boys,
wouldn't change if they could, fightin' the system like a
true modern day Robin Hood.
</p>
</div>

</div>

<div style="width: 25%; background: orange; margin-left: 75%">
Pellentesque cursus, leo ac venenatis ornare, ligula libero
vehicula arcu, sit amet facilisis est felis vel arcu. Aenean
tempus arcu eget neque. Donec rutrum magna non magna. Cras
consequat. Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Proin viverra eleifend est.
</div>
<div style="clear:both"></div>
</div>

</body>
</html>
Freaksworth
05-29-2007, 10:24 AM
Thanks for your suggested <div> design. It still doesn't solve the problem, though: the indented text box still disappears behind the column to the right—and now in Firefox as well. Is something like this even possible with a pixel margin (as opposed to percent)?
WebJoel
05-29-2007, 11:29 AM
I'm still trying to figure out what you're trying to do... :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body>
<div style="width: 500px; margin:0 auto; background:#fff; border:1px solid gray;">
<div style="width: 75%;">
<p> When set to a width of 100% and a margin of 25 px, this table disappears behind the next table cell <i>in Internet Explorer</i>: </p>

<div style="width: 100%; background: yellow; margin:0 25px; float:left">
<p> Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. </p>
</div>

<p> When the margin is removed, however, the table becomes the correct width: </p>

<div style="width: 100%; background: yellow; margin:0 25px; float:left">
<p> Just the good ol' boys, never meanin' no harm. Beats all you've ever saw, been in trouble with the law since the day they was born. Straight'nin' the curve, flat'nin' the hills. Someday the mountain might get 'em, but the law never will. Makin' their way, the only way they know how, that's just a little bit more than the law will allow. Just good ol' boys, wouldn't change if they could, fightin' the system like a true modern day Robin Hood. </p>
</div>

</div>

<div style="width: 75%; background: orange; margin:0 25px; float:left">
Pellentesque cursus, leo ac venenatis ornare, ligula libero vehicula arcu, sit amet facilisis est felis vel arcu. Aenean tempus arcu eget neque. Donec rutrum magna non magna. Cras consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin viverra eleifend est. </div>

<div style="clear:both"></div>

</div>
</body>
</html> ??
timdenty
05-29-2007, 02:00 PM
I'm guessing that your table inside the cell is overlapping because you've added a total 50px margin to 100% width. So if the cell is 75% of 500px (375px) and your sub-table is 100% width of this, plus 50px margin, that makes the total table width 425px - hence it is overlapping.

You could work out what percentage you need to use to accommodate the margin, or just do the measurements in pixels instead.

And yes, the page should ideally use DIVs and not tables, but the theory should work for both.
Freaksworth
05-30-2007, 07:40 AM
I'm beginning to think that what I have in mind is not entirely possible with CSS, but I'll post my concept here as an image anyway:

http://i5.photobucket.com/albums/y161/Reverend_Duck/sidebar.png

Whenever there's a sidebar, the text box should shrink to leave room for it. If there is no sidebar, however, the text box should fill the entire width.

A typical page with this design would have several text boxes and several sidebars, and the design should be fluid as opposed to fixed.

Ideally, the margin between the text box and the sidebar should be 25px, but this can be replaced by an appropriate percentage value if necessary.

I hope this clears up some confusion about the concept.