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 January 1st, 2008, 03:21 PM
Registered User
 
Join Date: Nov 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default chapter 7 - chapter 11

hi once again everyone

the first think i wanna ask is this:

the behavior of expand to fit(horizontally)
and shrink to fit (vertically), for block
level elements, is applied whatever the values(auto, px,%) of
width or height properties are?


second question:

i followed the instructions on how to fix the
<li> spacing bug (page 437) in IE 6 but couldn't
get the desirable result.
any ideas on what exactly should i do?



  #2 (permalink)  
Old January 1st, 2008, 04:15 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

1st question, depends on what you mean:

You mean if you set the width to px or % (but set no height) will height still be shrink-to-fit? Yes, it will. And if you set height to px or % (but set no width) will width still be expand-to-fit? Yes, it will.

If you set both width and height to px or % (or other measurements other than auto) then no, the width and height are no longer governed by those rules, the measurement replaces those models. Auto is the default value, so, auto means expand-to-fit (width) and shrink-to-fit (height), only when you explicitly define a value other than auto does that model go away for the particular property. Of course, relative, fixed, and absolute positioning change the rules, but that's covered in that chapter.

2nd question:
I can't say without seeing the complete markup and CSS.

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 January 1st, 2008, 05:27 PM
Registered User
 
Join Date: Nov 2007
Location: , , .
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Default

1st question
you covered me, but:

fig 7-36

div {
    font: 12px sans-serif;
    border: 1px solid black;
    background: lightsteelblue;
     width: 100%;
    height: 100%;
    padding: 5px;
}

<body>
        <div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum tellus orci, dignissim ut, consequat in,consectetuer et, nibh. Donec luctus ante a neque convallis ultricies.
Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat,dui lorem tempus lacus, at rutrum lectus ligula quis diam.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vestibulum tellus orci, dignissim ut, consequat in,consectetuer
et, nibh. Donec luctus ante a neque convallis ultricies.
Curabitur ac lorem. Etiam adipiscing, nisi id eleifend feugiat,dui lorem tempus lacus, at rutrum lectus ligula quis diam.
        </div>
    </body>

we have width: 100% and height: 100% => we don't have expand to fit
(horizontally)and shrink to fit (vertically.)
why the <div> element overflows horizontally and vertically it doesn't?

2nd question

fig 11-27

<body>
        [list]
            <li style='z-index: 4;'>
                <div></div>
            </li>
            <li style='z-index: 3;'></li>
            <li style='z-index: 2;'></li>
            <li style='z-index: 1;'></li>
        </ul>
    </body>


body {
    background: lightyellow;
}
ul {
    list-style: none;
    width: 200px;
}
li {
    background: pink;
    border: 1px solid red;
    margin: 2px;
    position: relative;
    width: 200px;
    height: 20px;

}
div {
    background: lightblue;
    border: 1px solid blue;
    position: absolute;
    z-index: 2;
    top: 2px;
    left: 150px;
    height: 100px;
    width: 200px;
}

how exactly do we fix the IE6 <li> spacing bug(the additional space
that is included below the <li> element)?

  #4 (permalink)  
Old January 6th, 2008, 10:40 AM
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

Inundating me with questions by repeatedly posting the same question here and mailing them to my personal email will not get you a response any faster. I saw your response the first time you posted it. Believe it or not, I participate in these forums voluntarily as my time permits. Harassing me with your questions is more likely to get you ignored than get you a response.

First question: The section on "Percentage Measurements" covers what to expect when dealing with percentage measurement, including your question. Width and height as percentages are *always* based on the width and height of the immediate parent element. The <body> element is block, its height is shrink-to-fit. The <body> element's parent is <html>, its height is shrink-to-fit. Therefore, when you apply a percentage height to the <div> element, its height is the same height as <body> and <html>. Apply height: 100%; to <body> and <html>, and you'll get different results.

Second Question: In the paragraph following Figure 11-27B is the suggested remedy for the IE white-space bug. At the time, it was, as far as I knew then, the only known fix, and it's one that I've personally been using for years.

The bug looks like this, though this displays two bugs actually, the z-index bug and the white-space bug.[list]
   <li style='z-index: 4;'>
      <div></div>
   </li>
   <li style='z-index: 3;'></li>
   <li style='z-index: 2;'></li>
   <li style='z-index: 1;'></li>
</ul>

The book suggests a couple of things to try, you may need one or more of these fixes.

* Remove all white-space from between the element tags in the markup source (just the[list] element), like so:
[list]<li style='z-index: 4;'><div></div></li><li style='z-index: 3;'><div></div></li><li style='z-index: 2;'><div></div></li><li style='z-index: 1;'><div></div></li></ul>

* Apply the following in a conditional comment style sheet to IE6:

li {
  display: inline;
}

Now, what you'll find may turn pretty chaotic at first. The display: inline; fix is a pretty harsh one. To counteract that, place block containers inside each <li> element, and style the <li> or <div> elements to taste.

A Google search reveals that a few others have braved a fix for this glitch too, which gives you more to try:
http://www.hicksdesign.co.uk/journal/ie-whitespace-bug

* In a conditional comment style sheet, apply the following rule to IE (he states 6 and less, test with 7 before applying it to 7).

ul div {
float: left;
clear: left;
}

His example is using links, but it should work on the <div> elements too.

Then there is this one too:
http://csscreator.com/?q=node/6745

Google is your friend,
http://www.google.com/search?q=IE+list+whitespace+bug


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
 


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 Carlw BOOK: Professional SharePoint 2007 Development ISBN: 978-0-470-11756-9 0 October 16th, 2008 02:08 PM
chapter 11 figure 11-7 relative positioning pelopito BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 2 November 29th, 2007 05:11 AM
Chapter 11 mhanson BOOK: Professional VB 2005 ISBN: 0-7645-7536-8 0 July 10th, 2007 08:40 PM
Chapter 11: kiley-s BOOK: Professional ASP.NET 2.0 and Special Edition; ISBN: 978-0-7645-7610-2; ISBN: 978-0-470-04178-9 10 March 8th, 2007 07:19 PM



All times are GMT -4. The time now is 11:28 AM.


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