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 Problem - $25 By Paypal For First Person That Gives Correct Fix

Discussion in 'CSS' started by jilliani, Jan 29, 2011.

  1. #1
    I'm having problem adding a hyperlink to an image on my website. I'll send $25 by Paypal to the first person that posts a fix. Don't PM me please. My PM is not working.

    I'm trying to add a Facebook image to the right side of my navigation bar. If you will look at the picture, you'll see the image displays perfectly before I add the hyperlink.

    [​IMG]

    As soon as I add a link to the image, you can see it has a black border on the right side and the top and bottom margins expand. You can view the site at the link below to see how it appears once the link is added to the image.

    http://mywalletdepot.com

    [​IMG]

    Basically, I want to be able to add the link and make the image appear just as it did before the link was added. I understand that it is currently picking up all the hyperlink attributes for that container, I just don't know how to override them.

    If you can help with this, please post your answer right on the page. I'll check each one and the first person that posts a fix, I'll send you $25 by Paypal.

    Thanks,

    Brent
     
    jilliani, Jan 29, 2011 IP
  2. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #2
    It is inside the unordered list, class drop-down-menu. Take it out of that and that should solve your problem. :)
     
    jeremyhowell, Jan 29, 2011 IP
  3. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #3
    Woops sorry, Remove the class from the <a> tag "drop-down-menu-item". That will fix it.
     
    Last edited: Jan 29, 2011
    jeremyhowell, Jan 29, 2011 IP
  4. jilliani

    jilliani Greenhorn

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    I removed this line from the css. It did not work. Below is the pic of what happened with this line removed.

    .drop-down-menu a{display:block;position:relative;z-index:5;}

    [​IMG]
     
    jilliani, Jan 29, 2011 IP
  5. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #5
    Try this

    
    <div style="float: right; margin-top:2px; margin-bottom:2px;">
    <a href="http://www.facebook.com/" >
    <img src="./Cool Wallets - Wallet Shop - MyWalletDepot.com_files/fb.png" width="30" height="30"></a>
    </div>
    
    Code (markup):
     
    jeremyhowell, Jan 29, 2011 IP
  6. jilliani

    jilliani Greenhorn

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #6
    [​IMG]

    That took care of the border on the right side, but there is still a problem with the margins.
     
    jilliani, Jan 29, 2011 IP
  7. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #7
    Hi I believe the problem is with menu.js appending classes automatically to <a> tags in the unordered list, remove the include statement to this file and append the classes manually to the list items this will fix your problem. If you wait just a minute I'll show you what I mean.
     
    jeremyhowell, Jan 29, 2011 IP
  8. allthewebsites

    allthewebsites Peon

    Messages:
    19
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    <a href="http://www.facebook.com/" class=""> 
    <img src="http://mywalletdepot.com/content/cache/skins/MyWalletDepot/images/fb.png" height="30" width="30"></a>
    
    Code (markup):
    the class "drop-down-menu" is getting inherited. Try adding a new class and check it. When I removed the class="drop-down-menu", it did work.

    BTW, your site is correctly displaying in Chrome Browser with the current code, but not in FF.

    You need to recheck the CSS for working correctly in both the browsers.

    Hope that helps. :)
     
    allthewebsites, Jan 29, 2011 IP
  9. jilliani

    jilliani Greenhorn

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #9
    Hey, I figured it out...with your help of course. This worked.

    <div style="float: right; margin-top:2px; margin-bottom:2px;">
    <a href="http://www.facebook.com/" style="border:none; padding-top:0px; padding-bottom:0px;">
    <img src="http://mywalletdepot.com/content/cache/skins/MyWalletDepot/images/fb.png" height="30" width="30"></a>
    </div>

    This is the part that was screwing me up.

    .drop-down-menu-item
    {
    background-color: #cccccc;
    border-top-width: 0px;
    border-top-style: solid;
    border-top-color: white;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    text-decoration: none;
    color: black;
    font-size: 12px;
    }


    Give me your email address and I'll paypal you. Thanks for your help.
     
    jilliani, Jan 29, 2011 IP
  10. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #10
    OK so what you need to do is create the hover effect in the CSS rather than using menu.js as this is causing problems for you. Add this to your CSS, let me know if it fixes your problem.

    
    .drop-down-menu-item:hover {
    	background:#hexvaluehere;
    }
    
    Code (markup):
     
    jeremyhowell, Jan 29, 2011 IP
  11. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #11
    Sorry didn't see your last post. No problem mate, have a good day. :)
     
    jeremyhowell, Jan 29, 2011 IP
  12. jilliani

    jilliani Greenhorn

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #12
    It actually is already there.

    .layout-zone-menu .drop-down-menu-item-hover{background-color:#333333;color:#ffffff;border-right:1px solid #2b2b2b; border-top:none;border-left:none;border-bottom:none}

    Everything is working now. Let me know how to get you paid.

    Thx!
     
    jilliani, Jan 29, 2011 IP
  13. jeremyhowell

    jeremyhowell Member

    Messages:
    379
    Likes Received:
    7
    Best Answers:
    2
    Trophy Points:
    45
    #13
    Just for the record I was referring to the pseudo class :hover. If you had removed menu.js like I had suggested you would need to add this to achieve the hover effect without the jquery? code, but as you have already fixed the problem it is no longer necessary.

    I do not require payment for my help, the DP community has helped me when I needed it and it is only fair I do the same back when I can and I do not expect any sort of payment for it. Im glad I could help. :)
     
    Last edited: Jan 29, 2011
    jeremyhowell, Jan 29, 2011 IP
    Eduard Stinga likes this.
  14. jilliani

    jilliani Greenhorn

    Messages:
    52
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #14
    Thank you so much kind sir! I appreciate your help.

    Brent
     
    jilliani, Jan 30, 2011 IP
  15. deziner.web

    deziner.web Well-Known Member

    Messages:
    220
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #15
    hello brent long time no see. where have you been i have tried to reach you but as you mentioned that your pm is not work. well I hope you will send me your email address by which I will contact you.

    see ya
     
    deziner.web, Jan 31, 2011 IP