Question

I’m sure this is something simple but I am just not seeing it.
My wrapper DIV is floating left and the A tags within are displaying correctly but mousing over them you’ll see that they are not the proper height/width.

I can’t seem to get them in line, could someone take a quick look and tell me what I am missing?

Page is here, it’s the social media icons

Any help is greatly appreciated, again I am sure it’s something simple.

–Edit–

I am on a Mac, tested with firefox and safari so far, they don’t hover correctly, only the very bottom portion of them actually function as a button.

In firebug, if I remove the wrappers float attribute, the links hover as they should. So I know it has something to do with the float.

Answer 1

On Chrome the icons are in a line but, as you said, only the bottom portion of them is active. The problem is that your #branding element extends down below the bottom of #main, partially obscuring #subWrapper, #sub, #left, and part of #right (though not enough to cause a problem there).

You could put overflow: hidden on #main, but then the graphic in #branding would get cut off at the bottom. (The graphics look very nice, BTW.) I think if you just add a positive z-index to either #sub or #subWrapper, such as z-index: 1, that should do the trick.