Closed
Bug 156474
Opened 23 years ago
Closed 23 years ago
<HR> don't support some CSS values
Categories
(Core :: DOM: CSS Object Model, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: martin.konicek, Assigned: jst)
References
()
Details
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•23 years ago
|
||
Dupe of bug #18150 ??
|
|
Reporter | |
Comment 2•23 years ago
|
||
Not dupe! bug #18150 is only about attribute height, but <HR> not support
clear:both function in css.
|
||
Comment 3•23 years ago
|
||
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•23 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>
|
|
||
Comment 5•23 years ago
|
||
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•23 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
Closed: 23 years ago
Resolution: --- → INVALID
|
|
||
Comment 7•23 years ago
|
||
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.
Description
•