Results 1 to 6 of 6

Thread: CSS problem

  1. #1

    Member Since
    Dec 14, 2009
    Question CSS problem

    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 Attached Images

  2. #2

    Member Since
    Dec 10, 2009
    Canton, Ohio
    Various Mac Minis, Mac Mini Servers
    Have you tried using the Windows version of Safari?

    What specific browser version is the problem happening it?

  3. #3

    CrimsonRequiem's Avatar
    Member Since
    Jul 24, 2008
    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, 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. >_<"

  4. #4

    Member Since
    Dec 14, 2009
    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.

  5. #5

    Member Since
    Dec 14, 2009
    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?


  6. #6

    Member Since
    Dec 14, 2009
    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.


Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. I need a little help with some CSS
    By benparko in forum Web Design and Hosting
    Replies: 8
    Last Post: 09-30-2010, 04:31 PM
  2. menu css problem with dreamweaver
    By golfgirl in forum Web Design and Hosting
    Replies: 2
    Last Post: 03-20-2007, 08:23 PM
  3. HTML/CSS Design Problem
    By iWhat in forum Web Design and Hosting
    Replies: 3
    Last Post: 07-10-2005, 03:06 PM
  4. CSS
    By muso in forum Web Design and Hosting
    Replies: 4
    Last Post: 09-21-2003, 09:02 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts