Positioning different in Firefox than in Safari and Chrome

[thomasfrank09]

He everyone,

I designed my personal site (thomasjfrank.com) and tested it on Chrome when I was building it. It looks fine in that browser, in IE, and in Safari. However, in Firefox there are some positioning issues, and the image map of social networking icons doesn't work at all. How would I fix these issues?

[Paul O'B]

Hi,

The image map isn't working because you missed the hash from the usemap attaribute.

<img src="http://www.thomasjfrank.com/icons.png" alt="Social network links" usemap="#socialNetworks" style="border-style: none;" />

I'm not sure why you used a map for that as those icons could have been in a list in normal anchors anyway

You'll have to be more explicit with your other problems and identify exactly which elements are mis-positioned because on first look I couldn't see immediately what was different between browsers. It's difficult when looking at a page for the first time to spot if something is awry unless its blatantly obvious

[ralph.m]

The main position issue I see in Firefox is with the #resumeProfile div. The negative top margin on the last inner div is causing problems, and is unnecessary. Instead of all that relative positioning of elements, it might be better to adjust the margins on the elements inside that box. The default margins on the p and ul are messing you around.

[donboe]

I don't think you only have an issue in FF. In Opera the thumbnails for the portfolio are all over the place