IE7: header above menu

Question

I am having trouble with IE7. I have a header, which is an IMG. Under it I have a div that represents a menu, they have to be attached to eachother without space in between. Both are 1000px width. In Opera and FireFox the header and the menu are neatly attached to eachother. However, in IE7, there is a small space between the menu DIV and the IMG. I have tried explicitly defining padding and margin on the IMG, however it does not work. I have had this problem before, so it seems to be a IE7 quirk.

My HTML Code:

<div id="middle">    

<img id="ctl00_headerHolder_headerImage" src="pictures/headers/header_home.jpg" style="border-width:0px;" />

    <div id="ctl00_menuPanel" class="menu">

    <a id="ctl00_home" href="Default.aspx" style="color:#FFCC33;">Home</a>
    |
    <a id="ctl00_leden" href="Leden.aspx">Leden</a>
    |
    <a id="ctl00_agenda" href="Agenda.aspx">Agenda</a>
    |
    <a id="ctl00_fotos" href="Fotos.aspx">Foto's</a>
    |
    <a id="ctl00_geschiedenis" href="Geschiedenis.aspx">Geschiedenis</a>
    |
    <a id="ctl00_gastenboek" href="Gastenboek.aspx">Gastenboek</a>       
    </div>
</div>

Answer 1

Try the IE Developer Toolbar, which will let you inspect what is going on with the elements and give you outlines of the areas covered. It might give you a better understanding of the problem.

Answer 2

The solution:

img {
padding: 0px;
margin: 0px;
display: block;
}

display: block

Answer 3

I run into this a lot. Rather than hunting down the specific behavior, try sanity checking by explicity setting padding and margin properties for img/div/etc selectors to 0, set border-style: none border-width: 0px border="0" etc.

IE Dev Toolbar is a must-have but whether it helps you with figuring out single-pixel issues is unlikely.

Answer 4

Instead of resorting to display block, note that IE7 does some seriously odd things with whitespace; try removing the whitespace between the image and the div, and see what happens.

Answer 5

CSS Resets (like the YUI Reset CSS) are great for this kind of thing. They reset paddings, margins, and other display properties on a lot of HTML elements to minimize the display differences.

Answer 6

The solution...display: block

That question couldn't be answered properly without knowing the rendering mode that the browser was in; you need to tell people what doctype you have if you have CSS rendering issues. The image behaviour you refer to is different in quirks mode as opposed to standards mode. A minimal test case must include a full HTML document and the CSS to reproduce the problem. Please don't ask people for help without giving them the information they need to answer easily without wasting their time...

Answer 7

The real solution:

#middle { font-size: 0; line-height: 0; }