2
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.
Expand|Select|Wrap|Line Numbers
- <!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>
Expand|Select|Wrap|Line Numbers
- 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;
- }
