April
28th 2008
Internet Explorer and Empty Div Elements

Posted under Tips & Tricks & Programming

Internet Explorer (both 6 and 7) has a niggly habit of rendering vertical spacing due to an empty div element e.g. <div id=”testdiv”></div> renders as vertical whitespace in IE but not in Firefox or Opera. It would be easy to prevent this happening by using CSS to hide the div using “display:none” however what if on certain pages content will appear in that div for example when loaded via dynamic code such as PHP? We want IE to hide the div when its empty but show all the content correctly when so loaded. The solution is blank HTML comments. Simply by popping in <!– –> at the beginning of your div code will cause IE to hide the div if there is no further content e.g. <div id=”testdiv”><!– –> dynamic content follows</div>. Negative margins begone!

[?]
Share This

3 Responses to “Internet Explorer and Empty Div Elements”

  1. pete on 11 Sep 2008 at 5:13 pm #

    Nice one, cheers

  2. vinhboy on 14 Feb 2009 at 1:04 am #

    Wow, amazing trick. Thanks guys.

  3. gingi on 06 Apr 2009 at 12:55 am #

    Cheers!

Trackback URI | Comments RSS

Leave a Reply

Close
E-mail It