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 Display Modes
  #1 (permalink)  
Old November 21st, 2007, 06:55 AM
Registered User
 
Join Date: Nov 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default chapter 11 figure 11-7 relative positioning

hi, i have two questions:

a)when i apply a percentage value at the top
property of p#relative the p doesn't offset
from the top at all in Firefox but in IE6 it does.

any ideas why this is happening?

b)the percentage value for the top,bottom,right,left properties
is the percentage of the containing block's width or height.
in figure 11-7b if i put the p#relative into a div
and apply top:50%(or any other percentage value) in figure 11-7a, then the offset from top is calculated with respect to the height of the body not the height of the div(IE6).

any ideas why this is happening?
  #2 (permalink)  
Old November 24th, 2007, 05:31 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

> when in figure 11-7a i apply a percentage value at the top
> property of p#relative the p#relative doesn#039;t offset
> from the top at all in Firefox but in IE6 it does.

Since I haven't had much need for the scenario you're describing, professionally speaking, I had to do some digging on the topic.

As stated in the book, the specifications state that an element with relative positioning should be rendered as part of the normal flow of a document. i.e., it should be placed where it would be were no positioning applied. Then relative positioning is applied relative to its original, static position. So the offset properties are applied relative to that position, rather than relative to the element's parent, except for percentage measurement, which is relative to the containing element.

http://www.w3.org/TR/CSS2/visuren.ht...ve-positioning
http://www.w3.org/TR/CSS2/visuren.html#propdef-top

"For relatively positioned boxes, the offsets are with respect to the outer edges of the box itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties"

"For 'top' and 'bottom', if the height of the containing block is not specified explicitly (i.e., it depends on content height), the percentage value is interpreted like 'auto'."

That second blurb explains what you're seeing, and that behavior occurs in Firefox, Safari, and Opera, they all agree. The height of the <body> element, which is the containing block in this example, is not explicitly defined. So, the top (or bottom) property with a percentage measurement is treated like "auto", or for all practical purposes, ignored. IE6 and IE7 are incorrect per the specification since they render the offset when the height is not explicitly defined. But you get the same outcome in IE6 and IE7 when you do specify an explicit height... you see the same rendering in IE as you do in Firefox, Opera, and Safari.

As to *why* the specification defines it that way, well, your guess is as good as mine. I'm sure someone, somewhere had a compelling reason for the limitation.

> the percentage value for the top,bottom,right,left properties
> is the percentage of the containing block#039;s width or height.
> in figure 11-7b if i put the p#relative into a div
> and apply top:50%(or any other percentage value) in figure 11-7a, then > the offset from top is calculated with respect to the height of the
> body not the height of the div(IE6).

If you add a CSS rule for the <div>, and within that the declaration, zoom: 1;, you get the expected result, percentage relative to the <div>. That's needed because this looks like an IE "hasLayout" bug. That topic is covered in my book, though I don't recall where. I didn't exhaustively cover the topic, but it is covered.

For more information see this link:
http://www.satzansatz.de/cssd/onhavinglayout.html

Hope this helps!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design, 2nd Edition
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html
  #3 (permalink)  
Old November 29th, 2007, 05:11 AM
Registered User
 
Join Date: Nov 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi,
first of all i wanna thank you for the post
it helped me a lot!!

when i was experimenting with your suggestions
regarding question b) i found another solution
for the problem(besides zoom:1 that it worked just
fine in IE6,7). if i explicitly set the height for
the div then in IE6,7 the offset is calculated with
respect to the div.

regards,
Pelopito

 


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
Chapter 11 Moorish BOOK: Beginning ASP.NET 3.5 : in C# and VB BOOK ISBN: 978-0-470-18759-3 11 June 4th, 2008 04:57 PM
Chapter 11 mhanson BOOK: Professional VB 2005 ISBN: 0-7645-7536-8 0 July 10th, 2007 08:40 PM
Chapter 11 zaidqais Visual Basic 2005 Basics 0 June 2nd, 2006 04:09 AM
Chapter 11 kappa3 Wrox Book Feedback 0 October 8th, 2003 11:21 AM



All times are GMT -4. The time now is 06:18 PM.


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