IE and Firefox/Safari block text spacing differences

[ThetaWaveRider]

Hello,

I currently have a label element that contains text (as it normally does). In IE7, there is too much space between the label's text and the top of the label compared to the same label/text in Firefox and Safari. This is a problem for me, since I need the text to be equally distant from the top of the label's parent element in all of these browsers.


Here is the CSS for the label:

#comment_info label {
	font-size: 9px;
	height: 9px;
	padding: 0;
	border: 1px solid red;
}

I set the height to make the difference more obvious between IE7 and Firefox 2.0. Any ideas?

IE 7


Firefox 2


Thanks,
TWR


p.s. Sorry about the wacky sizes. I had my Mac screen zoomed when I took one of them

[ThetaWaveRider]

Screenshots are now attached (see above)...

[Ian R. Gordon]

It varies from each of the respective browsers rendering engines, the only way to get them "exactly" the same would be to use "px" but, even then you would still have to do with margin and padding issues and problems among the browsers.

[Paul O'B]

I set the height to make the difference more obvious between IE7 and Firefox 2.0. Any ideas?

We would need to see an example. Setting a height on a label makes no difference unless you have set it to display:block somewhere as a label is an inline element and dimensions don't apply.

You could try setting the line height to the height you want the line to be and the text should automatically be aligned to the middle of the line-height by default.

[ThetaWaveRider]

Oops, I forgot to include the style stating that the label is a block element. It always was, just to be clear.

The line-height idea sounds promising. I'll post my results once I try it.

Thanks,
TWR