Wrox Programmer Forums
| Search | Today's Posts | Mark Forums Read
BOOK: CSS Instant Results
This is the forum to discuss the Wrox book CSS Instant Results by Richard York; ISBN: 9780471751267
Welcome to the p2p.wrox.com Forums.

You are currently viewing the BOOK: CSS Instant Results section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old June 29th, 2006, 12:26 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default How did u know?

Richard,

On page 10 you say the following:
 
Quote:
quote:
Quote:
The next declarations sets a fixed height for each tab. This provides consistency between <li> height and[list] height, though it isn't absolutely necessary. The height could be removed and the top: 1px; could be changed to top: 4px; ....
The declaration the paragraph above is referring to is :
 
Quote:
quote:height: 23px;


How did you know you needed to displace the li elements 3 more pixels if you removed the fixed height?

Thanks

Christian
__________________
Christian
  #2 (permalink)  
Old June 29th, 2006, 09:45 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

Good question... had to actually give it some thought. :)

Ok, you've got the[list] element, it has a 25px height, the <li> element has a 23px height, 2px of border, and is offset from the top 1 pixel, for a total of 26px, 1px of the <li> element will overlap with the bottom border of the[list] element. I assume you already understood that, but /I/ had to think it through again. :-).

When you take away the height, you have a situation where the <li> element will expand and contract vertically to accomodate the content inside of it, this is known as shrink-to-fit sizing. So basically, the height changes, it is now calculated using line-height, and the font-size of it's contents, aka the inline box model. The font-size is set to 14 pixels, and the default line height appears to be 16 pixels, I found this out by adding the line-height property to the <span> element, and adjusting the length until it matched the output when there was no line-height applied. So, take that 16px, 4px of top padding from the <span> element, 2px of border, and 4px offset from the top, and you get 26px, the same number that you had with the explicit height set.

Honestly, I don't usually put that much thought into laying something out when I'm actually putting a stylesheet together. I just experiment with the lengths until it looks right, test in various browsers, rinse and repeat. But that's what's happening. An explicit height is better here, IMO, that default line height could vary from browser to browser.

Very good question! In all honesty, that hadn't even crossed my mind when I added that little blurb, I just yanked the height out, and adjusted the top offset till I had it lined up again.

HTH!


Regards,
Rich

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

http://www.catb.org/~esr/faqs/smart-questions.html
  #3 (permalink)  
Old June 30th, 2006, 09:19 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Fairfield, Iowa, USA.
Posts: 101
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Richard,

First of all I would like to say I enjoyed your first book a lot, and I always keep it on my desk, and I am enjoying this second book as much as the first one.

I really appreciate you taking the time to answer my question. I now fully understand how you came up with the 4px displacement.

I hope you keep writing books, because you are great at it.

Thanks a lot

Christian






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