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

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

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>

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

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...>