SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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-c...creenshot2.jpg

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2010
    Posts
    59
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You're very welcome. Glad to help. Thanks for the feedback.

  7. #7
    SitePoint Enthusiast
    Join Date
    Sep 2012
    Location
    Northern New Brunswick, Atlantic Canada
    Posts
    44
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,535
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    You could reduce the left margin of the mainmenu to some value less than 238px:

    Code:
    #mainmenu {
        margin-left: 238px;
        padding: 15px 0 0;
    }
    Or remove the left padding on the unordered list:

    Code:
    #mainmenu ul {
        float: left;
        padding: 0 0 0 25px;
    }
    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.

    Code:
    #social {
        display: block;
        float: right;
        margin-right: 70px;
        position: relative;
    }

  9. #9
    . shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    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.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.



Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •