Forum Moderators: not2easy
Using the css shorthand for line spacing, in my font class. ex: font:bold 12px/10px arial;
The line spacing displays correct in mozilla, but looks way to big in IE - For me to get it to look the way it does in mozilla, i have to set it to 12px/2px - And of course in mozilla that is way to small, but IE renders it as if it was 12/10 or so.
Any idea why? I've never had this issue before.
Once again, any help is much appreciated!
The size part of the shorthand font property goes...
font-size/line-height
...Note it is line-height not line spacing. When you set these values to 12px/10px, you're actually telling the browser to use a 12px font and a minimum 10px line-height. Mozilla presumably sees that the font is bigger than the line-height and simply makes the line-height large enough to hold the font, plus any margins and padding involved.
IE may not be handling this correctly, though, and it sounds like it might not be recognizing the 'length' value you've given for line-height (in PX) and is instead interpretting it as a 'number' value (which is a multiplier of the font-size, see [w3.org...] for details). If so, IE would be giving you a line-height somewhere around 10 times the height of the font...way to big. That '2px' does the trick -- which if interpretted as a 'number' value would be twice the size of the font, split between top and bottom -- reinforces this conclusion.
My suggestion? Don't define the line-height with a 'length' (i.e., PX) value but instead use a 'number' value (1.5 for one and a half times the font size) in the CSS. Both browsers ought to interpret this the same.
The line height changes but they still don't display uniform. Any other ideas?
p {
margin:0;
}
