p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 (http://p2p.wrox.com/forumdisplay.php?f=154)
-   -   Another question on Chapter10 (http://p2p.wrox.com/showthread.php?t=27472)

czambran March 30th, 2005 11:07 AM

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

richard.york March 30th, 2005 11:32 AM

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

czambran March 30th, 2005 12:39 PM

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

richard.york March 30th, 2005 06:40 PM

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

czambran March 30th, 2005 08:29 PM

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

richard.york March 30th, 2005 09:18 PM

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

czambran March 31st, 2005 11:07 AM

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

richard.york March 31st, 2005 11:23 AM

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

czambran March 31st, 2005 11:46 AM

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

richard.york March 31st, 2005 12:28 PM

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


All times are GMT -4. The time now is 04:29 AM.

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