Achieving consistent line-height between browsers.

[124151155]

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.

 

[Makosuke]

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?

 

[angelwatt]

Getting rid of the small things can be pain when you need to, but using a CSS reset is generally a good solution.

 

[124151155]

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:

 

[angelwatt]

Looks like it could potentially be a floating issue. Not going to be able to give much advice without seeing code though.