#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2010
    Posts
    1
    Rep Power
    0

    Background Color not displayed on firefox and IE


    Hello there.

    I tried to display the background color in my navigation, but it wan't work. Works fine in safari. Doesn't work in firefox or IE

    Can anyone help?


    .navbar {
    width: 960px;
    line-height: 30px;
    background-color: silver;
    z-index:100;
    display: block;
    clear: both;
    }

    .navbar ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    z-index:100;
    }

    .navbar ul li {
    display: block;
    position: relative;
    float: left;
    width: 120px;
    font-weight: bolder;
    z-index:100;
    }

    .navbar li ul {
    display: none;
    line-height: 20px;
    z-index:100;
    }

    .navbar ul li a {
    display: block;
    text-decoration: none;
    color: #48fc30;
    padding: 4px 15px 4px 15px;
    background: #silver;
    margin-left: 1px;
    }

    .navbar ul li a signup {
    background: #black;
    }

    .navbar ul li a:hover {
    background: #grey;
    }


    .navbar li:hover ul {
    display: block;
    position: absolute;
    }

    .navbar li:hover li {
    float: none;
    font-size: 11px;
    }

    .navbar li:hover a {
    background: #red;
    }

    .navbar li:hover li a:hover {
    background: #blue;
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2009
    Location
    Painesville, OH (Cleveland)
    Posts
    33
    Rep Power
    38
    using color names instead of hex values (for example #000000 for black) will tend to give you better results from my experience. Try using those instead. If you don't have photoshop or an image editing tool to determine the codes, there's a great add-on for Firefox called ColorZilla that you can use to pick out colors.

    From the get go, it appears that you've called all the colors with a # before them, except for the first one for .navbar

    Hope this helps!

    Comments on this post

    • f_nietzsche agrees
  4. #3
  5. Autodidact
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2008
    Location
    Canada
    Posts
    741
    Rep Power
    837
    Welcome miegoreng,

    That's because
    Code:
    background: #silver;
    background: #black;
    background: #grey;
    background: #red;
    background: #blue;
    is all wrong. What are those crazy Mac people teaching you?

    background is the short-hand property for defining all or several background properties, like image and position:
    Code:
    background: #ffffff url('img_tree.png') no-repeat right top;
    You just want to set the background color, so use this:
    Code:
    background-color: black;
    I also support SlidingHorn's recommendation about using hex colors. The colors available when using plain English is limited, unlike with hex or rgb.

    Recommendation two: develop your site using Firefox, not Safari. It's a better teacher and more friendly to developers, particularly regarding add-ons.
    Last edited by f_nietzsche; August 9th, 2010 at 07:26 PM.
    Soldiers, from the height of these pyramids forty centuries look down upon you.
    ▪ Napoleon, on the eve of the Battle of the Pyramids

IMN logo majestic logo threadwatch logo seochat tools logo