Hi,
I'm pretty new to web development and I just spent the better part of the morning trying to figure out this IE bug. I came up with a hack that makes no sense to me. I would appreciate if someone could explain why this situation occurs, and if there is a better solution!
I am trying to stack 2 divs on top of each other. The divs should be 5 pixels tall and touching each other. (In my website, these are actually containers for top and bottom rounded-corners images, so they must be no taller than the background-image I'm putting inside each of them). It works in Firefox, but in IE, the divs become much larger.
The hack that I came up with is to set font-size: 4px in the body style, as shown below. This forces the divs to the correct height even though the divs contain no text, and even though I explicitly set the div's height to 5px (which seems to have no effect in IE).
Here is some very simplified code that exhibits the problem. It does validate.
And the CSS:
Can anyone reveal the nature of this mystery so that I can deal with it properly in the future? Thanks! =)
I'm pretty new to web development and I just spent the better part of the morning trying to figure out this IE bug. I came up with a hack that makes no sense to me. I would appreciate if someone could explain why this situation occurs, and if there is a better solution!
I am trying to stack 2 divs on top of each other. The divs should be 5 pixels tall and touching each other. (In my website, these are actually containers for top and bottom rounded-corners images, so they must be no taller than the background-image I'm putting inside each of them). It works in Firefox, but in IE, the divs become much larger.
The hack that I came up with is to set font-size: 4px in the body style, as shown below. This forces the divs to the correct height even though the divs contain no text, and even though I explicitly set the div's height to 5px (which seems to have no effect in IE).
Here is some very simplified code that exhibits the problem. It does validate.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <link href="styles.css" rel="stylesheet" type="text/css" /> <title>Test</title> </head> <body> <div id="myDiv1"></div> <div id="myDiv2"></div> </body> </html>
Code:
body, p, ul, a, img {
padding: 0;
margin: 0;
text-decoration: none;
border: none;
font-size: 4px; //This is the hack that fixes the spacing in IE
}
#myDiv1 {
background-color: #ff0000;
height: 5px;
}
#myDiv2 {
background-color: #000000;
height: 5px;
}
Comment