extra padding problem in IE

[sanka69]

Hi,
This problem hopefully has a really simple solution which I'm being too dense to notice.

Site: http://camserver.icdw.co.uk/

I'm concerned only with the layout that the moment, experiementing by putting a once-tabled layout into tableless. My problem is that the padding around the menu, and by the header graphic render fine in Mozilla, but not suprisingally.. they don't in IE.

Can someone tell me how I could fix this?

Many thanks,
Richard

[CyberAlien]

You have incorrect width for IE for #navpanel

[sanka69]

Changing the width for IE doesn't seem to make any change whatsoever. Is there something else that might need changing aswell or instead?

Thanks for your reply,
Richard

[shanikaperera]

wel duh obviously!

[maxor]

Well I can't really tell how the thing is supposed to look, but I'll remind you of the box model problem.

The 'standard' for the box model is that the width you specify is the width for the content area. Then any margins, padding and borders are added onto the edges.

/* A 400 pixel div */
div#400{
  width: 400px;
  border: 10px;
  margin: 10px;
  }

According to the standard the content inside the above div would take up 400px and then there would be an additional 20px (margin+border) on each side of the div.

Internet Explorer uses its own box model in which the specified width INCLUDES all margins, borders, padding etc. So the box above, according to IE will have a total width of 400px and a content area width of 380 (400px - margin - border). So if you wanted the box above to have a content area of 400 in IE you need to give the box a total width of 420px.

Hopefully this will help solve your spacing issues.