Forum Moderators: not2easy
Is there any workaround, if i want to keep the logical order in the source code?
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Internet Explorer 6.0 bug: dropping inline-float</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
li {width: 300px; border: 1px solid green}
img {float:right}
</style>
</head>
<body>
<h1>Internet Explorer 6.0 bug: dropping inline-float</h1>
<ul>
<li><a href="#">list item, floated image after</a><img src="#" width="20" height="20"></li>
<li><a href="#">list item, floated image after</a><img src="#" width="20" height="20"></li>
<li><img src="#" width="20" height="20"><a href="#">list item, floated image before</a></li>
</ul>
</body>
</html>
Thank you!
The difference you're seeing is IE automatically allowing the <li>s to contain the floated <img>s, when in fact they should stick out.
If you add:
float: left;
clear: both;
to the <li> styles to replicate IE's incorrect default behaviour, Firefox will do the same. (We'll overlook the list bullets disappearing in IE when you do this. This really is an IE bug!)
So what are your options?
1. Use a -20px top margin on the <img> to drag it into the position you want.
2. Float the other elements inside the <li> out of the way:
a {
float: left;
}
3. Abandon the <img> element completely, and put a background image on the <li>:
li {
background: url(/images/image.gif) 100% 0 no-repeat;
}
Either add right padding to the <li> or right margin to the <a> to stop your text running over the image if you choose this option.
Thank you very much jetboy!
