I mentioned in
this thread that I was having a similar spacing issue in IE to the problem described, but as the problem seems slightly different I thought I'd post another thread.
The problem is a small amount of extra whitespace showing up beneath a div in Internet Explorer. At the moment I'm just working with a very basic testing layout to try to solve the problem. Firstly, some images to illustrate the problem. The first shows the page correctly rendered in Firefox, the second shows a correct render in Opera, and the third shows IEs bodgy render; note the whitespace under the 'image' along the top.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Page Title</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="banner_top"></div>
<div id="banner_l1"></div>
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
background-color: #000000;
}
#banner_top {
background: #ffffff url('banner_top.jpg') repeat-x;
height: 10px;
}
#banner_l1 {
background-color: #00ff00;
width: 10px;
height: 10px;
}
"banner_top.jpg" is a 20x10 jpeg image I'm using for testing purposes. The second div currently only exists to illustrate the issue clearly, but I will need another div sitting flush with the first in that fashion.
So anyone got any ideas what could be causing the extra space to be rendered?
HTML:
