links don't work in FF

[Negrito]

Hey all, new to this forum !

I have been working with FF lately, as it seems to be on the right track to crush IE. But I also face an issue I just don't understand:

I place a link in a div, and in IE it shows up fine, but not in FF. The image is shown, but not linked. How come ?

This is the div:

<div id="facebook">
<a href="http://www.facebook.com/pages/Ballerinas-Love/366256769502" target="_blank"><img src="images/facebook1.png"></a>
</div>


and the css for that div:

#facebook {float: left; margin: 0 auto; padding: 18px 0 0 50px; width:67px; height:25px;}
#facebook a{display:block; width:67px; height:25px;}

Try to join the Facebook group (left below) in FF: http://www.b-love-d.com

[Schmoopy]

Works fine for me in FF (3.6.2) and should work in any other version.

[jscheuer1]

Other browsers, not just Firefox see it this way, so it's more likely a quirk of IE that it allows it to be clicked. Because it's floated, and/or perhaps for some other reason(s), it's underneath coda-nav-1. Add (highlighted):


#facebook {position: relative; float: left; margin: 0 auto; padding: 18px 0 0 50px; width:67px; height:25px;}

That will get it to stack higher and become clickable.

[Negrito]

Works excellent now !
Thank you so much, Mr John !

[Negrito]

Sorry to ask more abou this, but if I place another icon next to the Facebook one, in the same div, while making the div wider, the added image appears below the Facebook one. How to I get the added image next to Facebook ?


#facebook {position: relative; float: left; margin: 0 auto; padding: 18px 0 0 50px; width:100px; height:25px;}
#facebook a{display:block; width:100px; height:25px;}

[jscheuer1]

There could be other things I'm not seeing, css doesn't happen in a vacuum, if there are other styles that impact this, it won't help. But you could float the a left:


#facebook a{float: left; display:block; width:100px; height:25px;}

Just remember though, since the a tag is wider than the image, you must accommodate the full width of two a tags in the new width for the division.

Alternatively, you could abandon display block for the a tag. It's width and height would no longer apply, but you could make up for that by giving the image either padding or margin, whichever works best for you.