Image Difference IE7 to IE8/IE9/FF4

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.

Answer 2

I would try go with something like this instead:

<div id="bottomLinks">
  <p>Meistgesucht: Wetter Ebay-Abnahmen Geld Mehr...
  </p>
  <img src=".." />
</div>
<style>
div#bottomLinks {
  overflow: hidden;
  }
  div#bottomLinks p {
    float: left;
  }
  div#bottomLinks img {
    float: right;
  }
</style>

You're problem right now is probably because of the width of 99% and that the first element doesn't float.

Answer 3

Browsers have different default CSS for various HTML elements. The first thing I would do is add a good reset so that all elements start out with the same basic settings. This will take some of the guess work out of the debugging process. Add this BEFORE the rest of your CSS -

http://meyerweb.com/eric/tools/css/reset/

Next, you should always specify the width in a floated container. IE in particular has issues if you don't specify widths properly.