Re: [css-d] hr / styling
On 09/04/2008, Philippe Wittenbergh [EMAIL PROTECTED] wrote: On Apr 9, 2008, at 5:28 AM, Manfred Staudinger wrote: b) Firefox 2.0.0.13 ignores height completely. Gecko (Firefox) does honour the height. But it uses the 'border-box' model for hr. That means: padding and border-width are inside the specified height. In the content-box model, the specified height (or width) applies only to the content of the box (the way browsers apply height (width) to any other block level element. For more on the difference between the two models, see http://www.w3.org/TR/css3-ui/#box-model Thanks for the correction and the pointer! Manfred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Reading through your responses I found it necessary to set up a small
test page to show the effect of specifying different properties for
color on the hr element.
http://test.rudolphina.org/hr.html
Because of the number of bugs, interpreting the results is a non-trivial task
certainly. Some examples:
a) IE 6 and IE 7 do show the background-color specified - but if the hr
has color specified also, you have to set color: none; to get it.
b) Firefox 2.0.0.13 ignores height completely.
c) Opera 9.25 does honor the border-color property if specified, but fails
to use the color property in its absence.
d) margin: 0; does what you would expect in Firefox 2.0.0.13 and Opera 9.25
but not for IE 6 and IE 7, where you have to specify margin: -7px 0;
Enjoy finding more bugs. For your reference (Box model):
http://www.w3.org/TR/CSS21/box.html#border-color-properties
I would also be interested to hear about Safari, Fx 3b and IE 8b.
Thanks,
Manfred
On 08/04/2008, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On Apr 8, 2008, at 6:16 AM, Alan K Baker wrote:
Depending on the browser, there are different methods needed to
address the actual color of horizontal line in hr. My test results
are below:
hr {
background-color:#d00; /* Firefox */ Implies that the 'line'
is entirely constructed of padding and transparent space is 'margin'.
color:#d00; /* IE 6 7 */ Implies that the
line is classed as text, the element cannot have padding because
background-color does nothing, and its transparent space is 'margin' .
border-color:#d00; /* Opera Safari */Implies that the line is
classed as a border, the element cannot have padding because
background-color does nothing, and its transparent space is 'margin' .
margin:0;
padding:0;
}
If one of these methods is the de-facto standard, then hr must be
classed as a special case, where some rules of block styling do not
apply, or at least one of the browsers is breaking the rules.
And browsers have bugs...
The colour you see on an hr is actually the border of the element.
Now, in theory, the colour of the border is determined by the 'color'
of an element, unless specified by the border-color property [1]. That
works correctly for most elements in all browsers. The hr is a
problem child, not because it is a special element, but due to browser
bugs.
* Opera 9.5b, Gecko 1.9 (Fx 3b5), IE 6+ all apply the colour specified
by the color property for the element
* WebKit (Safari 3.1), Opera 9.2x don't apply (inherit) the 'color'
property correctly for the hr The author need to specify the border-
color property (and border-style) [2].
Applying the border-colour property also works correctly in Gecko 1.9,
and Gecko 1.8 (Fx2); not sure about IE.
* Gecko 1.8: the background-color property determines the colour of
the hr, unless specified as 'border-color'.
In all browsers, except IE 6 and 7, one can also use the background-
color property (will fill the space between borders), padding ( i.e.
makes the element taller), margin, width, height, ...
[1] http://www.w3.org/TR/CSS21/box.html#propdef-border-color
[2] for a thin hr (1px tall or similar), you should specify the
border-style (as 'solid'), as the default style in mst browsers is
inset.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Hi Manfred. Safari behaves in a similar way to Opera. In non-IE browsers, when a border is shown it appears to be in an inset style in two colors, but looking at your code, you don't set border-style so I don't know where it inherits that from. Firefox is even worse as it doesn't seem to know what fuchsia and aqua are so displays white with inset borders in shades of gray. The borders do take on the same hue family in lime! What a total nightmare and a minefield for the unwary. I must admit that if I'd specified the original hr that I used, I'd have made a 1px box with a background color and specified its length. ISTM that the only really useful browser consistent attribute that hr has is its ability to alter its width to suit its container. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Manfred Staudinger To: Philippe Wittenbergh Cc: CSS-D Sent: Tuesday, April 08, 2008 9:28 PM Subject: Re: [css-d] hr / styling Reading through your responses I found it necessary to set up a small test page to show the effect of specifying different properties for color on the hr element. http://test.rudolphina.org/hr.html Because of the number of bugs, interpreting the results is a non-trivial task certainly. Some examples: a) IE 6 and IE 7 do show the background-color specified - but if the hr has color specified also, you have to set color: none; to get it. b) Firefox 2.0.0.13 ignores height completely. c) Opera 9.25 does honor the border-color property if specified, but fails to use the color property in its absence. d) margin: 0; does what you would expect in Firefox 2.0.0.13 and Opera 9.25 but not for IE 6 and IE 7, where you have to specify margin: -7px 0; Enjoy finding more bugs. For your reference (Box model): http://www.w3.org/TR/CSS21/box.html#border-color-properties I would also be interested to hear about Safari, Fx 3b and IE 8b. Thanks, Manfred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Hi Alan, Safari behaves in a similar way to Opera. Which Safari and do you have a screen shot? you don't set border-style so I don't know where it inherits that Philippe Wittenbergh has shown us (in this thread) the default settings for Fx3, so you might want to look into it again. Firefox is even worse as it doesn't seem to know what fuchsia and aqua are so displays white with inset borders in shades of gray. Of course Fx know these colors, but it does not want to apply any! (to proof that I've updated http://test.rudolphina.org/hr.html ) the only really useful browser consistent attribute that hr has is its ability to alter its width It is not as bad as you see it now: if you apply a padding for non-IE and reserve height for IE you will be able to use the background-color consistently. Cheers, Manfred On 09/04/2008, Alan K Baker [EMAIL PROTECTED] wrote: Hi Manfred. Safari behaves in a similar way to Opera. In non-IE browsers, when a border is shown it appears to be in an inset style in two colors, but looking at your code, you don't set border-style so I don't know where it inherits that from. Firefox is even worse as it doesn't seem to know what fuchsia and aqua are so displays white with inset borders in shades of gray. The borders do take on the same hue family in lime! What a total nightmare and a minefield for the unwary. I must admit that if I'd specified the original hr that I used, I'd have made a 1px box with a background color and specified its length. ISTM that the only really useful browser consistent attribute that hr has is its ability to alter its width to suit its container. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Manfred Staudinger To: Philippe Wittenbergh Cc: CSS-D Sent: Tuesday, April 08, 2008 9:28 PM Subject: Re: [css-d] hr / styling Reading through your responses I found it necessary to set up a small test page to show the effect of specifying different properties for color on the hr element. http://test.rudolphina.org/hr.html Because of the number of bugs, interpreting the results is a non-trivial task certainly. Some examples: a) IE 6 and IE 7 do show the background-color specified - but if the hr has color specified also, you have to set color: none; to get it. b) Firefox 2.0.0.13 ignores height completely. c) Opera 9.25 does honor the border-color property if specified, but fails to use the color property in its absence. d) margin: 0; does what you would expect in Firefox 2.0.0.13 and Opera 9.25 but not for IE 6 and IE 7, where you have to specify margin: -7px 0; Enjoy finding more bugs. For your reference (Box model): http://www.w3.org/TR/CSS21/box.html#border-color-properties I would also be interested to hear about Safari, Fx 3b and IE 8b. Thanks, Manfred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Safari 3.1 (523.13) Screenshot is at: www.webbwize.co.uk/Test_Area/images/Safarihr.jpg Yes, I realise that Firefox knows about colors, I was only talking about them being unknown when dealing with hr. Browser bugs/differences. Who needs 'em? :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Manfred Staudinger To: Alan K Baker Cc: css-d Sent: Wednesday, April 09, 2008 12:42 AM Subject: Re: [css-d] hr / styling Hi Alan, Safari behaves in a similar way to Opera. Which Safari and do you have a screen shot? you don't set border-style so I don't know where it inherits that Philippe Wittenbergh has shown us (in this thread) the default settings for Fx3, so you might want to look into it again. Firefox is even worse as it doesn't seem to know what fuchsia and aqua are so displays white with inset borders in shades of gray. Of course Fx know these colors, but it does not want to apply any! (to proof that I've updated http://test.rudolphina.org/hr.html ) the only really useful browser consistent attribute that hr has is its ability to alter its width It is not as bad as you see it now: if you apply a padding for non-IE and reserve height for IE you will be able to use the background-color consistently. Cheers, Manfred On 09/04/2008, Alan K Baker [EMAIL PROTECTED] wrote: Hi Manfred. Safari behaves in a similar way to Opera. In non-IE browsers, when a border is shown it appears to be in an inset style in two colors, but looking at your code, you don't set border-style so I don't know where it inherits that from. Firefox is even worse as it doesn't seem to know what fuchsia and aqua are so displays white with inset borders in shades of gray. The borders do take on the same hue family in lime! What a total nightmare and a minefield for the unwary. I must admit that if I'd specified the original hr that I used, I'd have made a 1px box with a background color and specified its length. ISTM that the only really useful browser consistent attribute that hr has is its ability to alter its width to suit its container. :-) Regards, Alan. www.theatreorgans.co.uk www.virtualtheatreorgans.com Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups Shopsmith 520 + bits Flatulus Antiquitus - Original Message - From: Manfred Staudinger To: Philippe Wittenbergh Cc: CSS-D Sent: Tuesday, April 08, 2008 9:28 PM Subject: Re: [css-d] hr / styling Reading through your responses I found it necessary to set up a small test page to show the effect of specifying different properties for color on the hr element. http://test.rudolphina.org/hr.html Because of the number of bugs, interpreting the results is a non-trivial task certainly. Some examples: a) IE 6 and IE 7 do show the background-color specified - but if the hr has color specified also, you have to set color: none; to get it. b) Firefox 2.0.0.13 ignores height completely. c) Opera 9.25 does honor the border-color property if specified, but fails to use the color property in its absence. d) margin: 0; does what you would expect in Firefox 2.0.0.13 and Opera 9.25 but not for IE 6 and IE 7, where you have to specify margin: -7px 0; Enjoy finding more bugs. For your reference (Box model): http://www.w3.org/TR/CSS21/box.html#border-color-properties I would also be interested to hear about Safari, Fx 3b and IE 8b. Thanks, Manfred __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
On Apr 9, 2008, at 5:28 AM, Manfred Staudinger wrote: b) Firefox 2.0.0.13 ignores height completely. Gecko (Firefox) does honour the height. But it uses the 'border-box' model for hr. That means: padding and border-width are inside the specified height. In the content-box model, the specified height (or width) applies only to the content of the box (the way browsers apply height (width) to any other block level element. For more on the difference between the two models, see http://www.w3.org/TR/css3-ui/#box-model On Apr 9, 2008, at 7:36 AM, Alan K Baker wrote: In non-IE browsers, when a border is shown it appears to be in an inset style in two colors, but looking at your code, you don't set border-style so I don't know where it inherits that from. Most browsers have a border-style of 'inset' for the hr in their UA stylesheet Philippe --- Philippe Wittenbergh http://l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Hi Manfred.
With thanks to you, Georg, Michael and Philippe.
To clear up a few possible misunderstandings:
Yes, I should have taken time to read the 'standard'.
I have no issue with the concepts of Margin and padding. Sorry if I gave the
wrong impression. I also have no problem with the concept of hr being a block
element.
The problems with the varying 'margin' were due to faulty testing, due to
'browser fighting' by me to try to place some 90px text exactly where I wanted
it, with a hr beneath, and finding that different browsers gave me vastly
varying margins. Just try the following in several browsers:
bodystyleh1 {font-family:Times New Roman, Times,
serif;font-size:90px;font-weight:normal;color:#d00;}/styleh1Some
stuff/h1/body
and view the differences in transparent space, above and below the letters.
(I'm deliberately avoiding calling it margin or padding, to avoid semantic
confusion).
Depending on the browser, there are different methods needed to address the
actual color of horizontal line in hr. My test results are below:
hr {
background-color:#d00; /* Firefox */ Implies that the 'line' is entirely
constructed of padding and transparent space is 'margin'.
color:#d00; /* IE 6 7 */ Implies that the line is
classed as text, the element cannot have padding because background-color does
nothing, and its transparent space is 'margin' .
border-color:#d00; /* Opera Safari */Implies that the line is classed as
a border, the element cannot have padding because background-color does
nothing, and its transparent space is 'margin' .
margin:0;
padding:0;
}
If one of these methods is the de-facto standard, then hr must be classed as
a special case, where some rules of block styling do not apply, or at least one
of the browsers is breaking the rules.
All of this as part of friendly discussion and IMO, of course.
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
- Original Message -
From: Manfred Staudinger
To: Alan K Baker
Cc: css-d
Sent: Sunday, April 06, 2008 2:56 AM
Subject: Re: [css-d] hr / styling
Hi Alan,
Without me looking up specifications, if color has no meaning, then how do
you propose to change the color of a horizontal rule? It is not a border,
neither is it a background, so
how else would you style its color property? To answer my own question,
Mozilla
obviously think it's a background element, but then you can't simply put
printable
characters on top of it, so they are breaking the rules.
If you take a look at the HTML 4.01 Strict DTD
http://www.w3.org/TR/html401/sgml/dtd.html
you will see that HR is a block-element (maybe you meant this when you
say background element)! This answers also your question but in a
different way: looking up the specification is always helpful to learn
what the rules are.
I didn't say you are making false claims but you use some basic
notion very freely. When it comes to differentiate between margin and
padding this should be simple: for example the padding takes the
background-color but the margin not. So if you have a block-level
element and you have specified a background-color then the transparent
space is the elements margin area, isn't it?
The code you posted looks almost the same in Firefox and IE 6.
Was this your
intention?
Above I showed you that hr is defined as a block-level element in
the HTML 4.01 Strict DTD. As long as you don't backup the foreground
element with some evidence, I have to assume it's only your personal
opinion.
Manfred
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Alan K Baker wrote: [···] If one of these methods is the de-facto standard, then hr must be classed as a special case, where some rules of block styling do not apply, or at least one of the browsers is breaking the rules. As far as I'm concerned (which doesn't mean anything), HR are a replaced elements[1] and, therefore, unable to be styled[*?*] beyond their box model[2], just as Form elements should be too. Browser vendors do provide a way to style them up to some point (e.g. I use transparent, border-less HR with a fitting background image in all but the IE family), but I think that's beyond what the standards allow. Nevertheless, I wasn't able to find a reference to the second point (...unable to be styled...). Rafael. [1]http://www.w3.org/TR/CSS21/conform.html#replaced-element [*?*]/Needs reference/ [2]http://www.w3.org/TR/CSS21/visudet.html __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
On Apr 8, 2008, at 6:16 AM, Alan K Baker wrote:
Depending on the browser, there are different methods needed to
address the actual color of horizontal line in hr. My test results
are below:
hr {
background-color:#d00; /* Firefox */ Implies that the 'line'
is entirely constructed of padding and transparent space is 'margin'.
color:#d00; /* IE 6 7 */ Implies that the
line is classed as text, the element cannot have padding because
background-color does nothing, and its transparent space is 'margin' .
border-color:#d00; /* Opera Safari */Implies that the line is
classed as a border, the element cannot have padding because
background-color does nothing, and its transparent space is 'margin' .
margin:0;
padding:0;
}
If one of these methods is the de-facto standard, then hr must be
classed as a special case, where some rules of block styling do not
apply, or at least one of the browsers is breaking the rules.
And browsers have bugs...
The colour you see on an hr is actually the border of the element.
Now, in theory, the colour of the border is determined by the 'color'
of an element, unless specified by the border-color property [1]. That
works correctly for most elements in all browsers. The hr is a
problem child, not because it is a special element, but due to browser
bugs.
* Opera 9.5b, Gecko 1.9 (Fx 3b5), IE 6+ all apply the colour specified
by the color property for the element
* WebKit (Safari 3.1), Opera 9.2x don't apply (inherit) the 'color'
property correctly for the hr The author need to specify the border-
color property (and border-style) [2].
Applying the border-colour property also works correctly in Gecko 1.9,
and Gecko 1.8 (Fx2); not sure about IE.
* Gecko 1.8: the background-color property determines the colour of
the hr, unless specified as 'border-color'.
In all browsers, except IE 6 and 7, one can also use the background-
color property (will fill the space between borders), padding ( i.e.
makes the element taller), margin, width, height, ...
[1] http://www.w3.org/TR/CSS21/box.html#propdef-border-color
[2] for a thin hr (1px tall or similar), you should specify the
border-style (as 'solid'), as the default style in mst browsers is
inset.
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Alan, you did _not_ respond to the list and therefore I'll repeat your
message here:
On 05/04/2008, Alan K Baker [EMAIL PROTECTED] wrote:
I didn't measure enormous but an estimate is over 20px, which is far more
than a simple margin error.
The code is very simple:
CSS:
hr {
background-color:#dd; /* One browser needed this, I forget which one
grin */
color:#dd;
/* Enter margin:0; padding 0: for Firefox */
}
#header {
display:block;
position:absolute 0 0 ;
width:800px;
height:160px;
margin:0;
padding:0;
}
#header h1 {
font-family:Times New Roman, Times, serif;
font-size:90px;
font-weight:normal;
color:#dd;
text-align:center;
margin:0;
padding-top:15px;
}
HTML
div id=header
h1Some header text/h1
hr /
/div
Regards,
Alan.
You wrote:
hr {
background-color:#dd; /* One browser needed this, I forget which one
grin */
color:#dd;
/* Enter margin:0; padding 0: for Firefox */
}
and earlier:
If I style hr / as follows: hr {color:red;} it does appear as red and
displays correctly in most browsers.
However, in Firefox it displays, but with an enormous amount of top and
bottom padding.
Please note that color does not have any meaning if the element has no
content. This only leaves border-color and background-color to specify
any color for styling.
I didn't measure enormous but an estimate is over 20px, which is far more
than a simple margin error.
Sometimes you claim it to be a padding (right) and sometimes a margin
(false, as no color specification is applicable to the margin).
You wrote:
I just found another bug in Firefox 2.0.0.13 which I haven't seen listed
anywhere else.
If I style hr / as follows: hr {color:red;} it does appear as red and
and later:
The code is very simple:
(for the code see above).
I'm sorry, yes the code you posted is very simple, but it does not
show any bug in Firefox 2.0.0.13. The only problem is, you forgot to
show us the rule from your stylesheet, which causes the padding (is
over 20px) on the hr /. As a guess, that rule might just look like
this:
html * {padding: 12px 0 12px 0;}
Manfred
- Original Message -
From: Manfred Staudinger
To: Alan K Baker
Cc: css-d
Sent: Friday, April 04, 2008 7:13 PM
Subject: Re: [css-d] hr / styling
I just found another bug in Firefox 2.0.0.13 which I haven't seen listed
anywhere else.
If I style hr / as follows: hr {color:red;} it does appear as red and
displays correctly in most browsers.
However, in Firefox it displays, but with an enormous amount of top and
bottom padding.
This also causes problems with floats, which tend to float upwards and
partially cover the horizontal rule, leaving a large gap where the float
sits.
The good news is that it can be cured. :-)
Just add margin:0; padding:0; to the hr style and all's well.
Your problem description is not conclusive so can you show this in a
link? You say an enormous amount of top and bottom padding, but
later on you set also _margin_ = 0?
And what is enormous in pixels?
Manfred
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
- Original Message -
From: Manfred Staudinger
To: css-d
Cc: Alan K Baker
Sent: Saturday, April 05, 2008 7:33 PM
Subject: Re: hr / styling
Alan, you did _not_ respond to the list and therefore I'll repeat your
message here:
Please note that color does not have any meaning if the element has no
content. This only leaves border-color and background-color to specify
any color for styling.
I didn't measure enormous but an estimate is over 20px, which is far more
than a simple margin error.
Sometimes you claim it to be a padding (right) and sometimes a margin
(false, as no color specification is applicable to the margin).
I'm sorry, yes the code you posted is very simple, but it does not
show any bug in Firefox 2.0.0.13. The only problem is, you forgot to
show us the rule from your stylesheet, which causes the padding (is
over 20px) on the hr /. As a guess, that rule might just look like
this:
html * {padding: 12px 0 12px 0;}
Manfred
You're right, my reply went direct to you by mistake. On another topic, I
rest my case!! g
Without me looking up specifications, if color has no meaning, then how do
you propose to change the color of a horizontal rule? It is not a border,
neither is it a background, so how else would you style its color property? To
answer my own question, Mozilla obviously think it's a background element, but
then you can't simply put printable characters on top of it, so they are
breaking the rules.
Not sure why you say that I am making false claims. If I appear to be
claiming something to be a padding and sometimes a margin, that is not my
intention. I am well aware that 'margin' has no color property, why would it?
It's a non-printable spacing property. The extra spacing that Firefox inserts
is totally transparent, therefore I can't tell whether it's a margin or padding
in the true sense of the words. It's a 'lump' of transparency that's being
inserted, and it's only Firefox that does it. I call that a bug.
I did not forget to show the rule from my stylesheet that causes padding.
Firstly, if that was the case, it would happen in all browsers and secondly
there is no such rule in my stylesheet. I did not show the code for 'body'
because it is irrelevant in this case. There's nothing in it to cause errant
spacing and there is no html * etc code in my stylesheet.
FWIW I have included below, all that is above the 'hr' definition and there's
nothing after it to affect it. The code can be tested exactly as it is below,
by saving it as a set of styles in an HTML document and a simple hr / command
inserted in the body below it. In Firefox only, it will space itself far more
than a single line height from the top of the page.
OK. Set up your own head/head and try this in Firefox exactly as it is,
body
style
body {
background-color:#f4f9a8;
font-family:Times New Roman, Times, serif;
font-size:12px;
font-weight:normal;
color:black;
margin:0;
padding:0;
}
hr {
background-color:#dd;
color:#dd;
}
#container {
width:800px;
height:auto;
margin:0;
padding:0;
position:absolute;
top:0;
left:20px;
}
/style
div id=container
hr /
/div
/body
You'll notice that there are two color definitions for 'hr'. That's because
Firefox requires background-color to be set, and IE6/7 requires color to be
set. They are mutually exclusive and cause no problems.
In fact I believe that Mozilla are wrong. A hr is a printable line and is
therefore a foreground element and should possess color. By definition, how can
a background be placed on a background, or are they saying that hr possesses
its own z-index?
Regards,
Alan.
www.theatreorgans.co.uk
www.virtualtheatreorgans.com
Admin: ConnArtistes, UKShopsmiths, 2nd Touch A-P groups
Shopsmith 520 + bits
Flatulus Antiquitus
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
On Apr 6, 2008, at 6:49 AM, Alan K Baker wrote:
Without me looking up specifications, if color has no meaning, then
how do you propose to change the color of a horizontal rule? It is
not a border, neither is it a background, so how else would you
style its color property? To answer my own question, Mozilla
obviously think it's a background element, but then you can't simply
put printable characters on top of it, so they are breaking the rules.
You're a bit wrong here.
hr is _not_ a background element.
In Gecko, Opera and WebKit, it is a block element that has a border.
Here are the rules that control of the (default) display of ahr in
Gecko (1.9 - Fx3)) based browsers:
hr {
display: block;
height: 2px;
border: 1px inset;
margin: 0.5em auto 0.5em auto;
color: gray;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}
hr[size=1] {
border-style: solid none none none;
}
(from html.css).
Opera and WebKit based browsers have very similar rules in their UA
stylesheets.
Gecko 1.8 (Fx2) has slightly different rules:
hr {
display: block;
height: 2px;
border: 1px -moz-bg-inset;
margin: 0.5em auto 0.5em auto;
-moz-float-edge: margin-box;
-moz-box-sizing: border-box;
}
hr[size=1] {
border-style: -moz-bg-solid none none none;
}
If you want control over the display of the hr, use the border-property.
If you want control over the 'space' (margin) before/after the hr,
use the margin-property (and IE windows has many problems with that
one).
Philippe
---
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Hi Alan,
Without me looking up specifications, if color has no meaning, then how do
you propose to change the color of a horizontal rule? It is not a border,
neither is it a background, so
how else would you style its color property? To answer my own question,
Mozilla
obviously think it's a background element, but then you can't simply put
printable
characters on top of it, so they are breaking the rules.
If you take a look at the HTML 4.01 Strict DTD
http://www.w3.org/TR/html401/sgml/dtd.html
you will see that HR is a block-element (maybe you meant this when you
say background element)! This answers also your question but in a
different way: looking up the specification is always helpful to learn
what the rules are.
Not sure why you say that I am making false claims. If I appear to be
claiming something to be a padding and sometimes a margin, that is not my
intention. I am well aware that
'margin' has no color property, why would it? It's a non-printable spacing
property. The
extra spacing that Firefox inserts is totally transparent, therefore I can't
tell whether it's a margin or padding in the true sense of the words. It's
a 'lump' of transparency that's being inserted, and it's only Firefox that
does it. I call that a bug.
I didn't say you are making false claims but you use some basic
notion very freely. When it comes to differentiate between margin and
padding this should be simple: for example the padding takes the
background-color but the margin not. So if you have a block-level
element and you have specified a background-color then the transparent
space is the elements margin area, isn't it?
I did not forget to show the rule from my stylesheet that causes padding.
Firstly, if that was the case, it would happen in all browsers and secondly
there is no
such rule in my stylesheet. I did not show the code for 'body' because it is
irrelevant in
this case. There's nothing in it to cause errant spacing and there is no
html * etc code in my stylesheet.
O.k. Anyway, we now know it's the margin.
FWIW I have included below, all that is above the 'hr' definition and there's
nothing after
it to affect it. The code can be tested exactly as it is below, by saving it
as a set of styles in an HTML document and a simple hr / command inserted
in the body below it. In
Firefox only, it will space itself far more than a single line height from
the top of the page.
OK. Set up your own head/head and try this in Firefox exactly as it is,
body
style
body {
background-color:#f4f9a8;
font-family:Times New Roman, Times, serif;
font-size:12px;
font-weight:normal;
color:black;
margin:0;
padding:0;
}
hr {
background-color:#dd;
color:#dd;
}
#container {
width:800px;
height:auto;
margin:0;
padding:0;
position:absolute;
top:0;
left:20px;
}
/style
div id=container
hr /
/div
/body
The code you posted here looks almost the same in Firefox and IE 6.
Was this your
intention?
In fact I believe that Mozilla are wrong. A hr is a printable line and is
therefore a
foreground element and should possess color.
Above I showed you that hr is defined as a block-level element in
the HTML 4.01 Strict DTD. As long as you don't backup the foreground
element with some evidence, I have to assume it's only your personal
opinion.
Manfred
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
Philippe Wittenbergh wrote:
Here are the rules that control of the (default) display of ahr in
Gecko (1.9 - Fx3)) based browsers:
hr {
-moz-box-sizing:
border-box;
}
So that border-box value is why Gecko fails my 'Test 1' here...
http://www.gunlaug.no/contents/wd_chaos_24.html
...where 'padding' gets absorbed in 'height'. That's one default-style I
have overlooked.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
On Sat, 05 Apr 2008 22:49:26 +0100 Alan K Baker wrote: [snip] Without me looking up specifications, if color has no meaning, then how do you propose to change the color of a horizontal rule? It is not a border, neither is it a background, so how else would you style its color property? To answer my own question, Mozilla obviously think it's a background element, but then you can't simply put printable characters on top of it, so they are breaking the rules. [snip] It is an empty container with a border which is not allowed to contain anything other than a background colour or background image. http://www.highdots.com/css-editor/html_tutorial/block/hr.html NOTE: Contents: Empty in the above. http://blakems.com/experimental/hr/ http://www.3internet.co.uk/resources/Design/theHRtag.aspx To compare browsers here is a test page (groove is usually the default for a hr line): http://www.comptutor.org/mytest/HR_Examples.html However the HTML specs on it are light allowing browser manufacturers to do as they please. No rules are being broken by either browser. HTML2: http://www.w3.org/MarkUp/html-spec/html-spec_5.html#SEC5.9 HTML3.2: http://www.w3.org/TR/REC-html32#hr HTML4: http://www.w3.org/TR/REC-html40/present/graphics.html#edef-HR I do ask you this, if it is the foreground that is see-through in IE then how does IE allow a background image? That question is rhetorical and requires you only to think it through. Upshot is if you want to acheive a solid colour HR either use both the background-color and color or use a solid coloured border and overflow hidden. I usually put a bottom border on the content div above instead but this is not always practical. -- Michael All shall be well, and all shall be well, and all manner of things shall be well - Julian of Norwich 1342 - 1416 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] hr / styling
I just found another bug in Firefox 2.0.0.13 which I haven't seen listed
anywhere else.
If I style hr / as follows: hr {color:red;} it does appear as red and
displays correctly in most browsers.
However, in Firefox it displays, but with an enormous amount of top and
bottom padding.
This also causes problems with floats, which tend to float upwards and
partially cover the horizontal rule, leaving a large gap where the float sits.
The good news is that it can be cured. :-)
Just add margin:0; padding:0; to the hr style and all's well.
Your problem description is not conclusive so can you show this in a
link? You say an enormous amount of top and bottom padding, but
later on you set also _margin_ = 0?
And what is enormous in pixels?
Manfred
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
