Another chapter 10 question.

czambran · April 2nd, 2005, 12:15 AM

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:

 
 Peter Piper picked a peck of
 pickled
 peppers.
 


 
 Peter Piper picked a peck of
 pickled
 peppers.
 


 
 Peter Piper picked a peck of
 pickled
 peppers.
 


 
 Peter Piper picked a peck of
 pickled
 peppers.
 


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

richard.york · April 2nd, 2005, 11:12 AM

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

czambran · April 3rd, 2005, 04:54 PM

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

richard.york · April 3rd, 2005, 08:13 PM

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

czambran · April 3rd, 2005, 09:12 PM

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