Hover & underline help needed

Discussion in 'CSS' started by fadetoblack22, Sep 1, 2009.

  1. #1
    This is my test page:

    http://www.monkeygambling.com/test1.php

    The a href is around the logos and text.

    When I hover over the boxes the text underlines and I can't get it to stop.

    On the eurogrand box i have just put the a href around the text and it is fine, so it seems to be a problem with the image.

    Can someone help me with this please.

    I have tried using:

    .insidetext a:hover {text-decoration: none;}
    
    .insidetext img a:hover {text-decoration: none;}
    
    a img{ text-decoration:none; }
    Code (markup):
     
    fadetoblack22, Sep 1, 2009 IP
  2. ywp

    ywp Peon

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Why not just do it this way? You could even include the top image. I've never put so much into a link but, as far as I know, no follow equals no foul.

    
    <div class="offerbox">
    <a href="http://www.monkeygambling.com/casino-site.php?id=eurogrand" target="_blank" rel="nofollow">
    
    <img src="img/eurogrand.jpg">
    <div class="insidetext">
    <p>At Eurogrand casino every player is treated like a VIP! This classy casino is great to look at and great to play. They offer a very attractive bonus for the high roller players out there.</p>
    <p class="bonus">Mega £1000 bonus!</p>
    </div>
    
    </a>
    </div>
    
    Code (markup):
     
    ywp, Sep 1, 2009 IP
  3. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #3

    As far as I can see, that code is how I have it. Or if you are referring to the eurogrand one, I want the image to be included as well.
     
    fadetoblack22, Sep 1, 2009 IP
  4. ywp

    ywp Peon

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    It's not the same. The new code includes the image. Here's the structure:

    Div > Anchor > Image > Div > Paragraph > Paragraph (New code structure)

    Div > Image > Div > Anchor > Paragraph > Paragraph (Old code structure)

    Replace the old Eurogrand code and then refresh. Format the other links the same way because they are all blue instead of white and gold in Firefox.
     
    ywp, Sep 1, 2009 IP
  5. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #5
    But the rest of the boxes are like the "NEW CODE" and that is where the problem is.

    I haven't sorted out the colours of the links yet.

    thanks.
     
    fadetoblack22, Sep 1, 2009 IP
  6. ywp

    ywp Peon

    Messages:
    96
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I saw some nesting issues. Copy and paste the following:

    <div class="offerbox"><a href="http://www.monkeygambling.com/casino-site.php?id=21nova" target="_blank" rel="nofollow"><img src="img/21nova.jpg">
      <div class="insidetext">
        <p>21Nova (formerly 32Vegas) has been revamped for 2009. Their casino provides a second to none selection of games and focuses on the most important part of online casinos; the player.</p>
        <p class="bonus">Claim your £132 bonus!</p>
         </div></a>
    </div>
    <div class="offerbox"> <a href="http://www.monkeygambling.com/casino-site.php?id=eurogrand" target="_blank" rel="nofollow"><img src="img/eurogrand.jpg">
      <div class="insidetext"> 
        <p>At Eurogrand casino every player is treated like a VIP! This classy casino is great to look at and great to play. They offer a very attractive bonus for the high roller players out there.</p>
        <p class="bonus">Mega £1000 bonus!</p>
         </div></a>
    </div>
    <div class="offerbox"> <a href="http://www.monkeygambling.com/casino-site.php?id=willhillcasino" target="_blank" rel="nofollow"><img src="img/williamhillcasino.jpg">
      <div class="insidetext">
        <p>As one of the most recognisable and reputable names in the gambling industry, William Hill Casino brings you a massive selection of casino games using state of the art software. </p>
        <p class="bonus">£150 bonus for you</p>
         </div></a>
    </div>
    <div class="offerbox"> <a href="http://www.monkeygambling.com/casino-site.php?id=casinotropez" target="_blank" rel="nofollow"><img src="img/casinotropez.jpg">
      <div class="insidetext">
        <p>Casino Tropez is a highly functional and generous casino. They offer over 100 award winning games for your playing delight!. Take advantage of all their bonuses to get upto £3000.</p>
        <p class="bonus">£3000 in bonuses!</p>
         </div></a>
    </div>
    Code (markup):
    I did forget to mention that you should add the following to your style sheet:

    .offerbox a:hover {
    text-decoration: none;
    }

    That should be it. You can PM me on this specific issue, if it doesn't work. :)
     
    Last edited: Sep 1, 2009
    ywp, Sep 1, 2009 IP
  7. fadetoblack22

    fadetoblack22 Well-Known Member

    Messages:
    2,399
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    160
    #7
    Thanks, it worked straight away after using: .offerbox a:hover {
    text-decoration: none; } without changing the other code.

    from what I could see, you put the </a> outside the div and I had it inside. It works either way for me :)
     
    fadetoblack22, Sep 1, 2009 IP