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 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 March 30th, 2005, 11:07 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default Another question on Chapter10

If u use the code given for the example on page 274 and apply a border on the body element, on Firefox you will see that that the p element goes out of the body element boundaries. How can this be? When u use:
width: 100%

Isn't that suppose to make the contained element(p element on this case) as big as the containing element(body) but not larger??

Also the margin seems to be applied on the left side of the p element but not on the right side(The right side is flushed against the border of the window).

on IE it works just fine.

Thanks.

Christian
__________________
Christian
  #2 (permalink)  
Old March 30th, 2005, 11:32 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

In IE you're likely to often find things that don't match up with Firefox.

I am assuming you are running this example in quirks mode in IE, IE has a vastly different box model in quirks mode.

Quote:
quote:
If u use the code given for the example on page 274 and apply a border on the body element, on Firefox you will see that that the p element goes out of the body element boundaries. How can this be? When u use:
Ok, remember the box model diagram on page 246...

p {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    background: lightgray;
}

If <p> is 100% of the width of the <body> element, then the width of the <p> element is calculated as follows:

width of <body> + <p> margin + <p> padding + <p> border

This is why you see scrollbars in Firefox. In Firefox it's:
width of <body> + 20px margin (left and right) + 20px padding + 2px border = greater than the width of the body.

In IE you're invoking quirks mode, because you're not providing a standards DTD, and the rules are all different. I prepared all of the book's examples using standards mode in all the browsers I tested. I ignored IE quirks mode primarily because from a statistical standpoint, there is little need to worry about it, the majority of people use IE6, which in standards mode does the same thing that Firefox does (well, in this particular example). In hindsight I think I should have spent more time on it. Involving quirks mode as a factor would have significantly lengthed the book too, it's a kin to doubling the test base of browsers, because all the browsers I tested in have one (with the exception of IE 5.5).

Anyway, in IE quirks mode you'll find that percentage measurements works more like the width: auto; declaration does on block elements, or expand-to-fit. You're also dealing with a different box model, which you see on page 246. IE includes borders and padding in width in its quirks mode box model.

Hope that helps.



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 March 30th, 2005, 12:39 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

I am pretty sure I provided the XHTML Strict DTD but I could be wrong, as soon as I get home I will double check. I think this question would have been answered if I would finish to read chapter10, so I apologize for asking question you answer in the book. I am yet to fully understand the box model.
(*here I go again asking question you probably answer in the book)
I had a second question:
 
Quote:
quote:Also the margin seems to be applied on the left side of the p element but not on the right side(The right side is flushed against the border of the window).


Once I finish chapter10 if I still dont understand why this happens, I hope u dont mind I ask the question again.

Thanks


Christian
  #4 (permalink)  
Old March 30th, 2005, 06:40 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

Can I see the code you're using? Just to make sure we're both on the same page (both figuratively and literally :-)).

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 March 30th, 2005, 08:29 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Here it is:
Code:
<!DOCTYPE html PUBLIC "-/pp/W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html, body{
    border: thin solid red;
}
p {
    width: 100%;
    height: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
    background: lightgray;
}
</style>
</head>
<body>
<p>It is not a bad idea to get in the habit of writing down ones' thoughts. It
saves one having to bother anyone else with them.
    -Isabel Colegate
</p>
</body>
</html>
Christian
  #6 (permalink)  
Old March 30th, 2005, 09:18 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

Ok, makes a little more sense now that I'm actually looking at the example in both browsers. So I'll try to explain again, disregard my last explaination.

In IE you're seeing a bug, which I did talk about in my book, and that bug is it's width property behaves more like the min-width property, it is stretching the <html> and <body> elements to accomodate the <p> element.

In Firefox, I was baffled at first by the lack of a right margin.
With the example you provide here Firefox and Opera agree, at first, then things take a twist when the following modifications are made.

html, body{
    border: thin solid red;
    margin: 20px;
    padding: 0;
}

I've looked at the example in Firefox, Opera and MSIE and now have three different results. Of the three I beleive that Opera is correct, but without consulting the specifications I'm not yet certain of that. That zero padding is added because Opera adds default padding instead of margin on the <body> element.

I also beleive that it is possible that this has something to do with how browsers handle overflowing content, it isn't ignoring the margin on that side, but rather it is off screen lost in the abyss.

I will look into this further and report back with my findings.


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
  #7 (permalink)  
Old March 31st, 2005, 11:07 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Richard here is another one for you:

On page 310, 4th line from the bottom you say:
Therefore, only 20 pixels separate the text of the first paragraph from the bottom of the browser window.

Did u mean to say "top of the browser windows instead of "bottom of the browser window"?

Christian
  #8 (permalink)  
Old March 31st, 2005, 11:23 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

I suppose I was seeing that as "top of the paragraph/bottom of the browser toolbar", but I think you're right, it should say "top border of the viewport", which is a better term than "browser window".

Regarding your question yesterday.
In the scenario where margin is added to the <html> element, and Opera, Firefox and IE all provide different results, Firefox is in fact wrong. I found out that was a bug that has been since fixed and will probably appear in Firefox 1.1. Regarding why there is no right margin, I haven't yet found someone that knows the real answer. Apparenly though, this is what's supposed to happen, as Gecko, KHTML and Opera all agree on it.

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
  #9 (permalink)  
Old March 31st, 2005, 11:46 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Like if I didn't have enough things to worry about, this margin collapse has my head spinning, specially when it involves a floating element.

On page 317, the second paragraph is flushed against the top of the div element that contains the two paragraphs, you explained the reason for this is because the default top of the the margin of the normal paragraph has collapsed and yielded to the top margin of the <div> element. But why is it flushed against the div instead of flushed against the first paragraph, its like the first paragraph ins't part of the flow. could u please explain why?

On you post before last u told me to disregard an explanation you gave on 3 posts before last,
Quote:
quote:If <p> is 100% of the width of the <body> element, then the width of the <p> element is calculated as follows:

width of <body> + <p> margin + <p> padding + <p> border

This is why you see scrollbars in Firefox. In Firefox it's:
width of <body> + 20px margin (left and right) + 20px padding + 2px border = greater than the width of the body.
which made sense or where u referring to the second explanation(the reason behind no right margin). The reason u have to why the p elements overflows the body element made sense but The body element hasn't been given an specific width so shouldnt it expand to accomodate the block element it contains(a p element on this case)?

Thanks for your immense patience


Christian
  #10 (permalink)  
Old March 31st, 2005, 12:28 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

No problem.

I often think of margin-collapsing as an illusive, ghostly effect in CSS. It took me a while to understand it myself, so I can understand the struggle.

Floated elements don't margin-collapse, ever. They also leave the normal flow of the document, well kind-of. They allow box-model properties of other elements to go behind them, so in that sense they leave the flow, but they affect the content of other elements, so in that sense they don't leave the flow.

In Figure 11-9, the "normal" paragraph margin-collapses with the <div> that encloses it, and the <div> in turn margin-collapses with the <body>. The "floated" paragraph does not margin-collapse, because it is floated. It allows the content that follows it to "float" up beside of it, provided there is room. So you're right, it leaves the flow of the document. But it only leaves the flow for everything except the content of the normal paragraph.

Read on, and continue working through the examples, you might get a better feel for how floating works.

Quote:
quote:
which made sense or where u referring to the second explanation(the reason behind no right margin). The reason u have to why the p elements overflows the body element made sense but The body element hasn't been given an specific width so shouldnt it expand to accomodate the block element it contains(a p element on this case)?
Well I meant to disregard it because I misunderstood your original question.

No, the <body> hasn't been given a width, but your understanding of auto width is a little off. Because it is a block element with auto width, it expands horizontally to fill all of the space available to it, no more and no less. I could say that it is like 100% width, but it isn't the same as percentage width, in percentage width the percentage is calculated based on the width of the element's parent, not based on the space available to it. (Sounds like I'm going in circles doesn't it?) The difference is this:

body {
    width: 100%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}


In percentage width, width equals the width of the <html> element. This causes scrollbars, because the margin, padding and borders are added /on/ /top/ /of/ the width of the <html> element.

body {
    width: auto; /* the default value */
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

In auto width, width equals the space left over after margin, padding and borders have been applied, which is why no scroll bars happen when width is auto.

I'm often thinking of two widths when I am talking about CSS too BTW, which is probably pretty confusing. The first width is the one I'm thinking about when I'm laying out a page, it is margins + borders + padding + width property, I lump them in together because all of these must be factored in when defining an element's width. And then the second width is just the width property itself. I forget that I'm talking to beginners sometimes and tend to be cryptic ;).

I think that you're thinking of the "shrink-to-fit" algorithm, where an element expands to accomodate the content inside of it. Tables, floated elements and fixed/absolutely positioned elements use that algorithm.


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
 


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
chapter10: reference not set... JohnBoy BOOK: Beginning VB.NET Databases 2 May 1st, 2006 05:34 AM
Chapter10: Select multiple nemenies sagh BOOK: Beginning PHP5, Apache, and MySQL Web Development ISBN: 978-0-7645-7966-0 1 September 22nd, 2005 04:34 PM
error on Chapter10 yc5x BOOK: Beginning Java 2 2 September 7th, 2004 11:57 AM
chapter10 yc5x BOOK: Beginning Java 2 1 August 28th, 2004 05:21 AM



All times are GMT -4. The time now is 12:17 PM.


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