Welcome to WebmasterWorld Guest from 34.204.173.36

Forum Moderators: open

Message Too Old, No Replies

Colored line in IE and Firefox

The right syntax for a colored line

     
12:41 pm on Sep 13, 2005 (gmt 0)

New User

10+ Year Member

joined:May 9, 2005
posts:4
votes: 0


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?

2:14 pm on Sept 13, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


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

One way.

2:21 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member kaled is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Mar 2, 2003
posts:3710
votes: 0


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.

6:07 pm on Sept 13, 2005 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Mar 9, 2003
posts:2099
votes: 10


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?

6:53 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:728
votes: 0


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

7:04 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 26, 2004
posts:1497
votes: 0


<hr />

hr {
color: #bae1f7;
background-color: #bae1f7;
}
7:11 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

7:31 pm on Sept 13, 2005 (gmt 0)

Preferred Member

10+ Year Member

joined:Aug 17, 2005
posts:432
votes: 0


Suzy wins ;)

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

7:50 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 30, 2003
posts:728
votes: 0


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

8:57 pm on Sept 13, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Oct 1, 2002
posts:5199
votes: 0


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

4:59 am on Sept 14, 2005 (gmt 0)

New User

10+ Year Member

joined:May 9, 2005
posts:4
votes: 0


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).