Hi CSS Experts,
I'm suffering from the known Internet Explorer "3 pixel offset next to
a float" problem - see for example
http://www.positioniseverything.net/...reepxtest.html.
Unfortunately, in my case, I haven't managed to make it go away using
any of the techniques I've found. The difference is that I have a
full-width table in the content next to the float. Here's the test
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
width: 500px;
}
table {
width: 300px;
background-color: green;
}
div#rightbar {
float: right;
width: 150px;
background-color: red;
}
div#body {
margin: 0 200px 0 0;
background-color: yellow;
}
</style>
<title>IE bug test</title>
</head>
<body>
<div id="rightbar">
<p>girjgier jerig jeigejr gierjg erjgerg jergio jgerj eirgj eiogj
eiogje iogjergio erjgioerj g jndfvndfvbj dnbjfd nerjg nerg nerg egnerg
nerg eng egoeir hoeig heriog herge hgoeirhg orghe rgohrgoerhgerou g
hergh g herogi ergio heogierhg eroig heoig hergo ehrgo hergoerhg
oeruigh eorugh ergouherogui ehrgo erhgo erhg eoruigherguo herogh erog
huergh erug hregu hergu hguerh guerg herug hergu erhg uergh erugh erug
herug hergu ehrgu erhg eurgh erug herug hergu herg uerhg erugh erug
hergu herg uehrg uergh erug hergu herg uerhg erug hergu ehrg uerhgerhg
erhg erug herg uerhg eurg</p>
</div>
<div id="body">
<table>
<tr><th>AAAAAAA AA</th></tr>
</table>
</div>
</body>
</html>
What you should see, and do see in Firefox, is a 150px-wide red
"rightbar" and to the left of it at the top of the page a 300px-wide
green table, with a 50px gap between them.
IE decides that the table is too wide for the space available and
clears it to below the rightbar. To make it fit you have to reduce the
width *by 3 pixels* to 297 px.
I've encountered similar problems with things other than tables that
can be persuaded to go away with hacks like "height: 1%", but in this
case they don't seem to work.
Does anyone know what I have to do?
Many thanks,
Phil Endecott.
