Empty DIV and BR elements

[spliter]

There are some "clearing" elements in templates' code that have their purpose to clear floated elements. They can be either DIV or BR elements with class="visualClear". The thing is that IE shows white-spaces on these elements (white gaps). It is very annoying during customization. The solution for this IE's bug is to use code:

<div class="visualClear"><!-- --></div>

instead of simple DIV or BR tag. In this case IE shows the same picture as more standards-compliant browsers.

[limi]

I would prefer not having to change the code, especially not leaving in non-useful comment sections.

Would something like <div class="visualClear" /> or setting the height to 0.01% work?

[spliter]

Seems like no. It will not help. First of all this solution is described here - "CSS discuss":http://css-discuss.incutio.com/?page=BrowserBugs

As I understand IE's "functionality" ;) if you set height: 0.01% at the first IE doesn't understand "0.01". It understands only 0.1, but not the previous one. At the second you might know that IE renders block with the height that contains all it's content - very famous IE's bug. And if you create an empty DIV it supposes that you have at least one element (&nbsp;) in it even if you didn't point it obviously. The same with <div />. And if you have &nbsp; in within DIV, IE will render this DIV the same height as the "font-size" property! So the one solution is to set

* html .visualClear {font-size: 1px;} /* just because font-size: 0px; will not work anyway

But it will render 1px high DIV.

So, as for me solution with the comments is _the_ solution.

[DannyB]

Fixed