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 each other without space in between. Both are 1000px width. In Opera and FireFox the header and the menu are neatly attached to each other. 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>
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.