weird IE bug?

Question

hey, I've spent too much time trying to get this to work on IE 7. It's working on ff and the only errors coming up on validator are missing alt tags for images (9 errors).

The entire site works except for this one part, and so I'm wondering if there's a weird float bug that I'm unaware of.

I have a div with an image inside of it. Under the image I have 3 divs that contain images. There is a slight gap between the image at the top of the div and the divs under it

Here's my code:

<div class="header_banner">
    <img src="html_images/banner.jpg" />
<div class="header_left"></div>
<div class="header_main" id="header_menu">
 <ul>
  <li><a href="index.php">Home</a></li>
  <li><a href="studio.php" rel="show_studio">Studio</a></li>
  <li><a href="school.php" rel="show_school">School</a></li>
  <li><a href="#" rel="show_events">Events</a></li>
  <li><a href="#">Shop</a></li>

 </ul>

</div>
<div class="header_right"></div>
</div>

Here's the CSS:

.header_banner
{
float:left;
width:531px;
}

.header_left
{
float:left;
background-color:#003399;
background-image:url('../html_images/header_left.jpg');
background-repeat:no-repeat;
background-position:48px;
width:55px;
height:33px;
}

.header_right
{
float:left;
background-image:url('../html_images/header_right.jpg');
width:7px;
height:33px;
}

.header_main
{
float:left;
background-image:url('../html_images/header_main.jpg');
background-repeat:repeat-x;
width:426px;
height:33px;
}

I wouldn't be surprised if I'm just missing something, but I've read through it 3 times now. Any ideas? (I've setup a background-color to see exactly where the gap is)

Thanks

Answer 1

You're right; it's probably an Explorer bug. Here's some more info: http://www.positioniseverything.net/explorer/floatIndent.html

It seems to be an issue with how IE handles margins. See if defining a margin (0px in this case) helps.

Answer 2

I would recommend using a reset stylesheet (or insert reset styles into the top of your stylesheet). It can help you avoid all sorts of issues like the one you are seeing.

Answer 3

Have you tried adding style="display:block;" to your img element?

I also remember reading that whitespace after an tag can cause problems. Try adjusting your markup by removing the whitespace:

<div class="header_banner"><img src="html_images/banner.jpg" /><div class="header_left"></div> etc..