Looking for equivalent of 'noshade' in CSS.

[LouisCyphre]

Hi All,

I'm creating a site in XHTML and CSS. The 'noshade' attribute of the HR element that was present in HTML has been depreciated. So, a hopefully simple question... How do I do the equivalent of HTML's

<HR noshade>

in XHTML and CSS?

I haven't managed to find the answer on the W3C site, so I'm hoping one of you can help.

 

[rpgfan3233]

Just use the same colour for the background-color and border-color.

 

[LouisCyphre]

I was already setting the background-color as that seemed to be the best (only?) way to colour the horizontal rule, and if I set the border-color too, it seems to make no difference. Firefox (and IE) still render the horizontal rule with a 'sunken 3D' look.

Any ideas?

 

[sysadmin42]

why don't you make a 1px-wide .gif and then <img src="images/1px_red.gif" width="100%" height="1"> (or however you want it to look). This way you can do whatever shading you want and use any color, not just web-safe.

 

[Vragabond]

Check this article for peculiarities with horizontal rule. There are also examples on the page that don't have the 3d look. Avoid the img, since hr does the job.

http://www.sovavsiti.cz/css/hr.html

 

[sysadmin42]

for the particular purpose, you're probably right not to use img. However, if you have spacing requirements, you can have a 5-px high img, where all pixels are transparent except for one or two. It's helpful for making boxes with rounded borders in a table, or things like that. For a simple line by itself, hr is better.

 

[ChrisHunt]

You can handle the "spacing requirements" in CSS too, with judicious use of height, width, border, padding and margin. 1-pixel gifs are very rarely necessary now.

Note thet you can often do without <hr>s too - say you want a line after a block of text? Just put that text in a <div> and give it a border-bottom.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[sysadmin42]

css junkies- all of ya'. (just kidding) That's good advice, chris. thanks.

 

[LouisCyphre]

Vragabond: Thanks for that link. Using border and color as described on that site has cured my cross-browser woes and given me a flat hr.

Chris: Setting the border of a block of text using CSS is a great idea I hadn't thought of. I can't use it on my current project as the page has to degrade gracefully, but it's certainly filed away for future use.

Thanks to all for your replies.