Welcome to WebmasterWorld Guest from 3.92.92.168

Forum Moderators: not2easy

Message Too Old, No Replies

float and table problems in IE

why does a floating DIV mess up table positioning?

     
9:29 pm on Oct 31, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2003
posts:7
votes: 0


Hi all,

I hope you can help me out with this one. I have a DIV that floats right of my #content DIV. In #content, I have a table. In IE6 the vertical position of the table is such that it starts at the bottom of the right-floating DIV. In Moz 1.5 and Opera 7 it is displayed correctly.

In IE6 it is displayed as follows:


xxxxxxxxxxxx xxxxxxxxx
x #content x x float x
x unwanted x x ..... x
x white... x x ..... x
x space... x x ..... x
x ........ x x ..... x
x ........ x xxxxxxxxx
x table .. x
xxxxxxxxxxxx

Perhaps the actual code that reproduces my problem is more helpful:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>IE table bug?</title>
<style type="text/css">
#main{
position: relative; width: 100%; height: 100%; background-color: white;}
#content{
position: relative; margin-right: 125px; clear: none;}
#content table{
width: 100%; }
#right{
float: right; width: 100px;}
#content p, #content table, #right{
background-color: #FFFFCC;}
</style>
</head>
<body>

<div id="main">

<div id="right">
<p>
bla<br>bla<br>bla<br>bla<br>
</p>
</div> <!-- end right -->

<div id="content">
<p>
bla<br>bla<br>
</p>

<table>
<tr>
<td>bla</td>
<td>bla</td>
</tr>
<tr>
<td>bla</td>
<td>bla</td>
</tr>
</table>
</div> <!-- end content -->

</div> <!-- end main -->

</body>
</html>

In Moz 1.5 and Opera 7.21 it is displayed correctly. Any help is MUCH appreciated (this is driving me nuts).

Patrick

12:52 am on Nov 2, 2003 (gmt 0)

New User

10+ Year Member

joined:Oct 30, 2003
posts:8
votes: 0


well it seems like IE has tables set to clear: both even if you set it to clear: none I haven't heard of that before.

however as a work around you could float the table left, and set your #content div to clear: left

2:17 am on Nov 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


What I would do in this case is to add a temporary background color to #content to make sure you know *exactly* where IE is putting it and how large it is.

I suspect you may be having problems with IE because #content may be picking up width=100% from the table. IE may be interpreting that as 100% of #main, and therefore there isn't room for #content beside #right and it is pushed to the bottom.

Alternatively it may be the margin that is confusing it.

Different browsers treat relative positioning in different ways, so you may find there are other browsers that give you problems.

Incidentally you don't need postion:relative because that is the default.

2:35 am on Nov 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:July 26, 2003
posts:881
votes: 0


I think position: static; [w3.org] is the default.

Jordan

5:51 am on Nov 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


position: static; is indeed the default, however in this case position relative is actually curing the IE "peekaboo" bug.

And it is the table width, changing it to 99% brings it back in line. This is one solution in this case. (Note: the 100% still doesn't work even if cellpadding, cellspacing and border are all explicitly set to 0 )

And talking about IE bugs ;)
This one is not restricted to tables!

What is actually being triggered here is three pixel text jog [positioniseverything.net]. But now I think that name is misleading It took me a while to realise that it was what was happening here (with a table) too.

that link I give above has actually recently disovered a "hack" to help with this, but it's too complicated for me as I don't like hacks ;) and from what I can gather it's not suitable in this instance anyway!

So in this case if you want your table to be 100%, i.e if the 99% won't do.. then just give it a margin-right: -3px;

To show it a bit more clearly here's the same code but with table replaced with a <p>.. try removing the margin-right from the "testjog" paragraph to see it exhibit the same behaviour as your table.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>IE table bug?</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#main{width: 100%; height: 100%; background-color: white;}
#content{position: relative; margin-right: 125px; background: #aaa;}
#testjog {width: 100%; background: violet; margin-right: -3px; }
#right{float: right; width: 100px; background: #ccc;}
</style>
</head>
<body>
<div id="main">
<div id="right">
<p>bla<br>bla<br>bla<br>bla<br>bla<br>bla<br></p>
</div> <!-- end right -->
<div id="content">
<p>bla</p>
<p id="testjog">this paragraph is set at 100%</p>
<p>bla</p>
</div> <!-- end content -->
</div> <!-- end main -->
</body></html>

Suzy

10:47 am on Nov 2, 2003 (gmt 0)

New User

10+ Year Member

joined:Aug 11, 2003
posts:7
votes: 0


Thanks to all, and especially SuzyUK! The -3px margin-right works like a charm.

To HarryM: without position: relative; in #content IE6 didn't apply the background-color to #content p :(

Patrick

3:07 pm on Nov 2, 2003 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Oct 21, 2002
posts:1051
votes: 0


position: static; is indeed the default

My bad. I should have looked it up before pontificating. But I've been under the misapprhension that relative was the default ever since I can remember. Hopefully with no ill effects. :)

5:26 pm on Nov 2, 2003 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 24, 2003
posts:175
votes: 0


Relative positioning is kind of a subset of static and is almost the same if you don't specify any offset.

The only difference I can think of is how absolutely positioned children relate to their parent. If your nesting block is static the absolute offsets for the children refer to the viewport, but if it's relative the offsets refer to the relatively positioned nesting block.

[w3.org...]

Adam