Help with Firefox margin issue

michaelzap

I can't seem to remove some extra margin/padding from my design on this
site:

http://www.kyowa-usa.com/

IE displays it properly (no space between the menus and other elements
and the outer border), but in Firefox I always end up with some space.

I have tried several box model fixes (to no avail), and I'm no longer
sure that's what's going on.

Anyone have any idea what is causing this problem?

THANKS in advance for your replies.

Aug 31 '05 #1

Subscribe Post Reply

6839

Beauregard T. Shagnasty

mi********@gmail.com wrote:

I can't seem to remove some extra margin/padding from my design on
this site:

http://www.kyowa-usa.com/

IE displays it properly (no space between the menus and other
elements and the outer border), but in Firefox I always end up with
some space.

A pixel or two? Actually, it looks fine to me in Firefox.

You may want to fix the errors first, and see if that cures the problem.
<http://validator.w3.org/check?verbose=1&uri=http%3A//www.kyowa-usa.com/>
<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.kyowa-usa.com/>

Are these new pages? Why are you using Transitional instead of Strict
doctype?

Remove the extraneous table just inside the <body>. There should be no
reason for that.

There is a lot of empty space when my browser is maximized. Let it float.

--
-bts
-This space intentionally left blank.

Aug 31 '05 #2

michaelzap

Hmm... I didn't realize that so many errors had crept into my code
since my last validation. I'll try fixing them, but since they're
basically all just TM characters, a couple of missing quotes, and
old-school Flash compatibilty I doubt that'll be the magic bullet.

I added that table to center the page vertically. As far as I know
there's no reliable way to do that with pure CSS when you don't know
the height of your object. I think that's why I switched from Strict to
Transitional also.

So you don't see an extra pixel or two of white space around the inside
edges in Firefox (on either end of the menu bar, for example)? Hmm that
would be great if it's just me. Still I'm mocking up a similar site
now, and I'm seeing the same issue on all four sides of the wrapper div.

Aug 31 '05 #3

Beauregard T. Shagnasty

Please read:
http://www.safalra.com/special/googlegroupsreply/

mi********@gmail.com wrote:

Hmm... I didn't realize that so many errors had crept into my code
since my last validation. I'll try fixing them, but since they're
basically all just TM characters, a couple of missing quotes, and
old-school Flash compatibilty I doubt that'll be the magic bullet.
One error can cause unexpected results. Best to fix them all first.
I added that table to center the page vertically. As far as I know
there's no reliable way to do that with pure CSS when you don't
know the height of your object. I think that's why I switched from
Strict to Transitional also.
Switch back to Strict. Transitional is for .. modifications to legacy
pages you don't want to totally rewrite.

Don't understand how you could center the page vertically. It is
already about "two scrolls worth" of page.

If you must have background borders around the content, just do that
with some margin to the master <div>.
So you don't see an extra pixel or two of white space around the
inside edges in Firefox (on either end of the menu bar, for
example)? Hmm that would be great if it's just me. Still I'm
mocking up a similar site now, and I'm seeing the same issue on all
four sides of the wrapper div.

Yes, I do see a couple pixels of "white" space at the ends of the menu
bar. I like it that way. <g> From my non-deeziner's eye, add even
another pixel or two.

--
-bts
-This space intentionally left blank.

Aug 31 '05 #4

michaelzap

Beauregard T. Shagnasty wrote:

Please read:
http://www.safalra.com/special/googlegroupsreply/
Thanks for the tip!
One error can cause unexpected results. Best to fix them all first.
True. I'll fix them and see. Although I believe these errors are all
specific to the home page, and this issue exists on all pages (and in
another similar design I'm working on now).
Switch back to Strict. Transitional is for .. modifications to legacy
pages you don't want to totally rewrite.
I think that it does not validate as Strict, but it's been a while and
I don't remember for sure.
Don't understand how you could center the page vertically. It is
already about "two scrolls worth" of page.
Depends on your monitor... On larger monitors this table causes the
entire page to center vertically as well as horizontally. I like that
effect enough to use a table to get it.
If you must have background borders around the content, just do that
with some margin to the master <div>.

That's how I'm doing it, but it's not working as I want on Firefox.

Could it have to do with display:table? Without that Firefox does not
wrap the div around the content, so I had to add it (and a second inner
wrapper div). But perhaps I need to declare a border-collapse or other
property for this div when it's defined that way?

So you don't see an extra pixel or two of white space around the
inside edges in Firefox (on either end of the menu bar, for
example)? Hmm that would be great if it's just me. Still I'm
mocking up a similar site now, and I'm seeing the same issue on all
four sides of the wrapper div.

Yes, I do see a couple pixels of "white" space at the ends of the menu
bar. I like it that way. <g> From my non-deeziner's eye, add even
another pixel or two.

It's funny, but everyone else says the same thing to me and wonders why
I'm obsessing over something that looks different but fine. I've lived
with it this way for a while now, but now that I'm doing a new design
with the same problem I want to figure it out once and for all. Call me
obsessive (it's true).

Thanks for your comments, btw.

Aug 31 '05 #5

Beauregard T. Shagnasty

mi********@gmail.com wrote:

Beauregard T. Shagnasty wrote:
Please read: http://www.safalra.com/special/googlegroupsreply/
Thanks for the tip!

You're welcome; I see it works.

One error can cause unexpected results. Best to fix them all
first.

True. I'll fix them and see. Although I believe these errors are
all specific to the home page, and this issue exists on all pages
(and in another similar design I'm working on now).

"This issue" isn't much of an issue, to me. <g>

Switch back to Strict. Transitional is for .. modifications to
legacy pages you don't want to totally rewrite.

I think that it does not validate as Strict, but it's been a while
and I don't remember for sure.

Then write it so it will validate with Strict. Shouldn't be difficult
at all.

Don't understand how you could center the page vertically. It is
already about "two scrolls worth" of page.

Depends on your monitor... On larger monitors this table causes the
entire page to center vertically as well as horizontally. I like
that effect enough to use a table to get it.

When I look at the page with a max 1024x768 resolution, and browser
maximized, the most-bottom thing I see is the link to "Hakko U.S.A.
Vice President". You must either have a very large monitor, or you
have no toolbars or tabs at the top of your browser window.

Besides, everyone I know expects the page to begin at the top of the
browser viewport, not in the middle.

If you must have background borders around the content, just do
that with some margin to the master <div>.

That's how I'm doing it, but it's not working as I want on Firefox.

Could it have to do with display:table? Without that Firefox does
not wrap the div around the content, so I had to add it (and a
second inner wrapper div). But perhaps I need to declare a
border-collapse or other property for this div when it's defined
that way?

Sorry, I've never needed to do that.

So you don't see an extra pixel or two of white space around
the inside edges in Firefox (on either end of the menu bar, for
example)? Hmm that would be great if it's just me. Still I'm
mocking up a similar site now, and I'm seeing the same issue on
all four sides of the wrapper div.

Yes, I do see a couple pixels of "white" space at the ends of the
menu bar. I like it that way. <g> From my non-deeziner's eye,
add even another pixel or two.

It's funny, but everyone else says the same thing to me and wonders
why I'm obsessing over something that looks different but fine.

Well, there is your answer! As I said above, it looks just fine the
way it is. 'Tis a good-looking site. The only thing I don't really
care for is the fact that it is fixed-width and requires horizontal
scrolling at anything less than about 750px.
http://home.rochester.rr.com/bshagna...marginset.html

Remember too, that none of your real visitors are going to look at the
pages in more than one browser. Only us authors compare across
multiple browsers. I doubt if anyone will ever contact you and say,
"Hey! There's a two-pixel white space next to the menu!! I'm not going
to buy your products!!!"
I've lived with it this way for a while now, but now that I'm doing
a new design with the same problem I want to figure it out once and
for all. Call me obsessive (it's true).
Ok, you're obsessive!
Thanks for your comments, btw.

Welcome.

--
-bts
-This space intentionally left blank.

Aug 31 '05 #6

michaelzap

One error can cause unexpected results. Best to fix them all
first.
True. I'll fix them and see. Although I believe these errors are
all specific to the home page, and this issue exists on all pages
(and in another similar design I'm working on now).

This page validates fine, but also has the extra-pixel issue:
http://www.kyowa-usa.com/corporate.html
Then write it so it will validate with Strict. Shouldn't be difficult
at all.

And now I see why I switched from Strict to Transitional:
http://validator.w3.org/check?uri=ht...rict&verbose=1

Knowing you're being obsessive doesn't always help you to stop doing
it, but I appreciate your comments anyway.

Aug 31 '05 #7

Help with Firefox margin issue

Similar topics