SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Drop cap quirk in Firefox

    I'm having a weird drop cap issue in Firefox. These two pages are nearly identical - the only difference is that test1 has an escaped character in the text (amp#8217; to be exact):

    TEST1

    TEST2

    Does anyone know why that would cause the difference in margin/placement on the dropcap?

    This is the CSS I'm using to create the drop cap:
    Code:
    div.body-drop p:first-child:first-letter {float:left; font-size:70px; font-family:'american typewriter', 'courier new', courier, monospace; margin:-20px 5px 0 0; line-height:1; color:#45685e;
    }
    Many thanks.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A CSS validation error for starters...

    Which would also probably explain why Firefox and Opera aren't picking up the background graphics as well.

  3. #3
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply Dan. I had stripped out all the HTML except what I needed for the dropcap, so that's why the bg images weren't appearing. I just reuploaded the files (same links as first post) with EVERYTHING stripped out of both the CSS and HTML except what's needed for the dropcap. They're both valid XHTML and CSS, and I'm getting the same behavior. Bizarre.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adjusting the line-height. It worked here for me (I used 60 pixels, if you're wondering).

  5. #5
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...it's still off, no matter what I set the line-height to. You were able to get it to look the same with and without the #8217;?

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    See for yourself.

    HTML 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>
    		<title>Untitled Document</title>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    		<meta http-equiv="Content-Style-Type" content="text/css" />
    		<meta http-equiv="imagetoolbar" content="no" />
    		<meta name="description" content="A brief description of the current page goes here." />
    		<meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished" />
    		<!-- <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen,projection" /> -->
    		<style type="text/css" media="screen,projection">
    			
    			.first-child:first-letter {
    				background: #EEE;
    				color: #45685E;
    				float: left;
    				font-size: 70px;
    				line-height: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<p class="first-child">
    				Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
    				vulputate velit esse molestie consequat,vel illum dolore eu feugiat nulla facilisis
    				at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
    				delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    				consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    				dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
    				exerci tation ullamcorper suscipit loborti’s a great deal messed up about it?
    			</p>
    			<p>
    				Aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in
    				vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis
    				at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
    				delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet,
    				consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    				dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud
    				exerci tation ullamcorper suscipit lobortis.
    			</p>
    			<p>
    				Eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
    				dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
    				qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
    				facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    				nibh euismod tincidunt ut laoreet.
    			</p>
    		</div>
    	</body>
    </html>

  7. #7
    SitePoint Evangelist asprookie's Avatar
    Join Date
    May 2005
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Get rid of line height

  8. #8
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, all I can think is that it's some weird font-rendering quirk on my computer. Strangely it does it no matter what I set the font to, though The attached screenshots show what I'm getting - test4.jpg has the #8127;. It seems like it's no longer accommodating for the descender area of the letter (or the ascender area when I set it to a lower case y). Truly stumped. Are you using FF 2.0.0.12?

    Thanks for giving it a look Dan.
    Attached Images Attached Images

  9. #9
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just confirmed through browsershots.org that it's not just my computer, and is a rendering bug in Firefox, Camino and Flock (Gecko browsers) on Macs. I filed a bug report at Mozilla.com, but I imagine it's not a high priority...

    Thanks for the help guys.

  10. #10
    SitePoint Evangelist asprookie's Avatar
    Join Date
    May 2005
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use first letter drop caps without line height and it displays well in all browsers

  11. #11
    SitePoint Member
    Join Date
    Sep 2007
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird. You can see what I'm talking about in these screenshots on browsershots, though:

    http://browsershots.org/screenshots/...51622398d316b/
    http://browsershots.org/screenshots/...6f6bb5aea7f36/

  12. #12
    SitePoint Evangelist asprookie's Avatar
    Join Date
    May 2005
    Posts
    539
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From experience I do know that if the paragraph is smaller or almost the same height as the letter height, it doesn't render well, I always make sure the size of the paragraph exceeds that of the letter, I would suggest you drop your first letter size a few pixels and see what happens.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •