Difference in text height between browsers

[Surefire Mechanical]

Hello all,

 

I noticed some positioning descrepencies between IE and Firefox with the page I'm working on, and came to realize that it had to do with a slight difference in the text height. Even though the same style sheet was in call, firefox would display the text slightly "taller" than IE would, and if you have enough text on a page this can throw off elements that are positioned etc.

 

My first notion was to switch to using px values for the font-size instead of %, thinking that the browsers are using slightly different styling- and that certainly helped, but I'm starting to realize that there is a slight difference between letter spacing, word spacing etc. coming into play as well.

 

Before I go too nuts changing all those values and trying to find the px values that make everything sit where it was when I was using %, I figured I'd check to see if any one knows of an easy way to standardize this.

 

Hopefully my example http://www.surefireny.com/text_problems.html illustrates the problem. What I see on my end is perfect in IE, but taller, differently spaced text is causing problems in Firefox (this can be seen with the text that is postioined just above the credit card logos on the bottom of the left hand menu bar)

 

There are work-arounds for fixing that text, but this same issue has given me problems when wrapping text around an image as well so I'd like a legit solution to the underlying issue instead.

[davej]

You can style the line-height to an exact number of pixels. For font-size you generally use px, pt or em.

[Surefire Mechanical]

Well the standard was set with a value such as "small," and then everything from there such as <h1> tags would reference the standard as %

I was originally taught not to use px for text because of mobile users etc., but I am starting to think you're right

[dsonesuk]

Different Browsers use different default styling, example: some paragraphs would have equal top and bottom margin, some would place combined margin to bottom.

Now you have reset margin/padding universally to 0, but you have to redefine these to your preferred default setting so browsers will follow your default styling and not there's, because at the moment if you place two paragraphs together they will look as one complete block of text, because there's no margin to show a break from one paragraph to another.

 

example of defining own default styling

*{padding:0;margin:0;}body{font-family:Verdana, Arial, Helvetica, sans-serif; font-size:62.5%;}p {margin:1em 25px;}h1, h2, h3, h4, h5, h6{margin:0.9em 7px;}h1 {padding:0;font-size:2em;}h2 {padding:0;font-size:1.84em;}h3 {padding:0;font-size:1.68em;}h4{padding:0;font-size:1.52em;}h5 {padding:0;font-size:1.36em;}h6 {padding:0; font-size:1.20em;}

[Surefire Mechanical]

Thanks again, Dsones! That much I do understand; I had the * {margin, 0; padding, 0} because I wanted everything to default to a 0 margin, 0 padding (see my other post earlier this week http://w3schools.invisionzone.com/index.php?showtopic=49995&hl= , thanks Davej!). We were talking about difference in text sizes. One thing I didn't follow, though, was why you set each heading tag padding to 0 when * already had {padding; 0}

 

It's a strange phenomenon, but the height of the same font, with the same px font-size value is slightly different between IE and Firefox (taller in Firefox), as is the word spacing, letter spacing, nature of <strong> text etc., ######, even if you look at the outset border I have around the customer testimonials you'll see some pretty obvious differences (annoying BTW!)

 

Very slight differences, but if you have enough text on a page, it is enough to screw up some of your positioned elements and also the way text wraps around floated images (as it can cause the text to break at a different line).

 

What I was looking for was a way to set definite values, because any style sheet (whether external or embedded) should override the browsers' (as it is closer to the content). Is the only way really just to find the px values for each of these properties that make the page look like it did by default in IE?? It just seems like quite a bit of trial and error. Since I am not as experienced as you guys I figured I'd ask in case there was a better way.

Edited April 5, 2014 by Surefire Mechanical