Vertical Spacing - IE vs FireFox!

[dai.hop]

Hi all,

This ones really bugging me. www.outlookimages.co.uk looks great in FireFox and Safari but the spacing is horrible in IE!

I've tried tinkering around with the line-spacing part of my style sheet (http://www.outlookimages.co.uk/css/v5.css) but I can't nail down whats going wrong and where to fix it!

Could someone please tell me why the spacing is so different, and if possible make a suggestion for how to make the IE version look like the FF one?!

Many Thanks,

dai.hop

[WebJoel]

I'm not so much seeing a 'line-height' difference here (there is no 'line-spacing' in CSS I beleive.. there IS 'letter-spacing' though..), but in Firefox, some fairly major images are not being shown that show-up (probably incorrectly) in IE. There are numerous nesting errors in this code that need to be fixed first, before the actual problem can be addressed.. see screenshot image.

IE adds proprietary padding & margins, to everything. Use the "universal selector" to remove margin & padding from everything:

* {margin:0; padding:0;}

This should be your FIRST css statement. It will remove margin/padding from html, body, div, table, form, p, img, etc etc etc. and you will probably have to re-state the defaults implicitly (because they will now be "zero"), but this DOES make all browsers view these elements in the same way.

[dai.hop]

Cheers WebJoel, thats what I get for letting Dreamweaver write my code eh? :) Still though - these alerts don't appear to be show stoppers as far as page rendering is concerned.

...and sorry I just noticed I said line-spacing when I meant line-height!

[WebJoel]

Yes, -I viewed that in your code before I wrote: just wanted to make sure that we're not feeding 'bad syntax ideas' to anyone whom reads this post. :)

[dai.hop]

anyone else have any ideas?

[Centauri]

these alerts don't appear to be show stoppers as far as page rendering is concerned.

Nesting block elements inside inline elements certainly can be ......

[WebJoel]

This (see attached photo) may be a direct result of 'improperly-nested' elements. Note that IE incorrectly shows what you wanted to show, while Firefox correctly shows what you wrote (and more-than-likely, this is also how Mozilla, Opera, Safari, Konqueror, Galleon, Netscape etc etc also sees...).

IE is pretty lame. Really. :(

[coffee_freak]

I was running into a similar issue where I had a <div> above my content and a <div> below my content. I styled these <div> tags to be 2px high with a background color (to mimic a bar). Turns out in FF and Safari it's exactly what I want. In IE it's crap! :eek: The two <div> tags had a height equivalent to the font height. So I added font-size:2px; to my style class and that solved it! :p

Hope that helps.