Achieving consistent line-height between browsers.

Discussion in 'Web Design and Development' started by 124151155, Jan 29, 2010.

  1. 124151155 macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #1
    Hi,
    I've found that safari has a much smaller line-height for unordered lists than firefox does... and therefore when the line-height in the css is increased, say to line-height:22px; Firefox will have much larger gaps and safari will have small ones.

    I was hoping somebody may have a solution to get around this. Can I use a spacer gif or something between each list item?
    Only constraint is that I am working on a template for a Joomla! CMS website, so the actual code for the unordered list is called for with a php command... so I can't directly edit the list, so I guess the solution I proposed above would not work.

    Cheers.

    Tim.
     
  2. Makosuke macrumors 603

    Joined:
    Aug 15, 2001
    Location:
    The Cool Part of CA, USA
    #2
    If you set line-height in em instead of px, you should get pretty consistent behavior across browsers, assuming that the spacing weirdness isn't coming from something else. There's an ALA article with lots of detail on various techniques.

    That said, if it's just lists, are you sure it's not something other than line-height causing the different spacing? I've never noticed any significant difference in the behavior of Safari and Firefox, in lists or otherwise, regardless of how I set line height. For that matter even IE isn't that far off unless you get the "extra line of whitespace" behavior in lists.

    Maybe you've got something that Safari is reading as another line of content but Firefox isn't?
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    Getting rid of the small things can be pain when you need to, but using a CSS reset is generally a good solution.
     
  4. 124151155 thread starter macrumors regular

    124151155

    Joined:
    Jan 9, 2008
    #4
    Hmm, well the line height is the only difference I have seen between safari and firefox except I have some menu items set to be underlined on hover which only seems to work in safari, firefox and opera both do not do anything.
    Also, opera garbles up the menus and puts them in odd places.
    See screenshot:
    [​IMG]
     
  5. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #5
    Looks like it could potentially be a floating issue. Not going to be able to give much advice without seeing code though.
     

Share This Page