Strange floating problem with IE

kaht · Dec 7, 2006

I'm having a weird issue with IE and clearing floats. First, a VERY cut down version of my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>

<style type="text/css">

* {
   padding:0px;
   margin:0px;
}

body {
   font-family:Tahoma, Arial;
   font-size:8pt;
}

div.floatBreaker {
   clear:both;
}

div#controls {
   float:left;
   width:280px;
   padding:5px;
   border:1px solid #888888;
}

div#controls div#userList a {
   display:block;
   float:left;
   text-decoration:none;
   color:#ff00ff;
   width:185px;
   padding-left:3px;
   margin-left:3px;
   border:1px solid #000000;
}

div#controls div#userList img {
   border:0px;
   cursor:pointer;
   float:left;
   margin-top:2px;
   margin-left:3px;
   height:11px;
   width:11px;
   border:1px solid #ff0000;
}

div#controls div#userList img.firstImg {
   clear:left;
   margin-left:0px;
   height:9px;
   width:9px;
   border:1px solid #0000ff;
}


</style>
</head>
<body>
<div id="controls">
   <div id="userList">
      <a href="#">Al Bundy</a>

      <!--
      <div class="floatBreaker"></div>
      -->

      <img src="" class="firstImg" />
      <img src="" />
      <a href="#">Homer Simpson</a>
   </div>
</div>

</body>
</html>

In IE, the img surrounded by the red border is popped up on the same line as Al Bundy. In firefox, it appears to the right side of the blue bordered image - on the same line as Homer Simpson (where I'd expect it to be). Once the style on the blue bordered image is set to clear:left it seems that the red bordered image would not be able to jump back above what we've just cleared. I can band-aid fix the problem by putting a float-breaker div between Al Bundy's anchor and the <img> tags, but it causes a big gap in IE and looks fine in firefox (which also looks fine before the float-breaker so it's not really fixing anything). I'd really rather not have to add in even more empty markup as well, so a solution that doesn't utilize the extra float-breaker <div> would be preferred. Anybody know why IE isn't behaving?

I saw this behavior on both IE6 and IE7.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

traingamer · Dec 8, 2006

I only have IE at work, but this looks reasonable in IE6

Code:

...
br.floatBreaker {
   clear:both;
}
...
<body>
<div id="controls">
   <div id="userList">
      <a href="#">Al Bundy</a>


      [b]<br class="floatBreaker" />[/b]


      <img src="" class="firstImg" />
      <img src="" />
      <a href="#">Homer Simpson</a>
   </div>
</div>

</body>

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

jpadie · Dec 8, 2006

i'd assumed kaht was looking for a css solution!

i have played with this quite a bit and can't work out why IE is mistreating these poor img tags....

i've made it work by wrapping the img tags in spans and migrating the class definitions a bit:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript"></script>

<style type="text/css">

* {
   padding:0px;
   margin:0px;
}

body {
   font-family:Tahoma, Arial;
   font-size:8pt;
}

div#controls {
   clear:left;
   width:380px;
   padding:5px;
   border:1px solid #888888;
}

div#controls div#userList a {
   display:block;
   text-decoration:none;
   color:#ff00ff;
   width:185px;
   padding-left:3px;
   margin-left:3px;
   border:1px solid #000000;
   float:left;
}

div#controls div#userList span {
   border:1px solid #ff0000;
   width:10px; height:10px;
}
div#controls div#userList span.secondImg {
   border:1px solid #0000ff; 
   float:left;
}
div#controls div#userList span.firstImg {
	clear:left;  float:left;
}



</style>
</head>
<body>
<div id="controls">
   <div id="userList">
      <a href="#">Al Bundy</a><br/>

      <span class="firstImg"><img src="" /></span>
      <span class="secondImg"><img src="" /></span>
      <a href="#">Homer Simpson</a>
   </div>
</div>

</body>
</html>

kaht · Dec 8, 2006

Thanks for the post traingamer, but from my post above: (I'd really rather not have to add in even more empty markup as well, so a solution that doesn't utilize the extra float-breaker <div> would be preferred.)

Your solution using the <br> tags gets rid of the gap caused, but so does setting height:0px for the floatbreaker <div>. I'd really just like to know why IE isn't behaving. IE7 was supposed to fix most of the known display bugs, but this problem is in IE6 and IE7, so something didn't get fixed - or there's something wrong with my code.

I already had a solution to the problem (that I commented out in my original post) - but what I'm really looking for is the explanation of why the problem is happening in the first place.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

kaht · Dec 8, 2006

jpadie, thanks as well for your post, but like traingamer's solution - your's utilizes extra uneeded markup. You're right in that I'm really just looking for a pure CSS ~~hack~~ solution.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Wolfie7873 · Dec 9, 2006

I'd really just like to know why IE isn't behaving. IE7 was supposed to fix most of the known display bugs, but this problem is in IE6 and IE7, so something didn't get fixed

Quite likely, there may be nothing wrong with your code. The acid test is Opera. It's 100% standards compliant, so if it works in Opera, you did it right. If it works in IE you got lucky, and if it doesn't work in IE you should never be surprised.

cLFlaVA · Dec 11, 2006

kaht,

is there any reason you're making a list in this manner? wouldn't it be more beneficial to mark this up differently? i wouldn't rely on styling small images to break my lines, especially if you consider the removal of style sheets altogether, or the inability to render images.

*cLFlaVA
----------------------------
[tt]"quote goes here"[/tt]
[URL unfurl="true"]http://www.coryarthus.com/[/url]

kaht · Dec 12, 2006

wouldn't it be more beneficial to mark this up differently?

Absolutely, an unordered list would make way more sense, especially considering that this is just a very small part of an expanding list. However, it's old code, and already done, and on the company's intranet where I only have to worry about IE and don't have to mess with people turning off their stylesheets or javascript or anything like that. When I "do things the right way" it's usually only for my benefit.

The intent of the question wasn't to get it to work - I could do that with the extra <div> tag thrown in. I put out the question mainly to point out the display bug in IE, and see if anybody knew the cause of the problem.

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Strange floating problem with IE

kaht

Programmer

traingamer

Programmer

jpadie

Technical User

kaht

Programmer

kaht

Programmer

Wolfie7873

Technical User

cLFlaVA

Programmer

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor