Click here to get back home

Help with Firefox margin issue

 HomeNewsGroups | Search | About
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Help with Firefox margin issue michaelzap 08-30-2005
Posted by michaelzap on August 30, 2005, 5:26 pm
Please log in for more thread options


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.


Posted by Beauregard T. Shagnasty on August 31, 2005, 2:16 am
Please log in for more thread options


michaelzap@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.

Posted by michaelzap on August 30, 2005, 11:53 pm
Please log in for more thread options


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.


Posted by Beauregard T. Shagnasty on August 31, 2005, 3:59 pm
Please log in for more thread options


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

michaelzap@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.

Posted by michaelzap on August 31, 2005, 9:58 am
Please log in for more thread options



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.


Similar ThreadsPosted
help with firefox issue February 25, 2008, 11:41 am
Firefox/IE7 display issue September 17, 2007, 4:53 pm
Netscape/Firefox image display issue February 21, 2006, 2:50 pm
margin above of

August 23, 2007, 5:15 am
What good is margin-bottom in IE? November 3, 2004, 1:28 pm
Netscape margin attributes June 2, 2006, 2:47 pm
strange behavior with IE and margin... June 12, 2006, 2:03 am
after setting 's margin to 0 it is still non zero! (IE only) January 18, 2007, 12:54 pm
margin under floated divs February 14, 2008, 1:06 pm
IE6 -> searching for padding or margin, i don't find it September 29, 2004, 6:40 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap