FF Padding Problem

I am having a problem with padding. 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.

Any help will be greatly appreciated!

Mike

http://www.giftbasketsandtrinkets.com

You are running the browser (IE) in qurks mode, where it reproduces the
broken box model from prior versions. Google for "quirks mode".

--
Richard.

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

Richard Formby wrote:

You are running the browser (IE) in qurks mode, where it reproduces the
broken box model from prior versions. Google for "quirks mode".

Hmm, I'm either too slow or too verbose. :-)

--
John

In article <RqDMh.15914$1a6.3353@trnddc08>,
Mike <mmlk (AT) earth (DOT) net> wrote:

I am having a problem with padding. 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.

Any help will be greatly appreciated!

I did notice that it looked odd that your top box was not the
same size as the others below and I was able to fix easily by
altering the width (in FF on a Mac). But I am reluctant to get
into this matter as cross browser, cross platform success with
your fixed width code is not what I would attempt.

It looked "reasonable for a short range of font-size clicks in FF
with:

#content {
....
margin: auto;
....
}

#page_heading {

width: 760px;
....
}

and

#globalnav {

width: 760px;
....
height: 2.5em;
....
margin: auto;
....
}

But really, this is just fiddling about and I have not looked
deep into the matter with your hacks and stuff.

It makes me almost cry that there are any reasons at all for you
not simply making the lot into a relatively simple table and
avoid all the anxieties of performance cross browser.

--
dorayme

John Hosking wrote:

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

That's got it fixed. I have some more reading and learning to do!

Thanks to all that helped!!