IE7 : header over food selection

I am having problem with IE7. I have a header, which is an IMG. Under it I have a div that stands for a food selection, they need to be affixed to eachother without room in between. Both are 1000px size. In Opera and also FireFox the header and also the food selection are nicely affixed to eachother. Nonetheless, in IE7, there is a tiny room in between the food selection DIV and also the IMG. I have actually attempted clearly specifying extra padding and also margin on the IMG, nonetheless it does not function. I have actually had this trouble prior to, so it appears to be a IE7 trait.

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>

0
dev
2019-12-02 03:06:47
Source Share
Answers: 7

The actual remedy : 

#middle { font-size: 0; line-height: 0; }
0
2019-12-04 08:39:56
Source

Try the IE Developer Toolbar, which will certainly allow you evaluate what is happening with the components and also offer you lays out of the locations covered. It could offer you a far better understanding of the trouble.

0
2019-12-03 04:52:52
Source

The remedy : 

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

present : block

0
2019-12-03 04:52:45
Source

I face this a whole lot. As opposed to searching down the details actions, attempt peace of mind monitoring by explicity setup extra padding and also margin buildings for img/div/etc selectors to 0, set boundary - design : none boundary - size : 0px boundary = "0" etc

IE Dev Toolbar is a have to - have yet whether it aids you with identifying solitary - pixel concerns is not likely.

0
2019-12-03 04:51:29
Source

Instead of considering present block, note that IE7 does some seriously weird points with whitespace ; attempt getting rid of the whitespace in between the photo and also the div, and also see what takes place.

0
2019-12-03 04:50:16
Source

CSS Resets (like the YUI Reset CSS) are wonderful for this example. They reset extra paddings, margins, and also various other display screen buildings on a great deal of HTML components to decrease the display screen distinctions.

0
2019-12-03 04:50:00
Source

The remedy ...display screen : block

That inquiry could not be addressed effectively without recognizing the providing setting that the browser remained in ; you require to inform individuals what doctype you have if you have CSS providing concerns. The photo practices you describe is various in traits setting in contrast to criteria setting. A marginal examination instance have to include a complete HTML record and also the CSS to duplicate the trouble. Please do not ask individuals for aid without providing the details they require to address conveniently without losing their time ...

0
2019-12-03 04:18:39
Source

Related questions