IE empty div height problem.
I am working on a design at the moment in which I use empty divs to contain design elements through the use of css background images. It's not the best solution code wise, but it works and if used sparingly, it won't have any massive negative implications.
However I was scratching my head when I had some empty divs with a height of 6 pixels specified. Fine in Firefox, fine in Opera, NOT fine in ie. The heights were way more than 6 pixels.
Luckily I found the solution to the empty div ie problem in two seconds using Google!
The solutions given were as follows (I used method 2):
However I was scratching my head when I had some empty divs with a height of 6 pixels specified. Fine in Firefox, fine in Opera, NOT fine in ie. The heights were way more than 6 pixels.
Luckily I found the solution to the empty div ie problem in two seconds using Google!
The solutions given were as follows (I used method 2):
1) Put a comment inside the div:
2) Put inside the div and add this to its style: font-size:1px;
line-height:0.

19 Comments:
thank you for this...
I hate IE
STuFF
yes, thank you!
:)
I just came across this problem, thanks for offering the solution - the first didn't work for me but the second did.
Please don't hate IE.
Every browser has its short and/long comings.
thanks!
SWEET! Thanks!!
How fucking ridiculus is it that IE needs this hack. Internet Explorer sucks the sweat off a dead man's balls.
Thanks. Used this is my AJAX web app to set a hidden div to height 0 (probably not standards compliant, but oh well).
.small_div {height: x;
overflow: hidden;}
I hate IE too ! If everyone would just throw IE away and use FF (even on Mac)... we wouldn't saturate the Web with IE hacks and bug fixes. Dammit !
Thanks a lot, this really helped me.
Who said don't hate IE...
But in case of ie its only short comings!
IE SUCKSSSSSSSS! All versions.
Thank you so much for sharing this fix with us. It is very much appreciated! :)
The first solution did not work for me. The second showed me a 3px height space.
So I used:
[div style="display: none;"]
This MUST be here because of the IE space for an empty div.
[/div]
I'm hating IE anyway. It's just a terrible piece of work.
You can also put in a SPAN tag with a height specified to the desired height of the div:
[div class=style1][span style=height:15px][/span][/div]
This is an alternative to a " " where you dont want the user to see boxes when they select an area.
Post a Comment
Subscribe to Post Comments [Atom]
<< Home