p2p.wrox.com Forums

p2p.wrox.com Forums (http://p2p.wrox.com/index.php)
-   BOOK: CSS Instant Results (http://p2p.wrox.com/forumdisplay.php?f=255)
-   -   How did u know? (http://p2p.wrox.com/showthread.php?t=44650)

czambran June 29th, 2006 12:26 PM

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?



richard.york June 29th, 2006 09:45 PM

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


czambran June 30th, 2006 09:19 AM


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


All times are GMT -4. The time now is 05:31 AM.

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