1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

CSS Menu Problem

Discussion in 'CSS' started by Immorta, Jan 6, 2006.

  1. #1
    Hi just wondering if anyone can help with a small CSS problem.

    I am doing a menu on a website and it is all in CSS, when you mouseover the div tag I am wanting the background colour of the div to change.

    The div has a link on it which works and the background colour does change if you view the site in Firefox but it doesnt work in IE...

    If anyone can have a look for me it would be appreciated....

    Code as follows... If you want the URL to see it working plz message me.


    THE DIV TAG AND LINK

    <div class="sectionheader"><a href="#" class="link">&nbsp;HOME</a></div>


    RELEVANT CSS

    .sectionheader {
    background-color:#ffffff;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    word-spacing:1px;
    margin-top:4px;
    border-width:thin;
    border-color:#CCCCCC;
    border-style:solid;
    margin-left:30px;
    width:140px;
    height:14px;
    font-weight:bold;
    }
    .sectionheader:hover {
    background-color:#eeeeee;
    cursor:pointer;
    }
    .link {
    font-weight:bold;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    text-decoration:none;
    }
    .link:hover {
    font-weight:bold;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    text-decoration:none;
    cursor:pointer;
    }



    Thanks in advance.....
     
    Immorta, Jan 6, 2006 IP
  2. Immorta

    Immorta Peon

    Messages:
    379
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Just so you know the whole box is supposed to be a link not just the text...

    Thx Immo
     
    Immorta, Jan 6, 2006 IP
  3. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #3
    First you need to make the link a block element, so that it fills it's parent element. Add display: block; to your .link class.

    Second you need to include a 1px transparent image as the background image for your .link class. This causes IE to render the background without affecting FireFox.

    Third you need to move the background-color change in the hover pseudo class from .sectionheader to .link. IE does not recognize the hover pseudo class on anything except anchor tags.

    With these changes your menu should function as you want.
     
    draculus, Jan 6, 2006 IP
    Immorta likes this.
  4. just-4-teens

    just-4-teens Peon

    Messages:
    3,967
    Likes Received:
    168
    Best Answers:
    0
    Trophy Points:
    0
    #4
    wouldnt this then go the other way around?

    <a href="#" class="link"><div class="sectionheader"></div></a>

    like so?
     
    just-4-teens, Jan 6, 2006 IP
    Immorta likes this.
  5. Immorta

    Immorta Peon

    Messages:
    379
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    That as well I noticed that Just4 :)
     
    Immorta, Jan 6, 2006 IP
  6. Immorta

    Immorta Peon

    Messages:
    379
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Right thanks Drac that sort of fixed the problem, the background now appears but only when you hover over the text and not the box.

    Any ideas?
     
    Immorta, Jan 6, 2006 IP
  7. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #7
    No. The First and Second items may not be needed depending on how the menu is finally implemented. But the .link class must go inside the .sectionheader class.
     
    draculus, Jan 6, 2006 IP
  8. draculus

    draculus Peon

    Messages:
    63
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Add a width: 100% to your .link class.
     
    draculus, Jan 6, 2006 IP
  9. Immorta

    Immorta Peon

    Messages:
    379
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Got it working, thanks you 2...
     
    Immorta, Jan 6, 2006 IP
  10. Immorta

    Immorta Peon

    Messages:
    379
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #10
    For future reference.........

    CSS

    .sectionheader {
    background-color:#ffffff;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    word-spacing:1px;
    margin-top:4px;
    border-width:thin;
    border-color:#CCCCCC;
    border-style:solid;
    margin-left:30px;
    width:140px;
    height:14px;
    font-weight:bold;
    }
    .link {
    font-weight:bold;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    text-decoration:none;
    display: block;
    }
    .link:hover {
    font-weight:bold;
    color:#677085;
    font-size:11px;
    font-family:"Arial";
    text-decoration:none;
    cursor:pointer;
    display: block;
    background-color:#eeeeee;
    cursor:pointer;
    }

    CODEBLOCK

    <div class="sectionheader"><a href="#" class="link">&nbsp;HOME</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;ABOUT CNL</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;JEWELLERY</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;HANDBAG CHARMS</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;MOBILE CHARMS</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;CONTACT US</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;LOG IN</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
    <div class="sectionheader"><a href="#" class="link">&nbsp;VISIT US</a><img src="images/spacer.gif" width="1" height="1" class="link" alt="" /></div>
     
    Immorta, Jan 6, 2006 IP