Firefox ignoring padding-left

OK, this is really annoying me.
I've been duplicating a tables-layout using CSS, working in IE, and have just started viewing it in FF (probably the wrong way 'round, but anyway).

Many of the pages have an image or two in a column down the left side of the page, always the same width, and then the text on the rest of the page - so there is always a gap between the text and the left hand side of the page, width enough to accomodate the images, whether or not there are any there.

I implemented this by having the images floated to the left at the appropriate point, and text in a div with padding-left: 160px. In IE this works fine.

Firefox ignores the padding completely.

Quirks or Standards mode.

No margin set, no width set, on the padded div. It has padding, and it ignores it. Just wraps around the floated images as if no padding was set.

Am I missing something about the box model here? I really can't see what's going wrong.

Code: Select all

    <img class=leftmargin src="ims/image.jpg">
    <div class=leftmarginimages>
      <p>
        Lots of text goes here
      </p>
    </div>

Code: Select all

img.leftmargin
  { margin-top: 2px;
    margin-bottom: 13px;
    margin-left: 5 px;
    clear: left;
    float: left;
    width: 140px}
  }
div.leftmarginimages
  { padding-left: 160px;
  }

You've got an extra }

See below in red.

Code: Select all

img.leftmargin
  { margin-top: 2px;
    margin-bottom: 13px;
    margin-left: 5 px;
    clear: left;
    float: left;
    width: 140px}
  }
div.leftmarginimages
  { padding-left: 160px;
  }

See if that does it.

Wow, sharp eyes. And that made all the difference? I would've expected that to be handled a little more gracefully...

GREAT!!
And as you have figured out, designing for FF first is easier .. then fix things for IE.

I also think it might be better instead of using padding-left to use margin-left.

But maybe that doesn't matter???

I'm thinking my whole overhaul needs an overhaul
But if that div had a border... I guess I'd want the image on the inside.
Or would I?

Yes in that case you'd do this:
HTML

Code: Select all

<div class=leftmarginimages>
     
        <img class=leftmargin src="ims/image.jpg" /> <p>Lots of text goes here      </p>
</div>

css

Code: Select all

img.leftmargin
  {
    margin-top: 2px;
    margin-bottom: 13px;
    margin-left: 5 px;
    float: left;
    width: 140px;
    margin-right: 13px;
}

div.leftmarginimages
  {
    width: 500px;
    border: 1px solid #999999;
    padding: 5px;
}

SWEET!

Leaving an unclosed { } in your CSS can have a huge effect on your website! I did it once and my whole site disappeared!

Its so stupid. I remember one time when I forgot to close a html tag and nothing would show up. It was very strange. That said I could have made other mistakes too (make that 'probably' rather than 'could have').

Glad you got it sorted now
.
Pete.

I recommend validating your CSS/HTML as the first step in debugging code. Even small code mistakes often cause unpredictable errors.

This applies even when you think your code is valid. I've often failed to notice that changes made my (formerly valid) code invalid.

Two lessons here:

always design in standards-compliant browsers, THEN afterwards for the likes of IE;
validate your code. The error may be staring you in the face.