I’ve been using Mozilla more and more on a regular basis for my browsing and also for testing of my Web apps. For the most part Mozilla works the same as IE does but there are a handful of things that don’t render quite the same way.

One thing that I notice a lot is the HR tag which in Mozilla does not respond to style tag attributes as it does in IE. The result is that HR tags ALWAYS display in the archaic 3D format of a 90’s browser <g>. Because HR tags are nice and easy line delimiters I usually have a style definition like this:

HR { color: darkblue; height: 1px }

which works great in IE, but has zero effect on Mozilla browsers.

I’ve been playing around with some alternatives, but none of them seem to be too satisfying either although they are slightly better in that at least they get away from the 3D look.

The following works in Mozilla:

<div style="width:100%;height:1px;background:red;font-size:0.01pt;margin-top:5pt;margin-bottom:5pt"></div>

and is a reasonable solution as it could be described easily with a CSS class. Unfortunately IE insists on drawing the line at least 2-3 pixels high as to force the smallest font size. IOW, it doesn’t respect the height specified and instead uses the font-size to determine the height.

This works with IE:

<table width="100%" style="margin-top:5pt;margin-bottom:8pt"><td height="1px" style="background:Red"></td></table>

But unfortunately Mozilla now doesn’t respect the height properly. This also has the disadvantage of requiring attributes to be set on multiple tags, which means there’s no single CSS class that would apply.

That leaves using an image like this:

<img src="/images/bluepixel.jpg" width="100%" height="1px" style="margin-top:5pt;margin-bottom:8pt">

which works Ok, but is a bit of hassle as you need to provide the image.

Am I missing the obvious here? What’s the best way to get a consistent line to display without having to insert a large amount of HTML for every one of them?