Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: hr colors issue

  1. #1
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts

    hr colors issue

    Hi,

    The other day I was trying to color HR's and found that they can be coloured in IE but that they show up in the default appearance in FF. Then a moment ago, I found a thread here where a guy has coloured his HR in FF by telling it to be gray, though he had hard coded the style in the html page.

    Is it necessary to use the english spelling for color for HR's? why did my hex code not work?

    The css I had used was

    #menu hr {color : #004040;}
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I think that the support for <hr> styling is a little sketchy. I'd go for a div with a border or some kind of background image that's 1px tall.

  • #3
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by bazz
    The css I had used was

    #menu hr {color : #004040;}
    Try using background-color instead of color.

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Gaw, now why didn't I think of that?

    Thanks

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's much easier to use a DIV - if you keep the real HR as well, you'll have the best of both worlds:
    Code:
    <div class="hr"><hr /></div>
    and then
    Code:
    div.hr
    {
        .. border styles ..
    }
    div.hr hr
    {
        display:none;
    }
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Location
    Kansas City, Kansas
    Posts
    1,518
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Nice one Brocake. I'll have to keep that one in mind.

  • #7
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If working over a solid background-color, this works for IE, Firefox, and Opera on PC.

    Set the color:; to blend with the containing element's background, and the border to whatever color you'd like the hr:

    Code:
    hr { border:0; border-top:solid 1px #e3e3e3; color:#fff; }
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.

  • #8
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Hmm, good idea both of you, (BC and McD)

    I don't readily see the need to color the HR any longer, since BroCakes idea of making it transparent should make it suitable for any use irrespective of background color and therefore allow for C+P more?

    Bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •