CSS Problem - $25 By Paypal For First Person That Gives Correct Fix

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.



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



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

 

It is inside the unordered list, class drop-down-menu. Take it out of that and that should solve your problem.

 

Woops sorry, Remove the class from the <a> tag "drop-down-menu-item". That will fix it.

 

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;}

 

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):

 

That took care of the border on the right side, but there is still a problem with the margins.

 

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.

 

<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.

 

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.

 

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):

 

Sorry didn't see your last post. No problem mate, have a good day.

 

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!

 

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.

 

Thank you so much kind sir! I appreciate your help.

Brent

 

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