Web Analytics Made Easy -
StatCounter inconsistent line-height splitting - CodingForum

Announcement

Collapse
No announcement yet.

inconsistent line-height splitting

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • inconsistent line-height splitting

    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!
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

  • #2
    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?
    Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

    Comment


    • #3
      Sure, here you go: http://xxxxxxxxxx.awardspace.com/bp/
      Last edited by venegal; Feb 25, 2011, 09:26 AM. Reason: url removed
      .My new Javascript tutorial site: http://reallifejs.com/
      .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
      .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

      Comment


      • #4
        Why not just center the background instead of giving pixel values? Try something like this:

        Code:
        li {
        	background-position: left center;
        }
        matt | design | blog

        Comment


        • #5
          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.
          .My new Javascript tutorial site: http://reallifejs.com/
          .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
          .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

          Comment


          • #6
            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:

            Code:
            <!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:

            Code:
            <!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 {
            		[ICODE]/*	font-family:arial, sans-serif;    */[/ICODE]
            			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!
            matt | design | blog

            Comment


            • #7
              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!
              Last edited by venegal; Feb 19, 2011, 03:00 PM. Reason: removed URL
              .My new Javascript tutorial site: http://reallifejs.com/
              .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
              .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

              Comment


              • #8
                Originally posted by venegal View Post
                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.
                Attached Files
                Last edited by venegal; Feb 19, 2011, 03:00 PM. Reason: removed URL
                matt | design | blog

                Comment


                • #9
                  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.
                  .My new Javascript tutorial site: http://reallifejs.com/
                  .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
                  .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

                  Comment

                  Working...
                  X