Question

I have a problem with simple Images in DIV containers in IE7.

I have it a few times on my homepage, here is an example:

 <div id="divSearchBottomLinks" class="divSearchBottomLinks">
   Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
   <div id="divSearchButtomLinksEffect" class="divSearchButtomLinksEffect">
       <img src="Images/Design/DefaultPage/searchButtonEffect.png" alt=""
          style="border: 1px red solid;" />
   </div>
</div>

CSS is:

.divSearchButtomLinksEffect
{
float:right;
padding-right:8px;
}
.divSearchBottomLinks
{
border: 1px solid red;
width: 99%;
height: 15px;
text-align: left;
font-size: 10px;
word-spacing: 8px;
color: Gray;
}

Here is how it looks like:
http://s3.imgimg.de/uploads/2204cc79eJPG.jpg

As you can see: No reason, why the image should be more in Bottom then the other, you see left FF4 (same in IE8/IE9/Opera9/Opera10) and right only IE7 who seems to have a problem with this.

I can’t see how to fix it, I can only see from where it somes… any ideas?

Answer 1

For some reason the element floating to the right will float beneath the text on the line in IE7, The text takes up the full width of the container, just as a div elements does by default, and pushes the floating element down.

Put the text before the image in a div element also, and float that to the left, that way the element floating to the right will not be pushed down.