Possible CSS / IE issue

Hello,

I’m wrapping up this wordpress site:

http://174.132.169.60/~infertil/

And when my co-worker looks at the site, she see that the social media icons on the upper right seem miss aligned. However when I look at it on my screen on ALL browsers it looks fine. She supplied a screenshot for me.

http://174.132.169.60/~infertil/wp-content/uploads/2012/09/screenshot.png

Still I’m unable to duplicate. She uses IE 8 on an old monitor. I sent it to another developer and they didn’t see it either. My question is does anybody see it the was she does? If so what do I need to change? It’s hard for me to troubleshoot it since I can’t see it. Thanks in advance!

Daniel

Using FF(the latest) and IE8, I see exactly the same thing as is shown in the screenshot. Can you supply a screen of what it is supposed to look like? What is your testing environment… O/S, browser, etc?

Cool. I’m glad to see somebody else sees it. Here is how it looks on my screen.

http://174.132.169.60/~infertil/wp-content/uploads/2012/09/screenshot2.jpg

The font-size in the main menu appears to be rendered smaller on your “newer” monitor than “others”. There is no room allowed for such expansion without pushing the social media buttons down. If you need to know specifically what to adjust, someone else will have to offer that. I’m not sure. :slight_smile:

The problem was solved for those who are wondering… It was the navagation font. Replaced Myriad pro with arial. Thanks Ronpat for checking it out.

You’re very welcome. Glad to help. Thanks for the feedback.

Actually, the problem is not solved. It’s still happening.

I’m using (only when necessary) IE 9, on Windows 7, on an Acer laptop and Intel desktop. The problem still occurs.
If I click the “Compatibility View” button on the IE menu bar the icons are properly aligned.
In the ‘regular’ mode the icons are dropping below the line.
Everything appears okay in Firefox and Chrome - so it is a continuing IE problem.

You could reduce the left margin of the mainmenu to some value less than 238px:


#mainmenu {
    margin-left: [COLOR="#FF0000"]238px[/COLOR];
    padding: 15px 0 0;
}

Or remove the left padding on the unordered list:


#mainmenu ul {
    float: left;
    padding: 0 0 0 [COLOR="#FF0000"]25px[/COLOR];
}

Or reduce the value of the right margin to something less than 70px. That will allow the left edge of the main menu to remain in place.


#social {
    display: block;
    float: right;
    margin-right: [COLOR="#FF0000"]70px[/COLOR];
    position: relative;
}

On the #social div you don’t need to use “float” or “margin” it aligns with the above header links in IE 9 and Chrome without.