Wrox Programmer Forums

Need to download code?

View our list of code downloads.

Go Back   Wrox Programmer Forums > Web Programming > CSS > BOOK: CSS Instant Results
Password Reminder
| FAQ | Members List | 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 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 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?


On page 10 you say the following:
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:height: 23px;

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


Reply With Quote
  #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

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.



Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

Reply With Quote
  #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


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

Reply With Quote

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

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

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