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,217
    Mentioned
    457 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.

  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,217
    Mentioned
    457 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

  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,217
    Mentioned
    457 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

  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,217
    Mentioned
    457 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?

  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
  •