HR's have 2 problems:
1) they're presentational markup. they don't convey any structure to
the document,
they just indicate where to draw a line
2) historically, HR's act as *both* block and inline elements, and the
user agent can't tell how the
HR is going to act until the page is being laid out. This makes the
application of CSS to HR's very
haphazard at best.
If you really just want to paint a line, and apply CSS properties to it,
you're much better off using a
DIV with a background, and setting it's width, height, and other
attributes explicitly.
Steve
Andy wrote:
> Curtis Clauson wrote:
>
>> If you remove any margins and padding from above and below an <HR>
>> element (and any from the
>> surrounding elements), you are still left with a considerable amount
>> of whitespace. It does
>> state in the HTML specification that:
>>
>> "The amount of vertical space inserted between a rule and the content
>> that surrounds
>> it depends on the user agent."
>>
>> However, the existance of any whitespace beyond that added by margins
>> or padding is a nasty
>> layout problem to a page developer. Is there any actual reason that
>> Mozilla is rendering the
>> <HR> element with this extra whitespace (MSIE does it too, but that's
>> certainly no excuse)?
>>
>> An example page which shows an <H1>, some <DIV>s, and some <HR>s
>> without margins or paddings can
>> be seen at:
>> http://www.thesnakepitdev.com/mozilla/hr.html
>
>
>
> I've repeatelt heard CSS experts comment that CSS can't handle HR
> properly, but I have no more information than that comment to offer you.
> Perhaps CSS3 will address this.
>
> AndyT
