Mike wrote:
I am having a problem with padding.
Cut down on the beer, then. Har!
I have three boxes and I want them
all to be the same width. In IE it looks like the outside of the DIV
stays put and the padding is placed on the inside, so the bottom box
lines up with the middle box - which is what I want. In FF it looks like
the padding is making the DIV grow to the size of the padding and the
boxes then don't line up. If I take the padding out, then the boxes are
the same width, but then the text is jammed against the edges.
The link is:
http://www.giftbasketsandtrinkets.com
I believe the problem is with the "content" id, but no amount of
tinkering has made it any better.
Well, despite your subject line, it's not a FF padding problem.
First, if you're going to compare IE with FF, get yourself out of quirks
mode (q.G.) and into standards mode. Drop the transitional doctype and
go for 4.01 strict.
And since you're using HTML and not XHTML, clean out the /endings in
your code.
And since you didn't notice the endings, you should probably learn
validate your code and CSS.
And now to the tiny little detail of your problem, which you have all
but solved yourself already:
Change the width you defined for #content to width:680px.
The "why" is the broken box model (q.G.) IE uses in quirks mode.
Remember, too, though, that specifying width for text elements in px
like this is not a great idea. First of all, users of IE (<7) won't be
able to read your text in all cases, because you have hard-coded a small
size. In real browsers, however, changing the font size will break your
design (your three boxes will still -- steadfastly -- remain the same
size, but your menu will overflow the space you've provided. Watch out!
HTH
--
John