X-Cart forums - Firefox and Horizontal Ruled Lines i.e. HR tag

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Firefox and Horizontal Ruled Lines i.e. HR tag (https://forum.x-cart.com/showthread.php?t=19523)

Firefox and Horizontal Ruled Lines i.e. HR tag

OK, for those smarter than myself at all things CSS, what is rthe best way to get a <HR> tag to display in colour in both IE (easy) and Firefox (mixed results!). I've been reading the information on:

http://www.computergripes.com/firefoxsites.html

about Horizontal Ruled Lines (3/4/ way down the page) and there doesn't seem to be any hard and fast rules other than trying to trick firefox into displaying a coloured line. For example:

Code:

HR{ COLOR: #FF9C39;}

in the stylesheet gives these outputs depending on use of the hr tag:

Code:

<hr>  IE: orange Firefox:no color 

<hr color="green" > IE: orange Firefox: orange 

<hr style="background-color: green;">  IE: orange  Firefox: no color  

<hr style="background-color:green;" size="5">  IE: orange Firefox: green

the second one is what the author defaults to, actually giving the hr tag a color attribute which then forces firefox to then override it with the stylesheet attribute! :? Also from that page, someone has said (as an example):

Code:

 hr {color: orange}

  hr {border-width: 7px; border-style: solid; border-color: orange

i.e. specified twice in the stylesheet, gets it to work in both IE and firefox.

What should I be using?

Thanks

Dan

Use whatever works :) Also, as a general rule, don't use color names for colors but their hex colors.

Lol, Thanks Balinor. Yes I know about the colour names etc, was only quoting verbatim from the website. What do you use then?

Thanks

Dan

I typically don't use <hr> tags, but when I do I just leave them as the default grey. If I want a colored line I will use a 1px high table cell with a background color instead.

Thanks, I'll give that a try!

Dan

Actually, just found this on the web and it's giving consistent results now from the stylesheet.

Code:

HR { color: #FF0000; background: #FF0000; border: 0; Height:1px;}

This is handy for anyone wanting to change the colour of default x-cart <hr> tags and wondering why simple edits to skin1.css don't work in firefox.

Dan