Line-height problem in Firefox, Safari, Chrome

I've been using line-height to adjust my <li> through CSS. Currently, trying to do some cross-browser testing and found out that Safari & Chrome (webkit-based browsers) having different line-height. I'm unsure if it's because of their rendering of fonts or their spacing between them, but a specified line-height on Firefox will have different line-height on Safari & Chrome.

Do you guys have any better work arounds? I've tried margin-top, margin-bottom, padding and it won't work.

I'm currently using @media queries to detect Webkit based browsers and applied it based on conditions. Is there a more professional way of solving the issue or even a better conditional tags I should be using instead?

PS: I haven't even tested on IE yet, I can't imagine the nightmare... Why can't all the browsers consolidate and form one big browser (greed from corporations) Hais...

 

You may have an inheritance issue, though Firefox rounds off fractions differently so it will indeed give you inconsistent line-heights if you aren't declaring them in a fixed metric (px) -- though if the line-height changing is an issue for your layout, then there's something wrong with how you are building the page. I say this because you should have a dynamic layout with auto-adjusting fonts. The only way what you describe should be an issue is if you are fixing the heights of the elements, which on the whole is just plain bad design.

... and throwing browser specific code like media queries at it to 'work around' such issues is just throwing bad code after good.

Something a LOT of people making websites don't want to hear -- but these days if you are having cross-browser design problems, it's typically from broken methodology on your end, not the browsers themselves. Be it jumping the gun on that idiotic bloated train wreck known as HTML 5, to drawing pretty pictures of a 'website' before you even have semantic markup of content and a layout built with CSS, to design elements that flat out aren't real world deployable.

Without seeing the page in question it is impossible for anyone here to tell you more... though you've not posted enough to add a URL, that's really what we need to try and help you.

 

Hey, thanks for the reply!! I couldn't throw a live site now...

I understand about building dynamic layout (my layout is actually liquid) as well as using correct semantic markup but sadly sometimes you just can't control things. That's the main reason why I'm asking a work-around.

The design of the website is not by me, I was merely just tasked to code the site and as far as I can tell you I hate doing web design from Print Designers. Some of them can't seems to know the boundaries and architecture behind web design. And they just create on what they feel will look like on their own screen, without knowledge of their target's audience browser's information or the little fine details of performance, etc.

And regarding about the line-height, yes I can tell you I shook my head when I saw the design too but I guess it cant be done.

Im adjusting my navigation's <li> line-height.

And this navigation sits inside my footer. (yes my footer! And this footer have images that change on every page, and yes I have to change the positioning of my navigation because the navigation is suppose to follow this background in different places on different pages)

I'll throw the site live asap so ppl can help me