CSS problem

Joined
Dec 14, 2009
Messages
3
Reaction score
0
Points
1
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.

forthelove_tweaks-1.jpg
 
Joined
Dec 10, 2009
Messages
17
Reaction score
0
Points
1
Location
Canton, Ohio
Your Mac's Specs
Various Mac Minis, Mac Mini Servers
Have you tried using the Windows version of Safari?

What specific browser version is the problem happening it?
 

CrimsonRequiem


Retired Staff
Joined
Jul 24, 2008
Messages
6,003
Reaction score
125
Points
63
Your Mac's Specs
MBP 2.3 Ghz 4GB RAM 860 GB SSD, iMac 3.4 GHz Intel Core i7 32GB RAM, Fusion Drive 1TB
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. >_<"
 
Joined
Dec 14, 2009
Messages
1
Reaction score
0
Points
1
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.
 
OP
D
Joined
Dec 14, 2009
Messages
3
Reaction score
0
Points
1
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.
 
OP
D
Joined
Dec 14, 2009
Messages
3
Reaction score
0
Points
1
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
 

Shop Amazon


Shop for your Apple, Mac, iPhone and other computer products on Amazon.
We are a participant in the Amazon Services LLC Associates Program, an affiliate program designed to provide a means for us to earn fees by linking to Amazon and affiliated sites.
Top