IE7: header above menu

Tags: css html
By : IceHeat

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>
By : IceHeat


The real solution:

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

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...

By : Polsonby

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.

This video can help you solving your question :)
By: admin