Firefox/ Internet Explorer show differences Vol 2

Hi Su,

There are several things that could be going on here, none of them are really Dreamweaver specific :)

The first thing I would like you to fix is your invalid XHTML.  See the following:

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.ellegreenfox.com%2FindexNew.html

and

http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.ellegreenfox.com%2FindexNew.html&usermedium=all

Basically, when you have invalid markup for your declared DOCTYPE, the browsers go into their "quirks" mode to render your pages.  As the browsers have different default settings for things, this can result in unexpected whitespace around containers.  Fix the errors and post back when this page passes both validation tests.

Finally, here is a really good visual representation of the CSS box model:

http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions

Ok. So far so good. Found many mistakes. (wonder why DW doesn't scream or show these errors even on validation)

It actually leads me back to the question in the other thread about container expanding when a style with padding is applied.

So how do I insert a text now correctly?

See the container growing in http://www.ellegreenfox.com/indexNew1.html 
In the other way, p-style, there are the differences between IE and FF: http://www.ellegreenfox.com/indexNew2.html

THanks
Su

For indexNew1,

You need to constrain the text with a nested div so that the padding is applies inwards.  Your current code does not do that, as the box receives both an ID and a class:

Here's the relevant source code:

    <div id="box" class="boxtextPad20">
Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________
    </div>

Should be:

    <div id="box">
      <div class="boxtextPad20">Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________</div>
    </div>

The above "<div id="box" class="boxtextPad20">" probably isn't the best way to go about it.  You should either make it a class or div but not both at once...makes the CSS editing really tough to do unless you plan on using boxtextPad20 elsewhere in the document.  

Also, to prevent the bg image from repeating, set background-repeat: no-repeat; in the same style that holds the BG image.

For indexNew2 <p> tags, you are running into a default difference in the two browsers and there isn't a lot you can do about that unless you explicity kill the margin in the <p> tag.  To do that effectively, you also need to add another div to apply boxtextPad20.  Now the boxtextPad20 controls the padding inside "box" and you can create as many classes as you need to apply to p tags.

Revised code:

    <div id="box">
<div class="boxtextPad20">      
      <p class="textfix">Join Elle’s conversation in her foxtails column as she
        discusses everything from X to Y.<br />
        Learn about her new book “Two Red Flowers” and explore ___________</p>
      <p class="boxtextCenter">Coming Soon:<br />
        Elle's Shop</p>
      <p class="textfix">Visit her online store for her latest books of
        prose
and poetry. Browse through a collection of specialty bookmarks, stationary,
cards, jewelry, and exotic incense.</p>
</div>

class .textfix is:

.textfix {
      font-family: Arial;
      font-size: 12pt;
      font-style: italic;
      font-weight: 400;
      margin: 0px;
      padding: 0px;
      text-align: justify;
}

boxpad20 should be:

.boxtextPad20 {
      padding: 20px;
}  

Actually it distinguishes between 'Validate Markup' PLUS 'Validate XML', so you actually have to validate twice.
No red marks in the code. Pity.

Thanks, Jason. That was really brilliant.
I wonder if these things will be described in the book I ordered.

Thanks again
Su

You're welcome.   It takes a little time to get one's head around the box model, but once you do it becomes very easy to replicate.