Tip: Internet Explorer DIV Height Problem

March 1st, 2010 AJAX, DOM & Js, Development rastrano

Yes i know, i’m for GWT, Ext, Dojo, Zk, and all the other frameworks that made life easy to web developers abstracting the HTML/CSS and most part of the Js layers, but I come from hard and deep JS/DHTML/CSS hand-programming (HttpXMLRequest sweet HttpXMLRequest) then somethimes i help my collegues to solve classic HTML/Js problems…

One of this is the Interent Explorer buggy way of manage div heights: Any height less than 20px is rendered as 20px.

I just give to you some techniques to hack this annoying IE bug:

1) Put a comment inside an empty div:

<div style="height: 10px;"><!-- --></div>

2) Put a    inside the div and add this to its style: font-size:1px;
line-height:0.

<div style="font-size: 1px; line-height: 0pt;">&nbsp;</div>

of course the styling rules can be put in a css class…

Refs:

http://archivist.incutio.com/viewlist/css-discuss/39150

http://www.codingforums.com/showthread.php?t=46408

Tags: browser compatibiltiy, browser issues, css, hacks, html, internet explorer, javascript

No Comments

Comments RSS TrackBack Identifier URI

No comments. Be the first.

Leave a comment

Name (required)

Mail (will not be published) (required)

Website

Your comment

Spam protection by WP Captcha-Free