<HR> don't support some CSS values

RESOLVED INVALID

Status

()

Core
DOM: CSS Object Model
RESOLVED INVALID
16 years ago
16 years ago

People

(Reporter: Martin Konicek, Assigned: jst)

Tracking

Trunk
x86
Windows 2000
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

16 years ago
Element <HR> (horizontal line) don't work with all css styles. For example:
height, clear:both etc...

For example try this:

<HTML>
<HR style="height:1px;">
</HTML>

Work good in Internet Explorer and Opera, but not Mozilla.

Comment 1

16 years ago
Dupe of bug #18150 ??
(Reporter)

Comment 2

16 years ago
Not dupe! bug #18150 is only about attribute height, but <HR> not support
clear:both function in css.
Could you be more specific or provide a testcase ? Clear:both on <hr> works for
me and I am not sure that Mozilla has a bug with its height since mozilla <hr>
has a default border on this tag while IE hasn't. If you do <hr style="border:0;
height:1px;">, you get a 1 px line that you can even colour while you can't with
IE. In fact, you can do many more things with <hr> and CSS in Moz than you can
with IE (border:1px dotted red; height:3px; background-color:yellow; for instance).

The only way I could somewhat reproduce your bug is to forget to provide a DTD
or to work with transitional HTML, in this case you work in quirks mode, a mode
in which everything is possible ;-)
(Reporter)

Comment 4

16 years ago
There is example HTML code with clear function. There is one float image an hr.
When I use <BR clear="both"> all works OK.

<HTML>
<IMG SRC="test" width=100 height=100 style="float:left;">
<HR style="height:1px;clear:both;">
</HTML>
Here is your code with valid HTML, you'll see that it works :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>test</title>
</head>
<body>
<img src="test.jpg" alt="" style="float:left; width:100px; height:100px;">
<hr style="height:1px; clear:both;">
</body>
</html>

The problem you are seeing only appears in quirks mode for compatibility reasons
with old pages.

In quirks mode hr elements are inline elements and not block elements :
http://lxr.mozilla.org/seamonkey/source/layout/html/document/src/quirk.css#220

Add display:block to your code or (much better) use a strict HTML/XHTML DTD to
avoid quirks mode.

I believe this bug should be marked as invalid unless somebody wants to change
Mozilla quirks mode decisions.
(Reporter)

Comment 6

16 years ago
Sorry, I thought that browsers don't detect DOCTYPE tag. Why my example work in
Opera and IE good? Why U use some quirk?
Status: UNCONFIRMED → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → INVALID
In fact browsers DO detect DTDs :-) they use it to display the page in a more
(strict mode) or less (transitional, also called loose or "quirks" mode)
standards compliant way. Usually, modern browsers (Opera 6, IE6, IE5Mac, Mozilla
and other Gecko browsers) render pages very similarly with a strict DTD, the
quirks mode exists because modern browsers would break the display of many old
sites that did not follow the evolution of standards.

You will find useful resources here :
http://www.webstandards.org/learn/
You need to log in before you can comment on or make changes to this bug.