By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,920 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

FF Padding Problem

P: n/a
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!
Mar 22 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
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.
Mar 22 '07 #2

P: n/a
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
Mar 22 '07 #3

P: n/a
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
Mar 22 '07 #4

P: n/a
In article <RqDMh.15914$1a6.3353@trnddc08>,
Mike <mm**@earth.netwrote:
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
Mar 22 '07 #5

P: n/a
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!!
Mar 23 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.