Friday, October 28, 2005

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):

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:

Anonymous Anonymous said...

thank you for this...

I hate IE

STuFF

2:22 PM  
Anonymous Anonymous said...

yes, thank you!

6:59 PM  
Blogger frankp said...

:)

1:02 PM  
Blogger Marshy Mum said...

I just came across this problem, thanks for offering the solution - the first didn't work for me but the second did.

1:02 PM  
Anonymous Anonymous said...

Please don't hate IE.
Every browser has its short and/long comings.

9:43 PM  
Anonymous Anonymous said...

thanks!

3:28 PM  
Blogger Bradley said...

SWEET! Thanks!!

2:08 AM  
Anonymous Anonymous said...

How fucking ridiculus is it that IE needs this hack. Internet Explorer sucks the sweat off a dead man's balls.

4:45 AM  
Anonymous Anonymous said...

Thanks. Used this is my AJAX web app to set a hidden div to height 0 (probably not standards compliant, but oh well).

5:42 PM  
Blogger JoMo said...

.small_div {height: x;
overflow: hidden;}

2:36 AM  
Blogger Yanick said...

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 !

7:37 PM  
Anonymous Anonymous said...

Thanks a lot, this really helped me.

8:53 AM  
Anonymous Anonymous said...

Who said don't hate IE...

11:27 PM  
Anonymous Anonymous said...

But in case of ie its only short comings!

6:21 AM  
Anonymous Anonymous said...

IE SUCKSSSSSSSS! All versions.

7:06 PM  
Anonymous Anonymous said...

Thank you so much for sharing this fix with us. It is very much appreciated! :)

5:01 AM  
Anonymous Anonymous said...

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]

10:07 AM  
Anonymous Anonymous said...

I'm hating IE anyway. It's just a terrible piece of work.

9:12 AM  
Anonymous Anonymous said...

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 "&nbsp" where you dont want the user to see boxes when they select an area.

6:46 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home