Wrox Programmer Forums

Need to download code?

View our list of code downloads.

| FAQ | Members List | Calendar | Search | Today's Posts | Mark Forums Read
BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3
This is the forum to discuss the Wrox book Beginning CSS: Cascading Style Sheets for Web Design by Richard York; ISBN: 9780764576423
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 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
 
 
Thread Tools Search this Thread Display Modes
  #1 (permalink)  
Old April 2nd, 2005, 12:15 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default Another chapter 10 question.

On page 336, you have the following Code:
p {
        padding: 0;
        margin: 10px;
        font-size: 40px;
        border: 1px solid red;
    }
    span {
        background: white;

    }
    span.valign {
        font-size: 16px;
        color: white;
        background: steelblue;
        font-weight: bold;
    }
    span#baseline {
        vertical-align: baseline;
    }
    span#text-top {
        vertical-align: top;
    }
    span#middle {
        vertical-align: middle;
    }
    span#text-bottom {
        vertical-align: bottom;
    }

but two of the classes(text-top, text-bottom) were never assigned to a p element. This is the html code:
<p>
    <span>
        Peter Piper picked a peck of
            <span class="valign" id="baseline">pickled</span>
        peppers.
    </span>
</p>
<p>
    <span>
        Peter Piper picked a peck of
            <span class="valign" id="top">pickled</span>
        peppers.
    </span>
</p>
<p>
    <span>
        Peter Piper picked a peck of
            <span class="valign" id="middle">pickled</span>
        peppers.
    </span>
</p>
<p>
    <span>
        Peter Piper picked a peck of
            <span class="valign" id="bottom">pickled</span>
        peppers.
    </span>
</p>

I thought that u probably wanted to know.
But after correcting the CSS part,I wanted to truly see the effect of vertical-align so I put a 1 pixel red boder around the p elements, and the span element that has class top is flushed against the top border but the span element that has class bottom is not completely flushed against the bottom border of the p element. Is there an explanation for this behavior? This just happens on FF, on IE the bottom and top are flushed agains the bottom and top border of the p element.

Also on figure 11-27 the first cell and second cell content are not at the same level eventough both cell had "vertical-align: baseline;", and on the explanation you say:
"..The first two cells are aligned to the baseline"

so how come they dont look like thay are at the same level? Is it because the first cell has so much text that it had to wrap making it expand downward? Because after some time of looking at the picture I realized that the first line of the first cell is aligned with the second cell. Any comment that u might have will be welcome.



Thanks
Christian
__________________
Christian
  #2 (permalink)  
Old April 2nd, 2005, 11:12 AM
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 6 Times in 6 Posts
Default

Hmmm, that's strange. I'm not exactly sure how that happened! My original example file here doesn't even match the one in the book.

Anyway, there is a breif explanation of the text-top and text-bottom properties on page 338.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
                p {
                    margin: 10px;
                    font-size: 40px;
                }
                span {
                    background: lightblue;
                }
                span.valign {
                    font-size: 16px;
                    color: white;
                    background: steelblue;
                    font-weight: bold;
                }
                span#baseline {
                    vertical-align: baseline;
                }
        span#top {
                    vertical-align: top;       
                }
                span#text-top {
                    vertical-align: text-top;       
                }
                span#middle {
                    vertical-align: middle;
                }
                span#text-bottom {
                    vertical-align: text-bottom;
                }
        span#bottom {
                    vertical-align: bottom;
                }
            </style>
        </head>
        <body>
            <p>
                <span>
                    Peter Piper picked a peck of 
                        <span class='valign' id='baseline'>pickled</span> 
                    peppers.
                </span>
            </p>
            <p>
                <span>
                    Did Peter Piper pick a peck of 
                        <span class='valign' id='top'>pickled</span> 
                    peppers?
                </span>
            </p>
            <p>
                <span>
                    Did Peter Piper pick a peck of 
                        <span class='valign' id='text-top'>pickled</span> 
                    peppers?
                </span>
            </p>
            <p>
                <span>
                    If Peter Piper picked a peck of 
                        <span class='valign' id='middle'>pickled</span> 
                    peppers,
                </span>
            </p>
            <p>
                <span>
                    where's the peck of
                        <span class='valign' id='text-bottom'>pickled</span>
                    peppers Peter Piper picked?
                </span>
            </p>
        <p>
                <span>
                    where's the peck of
                        <span class='valign' id='bottom'>pickled</span>
                    peppers Peter Piper picked?
                </span>
            </p>
        </body>
    </html>
The difference between text-top and top and text-bottom and bottom is really subtle on screen. Whereas top is align to the top of the line box, text-top is align with the top of the tallest character on the line, whichever that may be. text-bottom, similarly is aligned with the lowest character.

In IE, it looks to me that they've just made text-top do what top does, and text-bottom do what bottom does. Firefox looks like it actually follows the align with tallest/lowest letter algorithm in the specifications.

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
  #3 (permalink)  
Old April 3rd, 2005, 04:54 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Richard,
Thanks for the example, but if u look at the page produced by the code you provided above, you will see that on IE the middle span actually looks like its in the middle while in FF it doesn't,

I also edited my previous post, but u seem to have answered before I finished adding another question to it, so i am just going to write it here again.
Also on figure 11-27 the first cell and second cell content are not at the same level eventough both cell had "vertical-align: baseline;", and on the explanation you say:
"..The first two cells are aligned to the baseline"

so how come they dont look like thay are at the same level? Is it because the first cell has so much text that it had to wrap making it expand downward? Because after some time of looking at the picture I realized that the first line of the first cell is aligned with the second cell. Any comment that u might have will be welcome.

Thanks

Christian
  #4 (permalink)  
Old April 3rd, 2005, 08:13 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 6 Times in 6 Posts
Default

Quote:
quote:
Thanks for the example, but if u look at the page produced by the code you provided above, you will see that on IE the middle span actually looks like its in the middle while in FF it doesn't,
http://www.w3.org/TR/CSS21/visudet.html#line-height

middle:
    Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.

It looks like it's doing what it is supposed to do, IE is wrong again.

In Figure 11-27, actually they are both aligned to the baseline. The baseline means that the bottom of each letter (excluding letters that drop below the baseline like "y" and "g"), line up. So the bottom of each letter in the first cell line up with the bottom of the big "L" in the second cell.

Sorry I don't have more time to elaborate, I'm working on other projects at the moment and don't have much extra time.

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
  #5 (permalink)  
Old April 3rd, 2005, 09:12 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Thank u for your prompt reponses. The link provided made me see that FF is actually doing the right thing, and that IE like always wasn't. Visually it would seem the other way around though.



Christian
 


Thread Tools Search this Thread
Search this Thread:

Advanced Search
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
Chapter 10 gogeo BOOK: Beginning Access 2003 VBA 1 January 22nd, 2006 09:41 AM
Question on chapter 10 - overriding RobMeade BOOK: Beginning VB.NET 2nd Edition/Beginning VB.NET 2003 4 August 12th, 2004 11:56 AM
Chapter 10 columbiasmiles JSP Basics 0 May 17th, 2004 08:09 PM



All times are GMT -4. The time now is 02:50 AM.


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