12-14-2009, 04:04 AM

Hi,

I have built a website and tested it on all browsers and different versions and al works fine. However when i showed the client there is a display issue as they are using a mac. However as i don't have a mac i can't fix it.

Here is the link: The Love of It

The top nav should be on one line with a equal distance between them (about 5 pixels). It could be my CSS that is wrong as i have used exact spacing, but on a mac the top nav seems to spread over two lines as in the attached image. On safari on the pc it is fine.

Any help greatly appreciated.

12-14-2009, 10:34 AM

Have you tried using the Windows version of Safari?

What specific browser version is the problem happening it?

12-14-2009, 10:46 AM

I checked it with Firefox (3.5.5), Chrome (Beta 4.0.249.30), and Safari(4.04). All of which are the Mac versions.

It looks just fine on Safari. It's all on one line. However on Firefox, and Chrome it's on two lines like the picture you attached. >_<"

12-14-2009, 11:46 AM

Did you plan on having spaces between the nav? if not you can remove the
<code>#nav li {
float:left;
margin-right: 5px;}
</code>

And that fixes your problem. If not you have to change the left-right padding on your a element a little bit.
#nav li a {
background-image:url(../images/header/nav-off.gif);
background-repeat:no-repeat;
color:#FFFFFF;
font-weight:bold;
line-height:39px;
padding:11px 8px;
text-decoration:none;
}

Either of those will fix your problem and shouldn't affect it too much in any of the browsers.

All that is happening is you are breaking that nav element because the elements within are too wide for the space.

I know its weird that its different between browsers. I find little changes in my designs because of margin differences as well.


You might want to look at the content throughout your pages a bit too. Some of the content isn't aligning how you want it to be in firefox on the mac.

12-15-2009, 02:44 AM

Hi all, thanks for all your help so far, i appreciate it.

Just to clarify a few things this happens on the following apparently, but again only on a mac.

Safari 4.0.2 Firefox 2.0.0.14
Resolution: 1680 x 1050

What i want is the top nav to be the complete width of the content-area (854px), with an equal distance between each li element.

This looks fine on a pc but wraps onto 2 lines on a mac. Is there a better way to do the css to overcome this or should i find an OS detect script and right a separate stylesheet for macs?

thanks.

12-18-2009, 08:35 PM

Hi again. Ok i have managed to find a script that detects if you are using a mac and if so calls the mac.css file. (i hope)

Would one of you mind telling me what i need to change the padding on #nav li a to make it fit on one line on macs. Sorry i have since changed the font & size since DrewOlsen told me.

thanks