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 Search this Thread Display Modes
  #1 (permalink)  
Old February 28th, 2005, 08:32 AM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Default Overflow scrollbars vs. div size in IE vs. Gecko

Hi there,

I'm stuck. I have an image that is 400px stacked on top of a div with overflow:auto that is also 400px. In IE, they line up. In Gecko, the div ads enough room at the end of the div to place the scrollbar, making the end of the div and the end of the image no longer line up.

I tried reformatting using a table, coloring the cell, and then having the div in a cell beneath that but it didn't do any thing different visually. I also tried changing the widths to 100% within that cell instead of a fixed width. Nada.

Is there a way to do this without creating a page for both browsers?

Thanks!

And, Richard, thanks for making such a fantastically clear and easy-to-read book. Your writing is a pleasure and I have learned so much. It's a rare technical book that's so well written.


- Ian

  #2 (permalink)  
Old February 28th, 2005, 10:20 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 6 Times in 6 Posts
Default

Thanks for the kind words.

Could you show me some code, or a link to some code?

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
  #3 (permalink)  
Old March 7th, 2005, 01:45 PM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Hi Rich,

Here y'are. This is where I stopped after experimenting with various versions.

It's http://www.propagandacentral.com

<td width="49%" valign="top">
     <div style="width:100%; background:black;">

       <img src="graphics/00000001/pc-welcome.gif"> </div>
      <a href="http://www.democracymeansyou.com/Merchant2/merchant.mvc?Screen=CTGY&Category_Code=STAMP">
      </a>
      <div style="padding: 0em .5em 0em .5em; height:100;
width:100%; overflow:auto; border: #400000 solid 1px;
background: rgb(255,255,195); scrollbar-face-color:#800000;
scrollbar-shadow-color:#400000; scrollbar-arrow-color:yellow;">
        <p><strong>Please enjoy yourself with some
          of the most unique liberal and Democratic politics buttons, stickers,
          tees, magnets, toys, dog wear, and keychains available anywhere. Click
          any category below to browse our selection of over 750 items, 95% of
          which are designed by us! </strong></p>
        <p><strong>Our stickers and buttons have traveled
          the world... we've had orders from nearly every continent, and have
          sold over 100,000 stickers and buttons since we started in 2001. We
          hope you enjoy them as much as thousands of other satisfied political
          liberals and progressives have over the years. Please be sure to visit
          <a href="http://www.democracymeansyou.com/wholesale/vendors.php">these
          stores</a> in your area where you can find our items!</strong></p>
        <p><strong>If you're
          in the mood for political satire, commentary, and other trouble, visit
          our sister site, <a href="http://www.democracymeansyou.com">www.DemocracyMeansYou.c om</a>
          and be the first in line on the Department of Homeland Security's watchlist!</strong></p>

        <p><strong> And finally,
          for current Coupons of Mass Reduction and specials check <a href="http://www.democracymeansyou.com/coupons">http://ww</a><a href="http://www.democracymeansyou.com/updates">w.democracymeansyou.com/updates</a>
          for the latest updates and info.</strong></p>
      </div>
      <p style="text-align:left; font-family:Arial, Helvetica; width:400px;font-size:9px;color:red; font-weight:bold; margin:1em;">We
        accept credit cards and electronic checks in our store. You can also order
        by mail. <a href="http://www.democracymeansyou.com/order/contact.htm">
        Click here</a> for more information about ordering by mail. To order by
        phone, please call (866) POLI-ACT (765-4228). If you have any problems,
        please call us at the same number. We are slow to respond to e-mail queries
        due to volume. </p></td>

  #4 (permalink)  
Old March 9th, 2005, 05:12 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

The problem that you're seeing is a result of the IE quirks mode box model. Firefox gets it right here.

The standard box model goes like this:
The dimensions of a box are calculated by adding margin-left + border-left + padding-left + width + padding-right + border-right + margin-right.

In IE quirks mode the box model is calculated differently.
IE width = border-left + padding-left + [content] + padding-right + border-right.

Do you see the difference? Instead of width being its own entity, in IE quirks the width includes borders and padding.

There are two ways to correct this.
* Put IE in standards mode by supplying a Document Type Declaration that invokes standards mode.
* Work around the differences in box model interpretation. In this case you could nest a <div> inside of that one and apply the padding or margin to the nested <div>. Its a sloppy hack because it requires more markup, but it works.

Just a helpful tip:
If you want to set the font for the page, the whole page, only once, include it in a style sheet.


<style type='text/css'>
    body, td {
       font-family: Arial, Helvetica, sans-serif;
   }
</style>

In IE quirks the font won't be inherited inside of tables, a bug specific to IE. This is why the <td> element is selected too.

Now you don't need tags or other font-family declarations in the body of the document, because the font you set in the style sheet is inherited to all elements.

Here's where you can read more about the IE box model and DOCTYPE switching:
http://msdn.microsoft.com/library/de...hancements.asp

HTH!

Regards,
Rich

--
[http://www.smilingsouls.net]
Mail_IMAP: A PHP/C-Client/PEAR solution for webmail
Author: Beginning CSS: Cascading Style Sheets For Web Design
  #5 (permalink)  
Old April 3rd, 2005, 02:38 PM
Authorized User
 
Join Date: Feb 2005
Location: , , .
Posts: 11
Thanks: 1
Thanked 0 Times in 0 Posts
Default

Thanks Rich. I'll see if I can figure out how to make that work because it's in MIVA, and I'm not sure if I can set the DTD on that, and I'm not sure (or even sure I want to know) how to use Miva script to create variations based on browser type.

I really did enjoy? (hmmm...) well, at least found enlightening, the DTD section of the book. Again, kudos to you on some great work.

I'll try the hack with the div tags in the meantime. As long as <this div doesn't smell funny...>

 


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


Similar Threads
Thread Thread Starter Forum Replies Last Post
center text (only) in fixed size div, how to do it beetle_jaipur BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 April 16th, 2007 01:38 PM
div within a div and inherting the height brettdavis4 CSS Cascading Style Sheets 1 January 23rd, 2007 09:59 AM
gecko based xpath paultman BOOK: Professional JavaScript for Web Developers ISBN: 978-0-7645-7908-0 2 October 15th, 2005 01:36 PM
Window Size and DIV location TSEROOGY Javascript 6 August 30th, 2004 10:37 PM
Navigator/Gecko Headaches! richard.york Javascript 1 December 23rd, 2003 08:22 PM



All times are GMT -4. The time now is 05:54 PM.


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