SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem styling a nav menu in Mozilla

    I've been trying to tidy up some of the layout quirks in various browsers on www.eastsussex.gov.uk and, unusually, Mozilla has a quirk which I can't seem to find a way around.

    The problem is with the navigation menu on left of every page. The menu is structured as an unordered list, and there should be a 1px white gap between each menu item. I've tried 3 Mozilla variants (Firebird 0.7, Firefox 0.8 and Netscape 7.1) and each one closes the gap between just some of the menu items. Other browsers seem fine.

    Any suggestions are welcome.

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I had a similar problem when using ems for small padding and margins. Changing the .15em to 1px seemed to fix it.
    Code:
    #tMenu ul a:link, #tMenu ul a:visited, #tMenu ul a:hover, #tMenu ul a:active { color: #003163; display: block; width: 100%; margin: 1px 0 1px; padding: 1px 0 0 .3em; font-size: .75em; text-decoration: none; background: #83cde5 url(http://www.eastsussex.gov.uk/eastsus.../corner-tr.gif) no-repeat 100% 0; }
    #tMenu ul a:hover, #tMenu a:link.tCurrentArea, #tMenu a:visited.tCurrentArea { color: #fff; background-color: #09c; }
    #tMenu ul a:active, #tMenu ul a:active.tCurrentArea { color: #fff; background-color: #00337c; }
    #tMenu span { background-image: url(http://www.eastsussex.gov.uk/eastsus.../corner-br.gif); background-repeat: no-repeat; background-position: 100% 100%; padding-bottom: 1px; display: block; }
    (Change the urls back to relative refs in the above code)

    Hope that helps.

    Paul

  3. #3
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul! I'll give it a go on Monday.

  4. #4
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that's a strange one.

    1px didn't work when I tried it with Firefox, although it did fix one out of the three sets of menu items which were misbehaving.

    A bit more experimenting though, and 2.2px does the job nicely. Is there even such a thing as a fifth of a pixel?


Bookmarks

Posting Permissions

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