New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

Start a Discussion

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

CSS problem

Post Reply New Thread Subscribe

Thread Tools

Member Since: Dec 14, 2009
Posts: 3
dakey is on a distinguished road

dakey is offline

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.
Attached Images
File Type: jpg forthelove_tweaks-1.jpg (55.1 KB, 9 views)
QUOTE Thanks

Member Since: Dec 10, 2009
Location: Canton, Ohio
Posts: 17
dwright is on a distinguished road
Mac Specs: Various Mac Minis, Mac Mini Servers

dwright is offline
Have you tried using the Windows version of Safari?

What specific browser version is the problem happening it?
QUOTE Thanks

CrimsonRequiem's Avatar
Member Since: Jul 24, 2008
Posts: 6,006
CrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to allCrimsonRequiem is a name known to all
Mac Specs: MBP 2.3 Ghz 4GB RAM 860 GB SSD, iMac 3.4 GHz Intel Core i7 32GB RAM, Fusion Drive 1TB

CrimsonRequiem is offline
I checked it with Firefox (3.5.5), Chrome (Beta, 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. >_<"

QUOTE Thanks

Member Since: Dec 14, 2009
Posts: 1
DrewOlsen is on a distinguished road

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

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 {
padding:11px 8px;

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.
QUOTE Thanks

Member Since: Dec 14, 2009
Posts: 3
dakey is on a distinguished road

dakey is offline
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
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?

QUOTE Thanks

Member Since: Dec 14, 2009
Posts: 3
dakey is on a distinguished road

dakey is offline
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.

QUOTE Thanks

Post Reply New Thread Subscribe

« iWeb Font question | Can I import a theme into iWeb? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread Starter
Last Post
Problem With Keyboard...... mmcltd OS X - Operating System 4 02-02-2010 06:47 PM
Possible faulty CPU thermometer, common problem? dyaballikl Apple Notebooks 6 11-16-2008 12:21 AM
Microsoft Messenger Problem millenium_spike OS X - Apps and Games 4 09-16-2008 01:11 AM
Problem Darwin Server + VLC nanaki Web Design and Hosting 0 03-13-2008 07:27 AM
Problem with ethernet board after installing RAM and upgrading from 10.2.8 to 10.3.5 ydonofrio Apple Desktops 4 02-11-2008 07:16 PM

All times are GMT -4. The time now is 09:41 AM.

Powered by vBulletin
Copyright ©2000 - 2015, Jelsoft Enterprises Ltd.

Welcome to

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!

(4 digit year)

Already a member?