Cross browser font-size issues?

HTML & CSS
1

Anyway, I am trying to create a base-line grid like its done in print ( not a lkayout grid, but essentially I want the baseline of all my text to line up) I read some articles about this and the concept seemed pretty simple.

The problem I am encountering is … well hard to explain. I have reset the body font-size and line-height, still the values which make every line up perfectly in one browser is off or WAY off in another. As if FF thinks that 2 * 2=4.3 but Safari knows it’s 4 and Opera guesses it to be 4.06…???

At this point I dunno if it’s me or the browsers and this is just something that cant be done to that degree of exactitude…

this is the idea:

			*{padding:0;margin:0; font-size: inhherit; line-height: inherit}
			html { min-width: 960px}
			body{ font-size: 12px; line-height: 20px; font-family:arial, helvetica,san-seriff;}
			#page{width:960px; margin:0 auto; }
			.clrf:after{display: block;content: ""; clear: both}
			.col3  { background: url(baseline.gif)  }
			.col{float: left;}
			.col3 .col {width:320px;  }
			.col .block + .block{margin-top:3.4em}
			.block * {position:relative; margin-left:20px;}
			.col p {top:.5em }
			.col  h5 {top:.5em; font-size: 100% ;}
			.col  h4 {line-height: 1.15em; font-size: 150%; top:.2em ; font-weight: normal}
			.col  h3 {line-height: 1.07em; font-size: 170%;  margin-bottom:.8em}
			.col  h2 {line-height: .8; font-size: 200%;  margin-bottom:.1em; top:.1em }
			.col  h2 {line-height: 1.33; font-size: 250%;   margin-bottom:.07em; top:-.3em;}
			.col  h2 {line-height: 1.33; font-size: 250%;   margin-bottom:.1em; top:-.3em;text-transform: uppercase;}
			.col  h1 {line-height: 1.12; font-size: 300%;  text-transform: uppercase; top:-.22em}
			.col h1, .col h2 { font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; text-transform: capitalize;  }



	<div id="page" class="col3 clrf">
		<div class="col">
			<div class="block">
				<h1> This is an H1 tag.  This is the headline for the first </h1>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h2> This is an H2 tag.  This is the headline for the first column </h2>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h2> Another headline for the first column(h2) </h2>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here...Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
		</div>
		<div class="col">
			<div class="block ">
				<h4>Headline for second column, and H4 tag</h4>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block box">
				<h4>Headline for 2nd column! an H4</h4>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h3>Wrap around Headline for Second column!, both Headlines are H3s</h3>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h5>Wrap around Headline for Second column!, both Headlines are H5s</h5>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>

		</div>
		<div class="col">
			<div class="block">
				<h4>Headline for third column, and H4 tag</h4>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h4>Headline for 3rd column! an H4</h4>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h3>Wrap around Headline for Third column</h3>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>
			<div class="block">
				<h5>Wrap around Headline for Second column!, both Headlines are H5s</h5>
				<p> Lorem ipsum... Even more lorem ipsum type stuff More Lorem ipsum goes here... Even more lorem ipsum type stuffLorem ipsum... Even more lorem ipsum type stuff</p>
			</div>

		</div>
	</div>
2

Can you show us a site where this is at? You mgiht want to validate your CSs and HTML because I notice one error in the CSS just by looking at the first line

*{padding:0;margin:0; font-size: inhherit; line-height: inherit}

font-size:inhherit

3

It’s not gonna fly. Font sizes vary on your machine from browser to browser. Think how they will vary on others’ machines.

Web does not equal print, any more than painting oranges red makes them equal apples.

4

But max,
isint that what the reset does:
body{ font-size: 12px; line-height: 20px; font-family:arial, helvetica,san-seriff;}
setting the font/ font size and line spacing to a default numerical value from the start?

5

Ryan,

I have upped 2 versions:
http://raym31.home.comcast.net/~raym31/baseline/ff.html
http://raym31.home.comcast.net/~raym31/baseline/safari.html

One works in FF the other in Safari same HTML , same CSS framework ( but I changed the .col x? values) … And that’s what doesnt make sense, btw… if you change the font with each document it still lines up … so I dont think its the typeface. It seems to me that all these browsers are interpreting measurements differently 2 IS NOT eqaul to 2 from one browser to another… :confused:

but maybe i just have more typos?

OH… keep in mind that the only thing that should seem to always land on blue lines would be the <P> text! :slight_smile:

6

You would think so…

Look at it this way. I buy a pair of Nikes, size 9 1/2, and they don’t fit so good. I buy a pair of New Balances, same size, and they fit like a glove. The size should be a “default,” with every 9 1/2 shoe, be it Puma, Adidas, Fila, or Keds, all the exact same size. But it ain’t. We are a “variance” species, and that applies to the computers we build and the browsers we build for those computers. A Dell Win XP with Chrome just isn’t going to display a 12px font the exact same size a Mac OS will display that font in Safari, at least not to the tolerances you’re requiring.

Someone else who knows more than I do about all this is free to chime in.

7

That is a good analogy Max! That is something that we have all experienced and can relate to. The same goes for different brands of clothing.

Another thing about Mac OS or Win Safari browsers is that they render the font slightly bolder which contributes to what they consider their default font-size & line-height. That is why you can’t rely on side paddings to render a widthless nav button the same width in all browsers. I have seen the last nav button drop down to a new line in Safari many times because it ran out of space. That was from people trying to count characters in order to make their widths work out.

Of course it all blew apart anyway with a zoom! :slight_smile:

8

So the default isn’t even really a default… :slight_smile:

9

I tried the FF link and it came up with the following warning.

http://www.graabr.com/l0SeiH/

.

10

You hit the nail on the head with that sentence. It cannot be done because you have little control over how browsers calculate sizes, nor have you any control how users are setup. Rayzur and Black Max have explained why.

The only solution to your problem is ignoring the problem because it is one that is completely out of your control.

No one other than yourself will have the site displayed the the way you do.

11

Hi,

You have set the body to 12px here:

body {
font-size: 12px;
line-height: 1.67;
font-family:arial, helvetica, san-seriff;
}

Then you go on t define this:


.col h4 {
    line-height: 1.15em;
    [B]font-size: 145&#37;;[/B]
    top:.15em;
    font-weight: normal
}

Now 145% of 12 equals 17.4

Now some browsers may apply 1.15 x 17.4 and some will apply 1.15 x17 as they have rounded the total down to start with. I believe Firefox always tries to maintain an overall picture so that multiple sections aren’t rounded up to more than the whole whereas other browsers simply round up and down each individual piece and reach a different conclusion.

If you were to make the percentages more exact the differences would be less.

e.g.


.col h4 {
    line-height: 1.15em;
  [B]  font-size: 141.7%;[/B]
    top:.15em;
    font-weight: normal
}
.col h3 {
    line-height: 1.04em;
  [B]  font-size: 159%;[/B]
    margin-bottom:1.03em;
    top:.06em
}

Indeed you could use pixel sizes as you have already set the body to 12px so percent based sizes are useless unless you are going to increase the body at a later date and then the inner elements would maintain the relationship to the body of course. If however you are setting the body to 12px forever then you may as well use pixels for font-sizes and get them exact.

There will always likely be a 1px rounding error as the em leading will often have to be split across top and bottom which is why most baseline css works out dimensions that are not uneven in any way.

Kevin discusses baseline css frameworks at the end of his talk here and someone mention an em based baseline was available in the discussion at the end but I wasn’t going to sit through an hour just to find where it was but you are welcome to (Of course I may have misheard anyway ;)).