PDA

View Full Version : inconsistent line-height splitting



venegal
Apr 15th, 2009, 01:08 PM
While trying to use custom bullet points via a positioned background-image (since list-style-image has cross-browser alignment issues) I stumbled upon the following problem:

FF and IE rendered the bullet point where I intended it to be, Safari and Opera rendered it one pixel too low.

I found out that the reason for that behavior was that with a font size of 12px and a line-height of 20px, the 8px leading where distributed differently above and beyond the letters in different browsers. FF and IE put one more pixel of the leading above the letters than the other two browsers. That does not change the overall line-height, but it puts the whole text off 1px.

In order to confirm those findings, I tried the same thing with a font size of 12px and a line height of 12px. That's where the strange stuff started to happen:

FF and Safari behaved consistent with the former case: FF had 2px between the top of the box and the top of capital letters (which caused letters like "p" and "g" to bleed through the bottom of the box), Safari 1px (keeping "p" and "g" inside the box);

Confusingly IE and Opera switched their roles: Opera now suddenly behaved like FF, IE like Safari, making it practically impossible to circumvent those discrepancies by serving different CSS to different browsers.

Can anyone shed some light on that strange behavior and/or steer me in the right direction regarding my original problem (the bullet point alignment)?

Thanks!

abduraooft
Apr 15th, 2009, 01:32 PM
Can anyone shed some light on that strange behavior and/or steer me in the right direction regarding my original problem (the bullet point alignment)? Can we have as link?

venegal
Apr 15th, 2009, 01:54 PM
Sure, here you go: http://xxxxxxxxxx.awardspace.com/bp/

BoldUlysses
Apr 15th, 2009, 02:24 PM
Why not just center the background instead of giving pixel values? Try something like this:


li {
background-position: left center;
}

venegal
Apr 15th, 2009, 02:38 PM
The reason I'm not centering is that it wouldn't work for multi-lined list items. I want the bullet point to consistently be centered regarding only the first line of a list item.

BoldUlysses
Apr 15th, 2009, 03:23 PM
I've run into similar problems, not with bullet points, but with the vertical alignment of particular fonts. Maybe it's font-related in your case as well?

My experience was that Safari and FF rendered Helvetica with different top spacing, which sounds an awful lot like your issue.

My solution was to include a hidden "tricker" span that provided the spacing from a font which I knew both browsers rendered the same (in this case, Arial).

Check it out. Open this page in both Safari and FF:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

body {
font-family: helvetica, arial, sans-serif;
}

#wrap {
position:absolute;
top:10px;
left:10px;
width:200px;
font-size:0.8em;
height:50px;
padding:10px;
background:#ddd;
}

#tricker {
font-family:arial, sans-serif;
visibility:hidden;
}

#test_line {
position:absolute;
top:21px;
left:0px;
height:1px;
width:100%;
background:#f00;
}

</style>

</head>

<body>

<div id="wrap">

<p><span id="tricker"></span>Test text goes here.</p>

<div id="test_line"></div>

</div>

</body>
</html>

Looks the same, right? Now comment out the #tricker font style:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Untitled</title>

<style type="text/css">

* {
padding:0;
margin:0;
}

body {
font-family: helvetica, arial, sans-serif;
}

#wrap {
position:absolute;
top:10px;
left:10px;
width:200px;
font-size:0.8em;
height:50px;
padding:10px;
background:#ddd;
}

#tricker {
/* font-family:arial, sans-serif; */
visibility:hidden;
}

#test_line {
position:absolute;
top:21px;
left:0px;
height:1px;
width:100%;
background:#f00;
}

</style>

</head>

<body>

<div id="wrap">

<p><span id="tricker"></span>Test text goes here.</p>

<div id="test_line"></div>

</div>

</body>
</html>

Reload and notice how the text moves a pixel up in FF? Uncomment the style and watch it move down again.

Hope that helps!

venegal
Apr 15th, 2009, 04:14 PM
Exactly, it's a font issue, with the top spacing being the culprit. If Arial were rendered the same in different browsers, I would not have a problem though, because I'm using Arial on my site. The two examples you provide look exactly the same in my FF (3.0.8, WIN). For that matter, for me the two versions look the same in all my browsers (FF, IE7, Op9.63, Sa3.1.2, all WIN) with Safari being the only one where the text is 1px higher up, so that the red line does not cut all the letters.

Besides I don't like putting style stuff into my HTML very much, and especially putting a styling span into each and every text element is just not feasible.

Could you do me a favour and view ***** in different browsers and tell me what you see? I get 4 different results in FF, IE, Safari and Opera (the FF one being the intended one with the top of the bullet "-" lining up with the top of the middle stroke of the "F")?

Thanks!

BoldUlysses
Apr 15th, 2009, 04:31 PM
Besides I don't like putting style stuff into my HTML very much, and especially putting a styling span into each and every text element is just not feasible.

I don't either, and I can definitely see how that would get tiresome. In my case it was only critical in one or two isolated elements.


Could you do me a favour and view ***** in different browsers and tell me what you see?

Can't do IE here on the Mac at work, but here's Safari 3.2, FF3 and Opera 9.26.

venegal
Apr 15th, 2009, 04:44 PM
Thanks for that!

Now, that's interesting. All three of them are rendering the same on a Mac, and completely differently on windows, which makes serving different CSS even more complicated, even if I knew how exactly rendering text worked in every setup.

I guess I will just have to find out what my client uses, write for that setup and call it a day.