Example_3-8.html and css. figure 3-36

webmamma5000 · February 19th, 2009, 08:10 AM

Hi I have loved doing all the examples in the book. However there's one little thing which I can't figure out and it's driving me crazy.
In the first letter pseudo-classes example, the "Y" is completely surrounded by the blue background with room to spare.

In my two previews of the exercise, one in Mozilla and the other in IE7, the blue background was cut off.

A picture is worth a thousand words, so please check image grab of the links:
http://www.womensenews.org/images/te...lla%20grab.gif
http://www.womensenews.org/images/temp/IE 7 Grab.gif

I looked for other text properties, played with the paragraph sizing but nothing worked. It doesn't look like the pretty picture.
Here's the Example_3-8.css, copied from the book:

Code:

@charset "utf-8";
/* CSS Document */
body {width: 60%;}
p    {
    color: darkblue;
    border: 1px solid lightblue;
    padding: 2px;
    font: 14px sans-serif;
    }
p.quote:first-letter    {
    background:darkblue;
    color: white;
    font: 55pt "Monotype Corsiva";
    float: left;
    margin-right: 5px;
    }
p.quote:first-line    {
    font-weight: bold;
    letter-spacing: 3px;
    }
p.byline    {
    text-align:right;
    font-style:italic;
    font-size:10px;
    border:none;
    }

Here's the Example_3-8.html file

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pseudo-Element Selectors</title>
<link rel="stylesheet" type="text/css" href="Example_3-8.css" />
</head>

<body>
<p class="quote">
    You see, wire telegraph is a kind of very, very long cat.
    You pull his tail in New York and his head is meowing in
    Los Angeles. Do you understand this? And radio operates exactly
    the same way: you send signals here, and they receive them there.
    The only difference is that there is no cat.
    </p>
    <p class="byline">- Albert Einstien</p>
</body>
</html>

Any ideas?
thanks!

philip_cole · February 22nd, 2009, 09:06 AM

Hi Webmamma,

A lot of this, amazingly

, has to do with IE7 and elements no "having Layout". If IE doesn't think an element has layout, it often likes to completely screw up the rendering of elements inside it.
A good explanation of it can be found at http://www.satzansatz.de/cssd/onhavinglayout

This is why your IE7 shot looks a lot worse than Firefox, so the first thing to do is make them the same. A fairly standards-compliant way of doing this is to add "min-width:1px;" to the p css to give it layout.
I also noticed that Firefox seems to lose the letter-spacing from the first-line bit when handling the first-letter, while IE doesn't, so I added "letter-spacing:3px;" to first-letter.

These should make the two browsers look pretty much the same, but the background is still not quite right. I think this has a lot to do with the font, as it is an italic font. If you change to something like Arial, it fits a lot better. Make it Arial and italic, and you start having problems again.

To sort this, I added padding-right:11pt; to the first-letter. This seemed a good balance between a wide letter like Y having the background finish quite close, and a narrow letter like I having it finish further away. If you change the font, you would probably need to test and adjust this value.

The final css then becomes

Code:

@charset "utf-8";
/* CSS Document */
body {width: 60%;}
p    {
    color: darkblue;
    border: 1px solid lightblue;
    padding: 2px;
    font: 14px sans-serif;
    min-width:1px; /* NEW! - fixes IE7 layout */
    }
p.quote:first-letter    {
    background:darkblue;
    color: white;
    font: 55pt "Monotype Corsiva";
    float: left;
    margin-right: 5px;
    letter-spacing:3px; /* NEW! - brings FF in line wih IE */
    padding-right:11pt; /* NEW! - accounts for italic letters */
    }
p.quote:first-line    {
    font-weight: bold;
    letter-spacing: 3px;
    }
p.byline    {
    text-align:right;
    font-style:italic;
    font-size:10px;
    border:none;
    }

You can find more information on the first-letter class which may help you here:
http://www.satzansatz.de/cssd/pseudo...l#first-letter

Hope this helps
Phil

webmamma5000 · February 25th, 2009, 10:41 AM

You just never know when you'll run into a bug. Curiously enough I was just reading about this in a book called CSS Hacks and Filters: Making Cascading Stylesheets Work by Joseph W. Lower. I hadn't really been paying attention thinking "no layout" couldn't happen to me. Hmph!

Thanks so much it is wonderful to be able to ask questions in this forum. I really enjoy the wrox series very much!

Regards,
Webmamma5000

richard.york · February 26th, 2009, 06:08 PM

The best way to trigger layout, IMHO, is to use zoom: 1, which is the most non-invasive since that is a property that only IE understands, and it's also supported by IE6, which doesn't understand min-width in that context.