CSS Style for

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
Hello world,

I have noticed that when a CSS style is defined for <hr> lines, such as a
certein line thickness (height) and color, Internet Explorer will format the
line as specified, while Firefox will ignore the format and draw the line in
default style.

Knowing that FF typically is more standards conforming than IE in many
respects, I now wonder if a browser is supposed to deal with CSS styles for
<hr> lines (in which case FF is buggy in this respect)? What do the
standards say?

Curious, Jens

Re: CSS Style for

Quoted text here. Click to load it

Not much.

hr is a rebel element, I don't know of two browsers that do it the
same and the recommendations are not terribly prescriptive of what
"should" be done, so none are incorrect.

I find the easiest way to solve the issue is to use hr only in the
no-CSS rendering, setting them in CSS to display: none. Then use
borders of elements styled as you like for visual dividers in the CSS
rendering, as these are rather predictably accomplished.

Re: CSS Style for

Quoted text here. Click to load it

For Gecko remove the borders and set the background color.
For IE set the color.

Quoted text here. Click to load it


The <hr> element doesn't fit into the CSS model very well. Browsers
have different defaut styles and hence you need to set properties to
over ride all those differen styles with your own.


"My theories appal you, my heresies outrage you,
 I never answer letters and you don't like my tie."  - The Doctor

Re: CSS Style for

Quoted text here. Click to load it

Yep, when color, background-color and no borders are all set, it works for
both browsers.
Quick and easy solution!

However, considering the other posts, I think it could be a good idea to
gradually move away from <hr> in the future.
Thanks to all for your advice!


Re: CSS Style for

Jens Lenge wrote:
Quoted text here. Click to load it

<hr /> is a pain. there are several reasons why I wouldn't use it:
- the one you mentioned (CSS/IE behaviour)
- horizontal rulers do disturb the reading convenience on a website.
While reading the eye interprets the ruler as a visual 'stop' sign. So
use it only when it's definitely necessary. I tweak around <hr /> by
applying a display: none; to it, and wrap it in a <div> having a
background-image GIF with a 1px height and background-position: top
left; background-repeat: repeat-x; set. With this you still get a
correct structured document (contentwise).


remove nixspam to reply

----== Posted via Newsfeeds.Com - Unlimited-Uncensored-Secure Usenet News==----
http://www.newsfeeds.com The #1 Newsgroup Service in the World! >100,000
---= East/West-Coast Server Farms - Total Privacy via Encryption =---

Site Timeline