Colored line in IE and Firefox

The right syntax for a colored line

[heiskhan]

I'm currently validating my code where I use blue lines as data separators.

The only way I get a line to be the color I wan't in both IE and Firefox is:

<hr color='#BAE1F7' />

This gives me the outlook I wan't, but my validator keeps giving me a warning:

Warning: <hr> proprietary attribute "color"

I've tried <hr style='color:#BAE1F7' /> and it works in IE, but not in Firefox.

Is there a proper way to do a colored line that would work in both browsers?

[appi2]

<div style="background:transparent; border-top:1px solid #000000; width:500px;"></div>

One way.

[kaled]

This is really a CSS issue (forum83).

There is, no doubt, a better way but this is roughly how I do it.

<p style="border-bottom:2px solid red">&nbps;</p>

As it stands, this is crude and can be improved upon. The obvious improvement would be to define a class e.g.

p.clb { border-bottom:2px solid red }

and use it thus

<p class="clb">&nbps;</p>

That leaves the issue of vertical centering but that's not too tricky.

Kaled.

[ronin]

Oooh. Those are nas-tee hacks.

I would stick with using the <hr> tag for horizontal rules, heiskhan.

The CSS mark-up:

<hr style="color:#bae1f7;" />

looks like the best option - I'm not sure why Firefox isn't supporting this. Is it not in the W3C specs?

[bedlam]

Oooh. Those are nas-tee hacks.

I would stick with using the <hr> tag for horizontal rules, heiskhan.

The CSS mark-up:

<hr style="color:#bae1f7;" />

looks like the best option - I'm not sure why Firefox isn't supporting this. Is it not in the W3C specs?

I don't know the reason why it's not well supported, but I do know that currently, if for some reason you need a simple horizontal line in a single colour in that displays similarly in various browsers, an <hr /> alone will be inadequate.

Further reading (especially the link in msg #4) [webmasterworld.com].

-B

[Robin_reala]

<hr />

hr {
 color: #bae1f7;
 background-color: #bae1f7;
}

[SuzyUK]

Some browsers use borders to generate the HR some use color, and some use background color..

the best x-browser way I've found to get them all to play nice is to use the borders.. i.e. remove the height from the hr and don't use color or background-color at all then remove all borders and just use either the top or bottom one to display your solid color

hr {
height: 0;
border: 0;
border-top: 1px solid #bae1f7;
}

Suzy

[appi2]

Suzy wins ;)

but why bother with the border:0?
Just wondering.

[bedlam]

Suzy always wins. *pout*

;-)

Seriously, the 'border:0;' must be to set all borders on the element to '0'. I take it that 'border:1px 0 0 0;' would work as well in the situation described, but then you'd have to add extra declarations for colour and style. The way it's shown is the shortest combination of declarations to achieve the effect.

-B

[SuzyUK]

bedlam don't pout :).. LOL

it's just the easiest way I've found, there is likely others

appi2, bedlam is 100% correct, all the borders need setting to 0 to stop those browsers that use borders producing what you don't want.

then the next line as bedlam also points out is the smallest combination of rules to achieve what you do want!

this would work just as well

hr {
height: 0;
border-width: 1px 0 0 0; /* remove all borders except the top one */
border-style: solid;
border-color: #bae1f7;
}

but requires more rules ;)

Suzy

[heiskhan]

Thanks to all, problem solved! :)

I wen't with Suzy's method, it required the smallest amount of alterations on my old code (all 300+ pages of them).