Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Register | FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design, 2nd Edition by Richard York; ISBN: 9780470096970
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK Beginning CSS: Cascading Style Sheets for Web Design, 2nd Ed; ISBN: 978-0-470-09697-0 section of the Wrox Programmer to Programmer discussions. This is a community of tens of thousands of software programmers and website developers including Wrox book authors and readers. As a guest, you can read any forum posting. By joining today you can post your own programming questions, respond to other developersí questions, and eliminate the ads that are displayed to guests. Registration is fast, simple and absolutely free .
DRM-free e-books 300x50
Reply
 
Thread Tools Display Modes
  #1 (permalink)  
Old February 19th, 2009, 07:10 AM
Registered User
 
Join Date: Feb 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Default Example_3-8.html and css. figure 3-36

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!
Reply With Quote
  #2 (permalink)  
Old February 22nd, 2009, 08:06 AM
Friend of Wrox
Points: 894, Level: 11
Points: 894, Level: 11 Points: 894, Level: 11 Points: 894, Level: 11
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Sep 2005
Location: London, , United Kingdom.
Posts: 166
Thanks: 2
Thanked 33 Times in 33 Posts
Default

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
Reply With Quote
  #3 (permalink)  
Old February 25th, 2009, 09:41 AM
Registered User
 
Join Date: Feb 2009
Posts: 2
Thanks: 0
Thanked 0 Times in 0 Posts
Smile Thanks! That looks much better!

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

Last edited by webmamma5000; February 25th, 2009 at 09:41 AM. Reason: correct my name
Reply With Quote
  #4 (permalink)  
Old February 26th, 2009, 05:08 PM
richard.york's Avatar
Wrox Author
Points: 5,506, Level: 31
Points: 5,506, Level: 31 Points: 5,506, Level: 31 Points: 5,506, Level: 31
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Camby, IN, USA.
Posts: 1,706
Thanks: 0
Thanked 5 Times in 5 Posts
Default

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.
Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are Off
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Easy Html CSS question bekim All Other Wrox Books 3 August 24th, 2009 02:41 AM
Css/Html for side frame js_newbie CSS Cascading Style Sheets 5 March 7th, 2007 10:04 PM
can't save html /css website !! ca123 CSS Cascading Style Sheets 2 November 15th, 2004 06:29 PM
New HTML, XHTML, and CSS book jminatel HTML Code Clinic 0 July 30th, 2004 04:41 PM
Sending a CSS formatted HTML mail madhukp Classic ASP Basics 4 June 17th, 2004 11:30 PM



All times are GMT -4. The time now is 11:45 AM.


Powered by vBulletin® Version 3.7.0
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
© 2013 John Wiley & Sons, Inc.