Empty div’s - the IE problem
I came across this when I was trying to style a div with a background image I had designed. . . Sounds easy huh? Well the problem wasn’t the background image it was the height of the div! A margin of space seemed to appear and screw up my design. In FireFox it looks sweet, but IE did not like it at all. This one really irritated me, so as not to forget it I thought I would post it on here.
Note: no background images used in this example as this wasn’t the problem. Only background colours are used.
- Goal - To style an empty div to a specific height and width
- Problem - IE will not render the height specified of an empty div. It uses the default font size and takes the height from there
- Solution - Put a comment inside the div or specify the font size of the div to 0;
Here are 4 divs with the same height and width specified but with:
div 2 having a font size of “0″
div 3 having a non breaking space inside
div 4 having a html comment inside
CSS:
#div1, #div2, #div3, #div4 {
width:120px;
height:4px;
}#div1 {
background-color:blue;
}
#div2 {
background-color:pink;
font-size:0; /*If you add a font size this also fixes the problem*/
}
#div3 {
background-color:black;
}
#div4 {
background-color:red;
}
Here is a link to the above code in a html page.
I hope this helps anyone else who had the same frustration as I did. 
I don’t suppose you bothered to check if it’s ok on Safari.
It’s ok. Us Mac users are used to being forgotten & neglected.
Cheeky. I work on my powerbook at home, honest! There’s no PC there. lol. (I am just currently internet-less)
So… now I just checked it out on IE mac and Safari… typical it is only a pc IE problem! Thanks for pointing that out.
PC-free at home. That’s my girl!
But see what I mean about Mac users being forgotten…you were even neglecting yourself..hehe!
——————————————————————
BTW….what do you guys mean by “cheeky”? This Brit guy on this movie I watched just yesterday had him saying that too. It was a movie about Brit. soccer (I refuse to call it football) “hooligans” and their “Firms” (a Brit word for “Gang”???).
Over here we have a phrase…”Tongue in cheek”. But it just means “Kidding” or “In jest”. From the context…I don’t think “cheeky” means that.
Thanks, I was using an empty div as placeholder for an image and I was completely puzzled by this.
Oh, I am glad that helped you Peter.
So…I assume that was an improper question to ask on this blog. Ok. No problem. Won’t happen again. I guess I’ll live–not knowing…hehe!
Oh…I wanted to mention. I just bought a new copy of Virtual PC for my iMac (I can’t use my old VPC program cuz it’s incompatible w/ a G5). Just finished setting up Windows XP on it. When I ran IE on it for the 1st time, after loading my home pg., I clicked on the Eurocom link. The first thing I noticed was some icons for blank images, and below that, a link you inserted to get Macromedia Flash. So I clicked on it and in mere moments…it was installed and I could see everything on the page. –Laura Zuchetti…internet hero! w/o you I would’ve been doomed to a static world of still images.
BTW…no need to post this particular comment. It’s not really intended to be posted. It was just a quick and easier way of communicating w/ you than by the email link.
Sorry it’s taking a while for messages to appear on here. I have all posts set to be approved manually as I was being spammed by some pretty awful sites..
Oh cool, it’s good to know the behind the scenes considerations for people who might not be set up for flash are working. It makes you remember to keep doing things like that in the future.
Hey Spaghetti!
Just spent an hour banging my head against my desk in horror at the evil white space from hell, then remembered this nasty little anomoly from a conversation we’d had and knew the answer was on here somewhere!
Good job someebody documents these things eh?!
Thanks!
Richard.
hehe! Oops! Well glad you found it.
Thanx for this.. was totally confused!
How stupid is IE!! It’s still doing this in IE7 too!