A few CSS/HTML questions for the pros

Discussion in 'HTML & Website Design' started by martman, Sep 23, 2010.

0
  1. #1
    1. Why is it that I can write CSS like this:

    #sidebar nav {

    background-color: #fff;

    }

    but if I want to have it hover a different color I have to do it separately like so:

    #sidebar nav:hover {
    background-color: #ccc;

    }


    why can't it simply be written all in one like this?


    #sidebar nav {

    background-color: #fff;
    hover: #ccc;
    }

    you can put most other properties all in one, why does a hover color have to be done separate? Just wondering why so I better understand the language.

    One more question:

    I am playing around with css gradients, and I notice that if I make my nav buttons a solid color, the hover works just fine, but if I use the webkit/moz gradient properties on my buttons it gives them the gradient effect, but now there is no hover color that works until I revert buttons to solid color with no gradient.
     
    martman, Sep 23, 2010 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    It works that way because that's how selectors work in the DOM. If they did it as you suggest, browsers would have to interpret what you write and convert it to the same thing so it can work with the DOM.

    Not sure about the second question. Need to see some markup.
     
    drhowarddrfine, Sep 23, 2010 IP
  3. martman

    martman Member

    Messages:
    88
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    41
    #3
    OK,

    I have this:

    #topnavbar nav{
    float:left;
    width:120px;
    height:27px;
    margin-right:2px;
    margin-bottom:-10px;
    border:solid 1px black;
    -moz-border-radius: 10px;s;
    -webkit-border-radius: 10px;s;
    border-radius: 10px;s;

    background-color: #285691;
    background-image: -moz-linear-gradient(top, #285691, #17385F); /* FF3.6 */
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #285691),color-stop(1, #17385F)); /* Saf4+, Chrome */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#285691', EndColorStr='#17385F'); /* IE6,IE7 */
    -ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#285691', EndColorStr='#17385F')"; /* IE8 */
    }

    If I remove the gradient, the hover works. If I add it it doesn't.

    #topnavbar nav:hover {
    background-color:#666;

    }

    Also, in my index html I am using HTML5 <nav> tags.
     
    martman, Sep 23, 2010 IP
  4. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #4
    Firefox needs you to add 'display:block' to the new html5 elements like nav, section, article, etc. That will probably fix it.
     
    drhowarddrfine, Sep 23, 2010 IP
  5. wounded1987

    wounded1987 Well-Known Member

    Messages:
    2,914
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    150
    #5
    the first one is no hover effect color, the second one is. sometimes u need to make a diffrent color for the entire block when a user hovers it. that's why one is simple without hover, and other is with the hover.
     
    wounded1987, Sep 23, 2010 IP