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
pete on 11 Sep 2008 at 5:13 pm #
Nice one, cheers
vinhboy on 14 Feb 2009 at 1:04 am #
Wow, amazing trick. Thanks guys.
gingi on 06 Apr 2009 at 12:55 am #
Cheers!