SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Alignment and browser issue on my menu.

    So when I look at my site on a mac... it looks like below.



    Pc's look like htis.



    I have checked multiple browsers on both systems on multiple machines. And this is the result. On a PC - Firefox, IE, Safari, Chrome. All look fine. On a Mac - Safari, Firefox, Opera all look exactly the same and messed up.... Why cant everything read css the same?1 any help?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    We'll need a live link to be able to help you. Different systems have slightly different renderings, but it shouldn't be hard to account for these differences. It's all about the code, though, which we need to see.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    duh sorry....

    Will Yancey - You can access all the code from there right? ig you have firebug or the developer mode on IE?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Sure, a link is fine. This is what I see on my Mac (attached). It's not perfect, but quite different from what you're seeing.

    I suspect the Mac you were looking at had the font size bumped up a notch.
    Attached Images Attached Images
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah yes it also does that on IE9. But all the other IE's are fine. I have the background color and div layer specified at a certain height. Don't know why all browsers cant see it the same. Never thought about the font size on the specific computer. Is there away to cancel that out or over ride it so it wont let the computer/browser change the size of the text?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by zeeb4 View Post
    Never thought about the font size on the specific computer. Is there away to cancel that out or over ride it so it wont let the computer/browser change the size of the text?
    No, not really, so you have to design with that in mind. I would remove that colored div behind the menu, as it's just asking for trouble. There are better ways to center a menu like that, such as this:

    Centered Inline-Block List Items

    And here is a discussion on the topic:
    http://www.sitepoint.com/forums/css-...nu-690589.html
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the thing is if i remove it and center it, Then the color of the menu wont stretch across the entire wrapper. I'll take a look at these and reply if i am still having issues, thanks!

  8. #8
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Sure, a link is fine. This is what I see on my Mac (attached). It's not perfect, but quite different from what you're seeing.

    I suspect the Mac you were looking at had the font size bumped up a notch.

    I looked at this on the mac I was testing and the font sizes don't affect anything. even when i change them nothing happens to the actual web page.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,097
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    My screen shot above was from my Mac. If you go to View > Zoom > Reset (Firefox) what happens? Or if you click Command - a few times?
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  10. #10
    SitePoint Addict zeeb44's Avatar
    Join Date
    Apr 2011
    Location
    Greenville, SC
    Posts
    202
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it just zoomed out on the entire page but kept how it looks the same (messed up). Have not looked at those links you posted yet. I will in a few and see if they help.

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Try this example:

    Centered Inline-Blocks with Cross Browser Node Fix

    That method will kill whitespace nodes in all browsers without having to use the font-size:0; method or having to tag chain the html.

    It's basically an updated version of the link Ralph posted above.


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
  •