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?

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.

duh sorry…

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

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.

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?

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:

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!

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.

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?

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.

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.