Table Position Way Off In FF

Question

KPheasey 0 Newbie Poster

15 Years Ago

I can't figure out why my tables are being pushed to the right so much in FireFox.

Please take a look and let me know what you think the problem could be.

Thanks.

html-css web-browser

5 Contributors
9 Replies
261 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by KPheasey

Dani AI

Generated 9 Months Ago

Short summary: the Firefox shift was caused by a site‑wide navigation rule that changed the spacing above the form/fieldset. Removing that rule restored the expected layout — thanks to for finding the culprit. Earlier suggestions from (look at the fieldset) and (check alignment) were on the right track for where to look.

Why this happens (brief): browsers have slightly different defaults for margins and for how block elements interact with floats and adjacent elements. If a header/nav doesn’t create the vertical space or doesn’t contain its floats, the next block-level element (a fieldset containing a table, in this case) can end up rendered in an unexpected position in some browsers. Fieldset/legend rendering also varies, so small global rules can produce visible cross‑browser layout shifts.

Practical checklist to reproduce and fix:

In Firefox Inspector, look at the computed box model for the nav, the fieldset and the table. Toggle suspected rules to see which one moves the layout.
Temporarily outline boxes to see overlap or missing spacing.
Contain/clear floats on the nav (so it really occupies its height) and explicitly control margins between nav and your form.
If centering a table, use auto horizontal margins rather than relying on wrapping elements.
When a fix is found, prefer a small, targeted change (contain or clear the nav) rather than a global reset that may have side effects.

Example fixes (safe, non-invasive starting points):

/* contain floats in nav */
#menu { overflow: auto; }

/* ensure the fieldset starts below floats */
fieldset { clear: both; box-sizing: border-box; }

/* reliable table centering */
.myTable { margin-left: auto; margin-right: auto; }

Final notes: use a normalize/reset to reduce browser surprises and test in multiple engines. If tables are unavoidable, wrap them in a clearly‑sized container to isolate layout behavior.

All 9 Replies

leakbali 0 Light Poster

15 Years Ago

Check in your external css, there is any style control fieldset element?

<fieldset>
<legend accesskey="I">Search Offers</legend>
<table>

...

</table>
</fieldset>

Pro2000 29 Posting Whiz

15 Years Ago

I couldn't view your website.. There's an error retrieving it..
Anyway, usually you have to set the align property in the table tag in order for it to work on Firefox. You should do this even if you've set an alignment for a paragraph containing this table..
For example:

<table align="center"......>.....</table>

This should work properly.. Hope it helps.

Arkinder 93 Posting Pro in Training

15 Years Ago

You should never use tables for layout. It is an outdated technique from 1996. The problem is from margin: 0; in this CSS rule.

ul#menu {
    background: url("../img/menu-bg.gif") repeat-x scroll left top #FFFFFF;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    height: 43px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

This is because the form isn't being pushed far enough down. You can either remove the margin: 0; and allow FF to set it automatically. Or you can use margin-bottom: 8px; Regards
Arkinder

Edited 15 Years Ago by Arkinder because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

KPheasey 0 Newbie Poster · Answer 1 · 2011-07-28T07:45:56+00:00

Check in your external css, there is any style control fieldset element?
<fieldset>
<legend accesskey="I">Search Offers</legend>
<table>

...

</table>
</fieldset>

The only mention of fieldset is in forms.css (http://localhost/groundfare/common/css/forms.css). But nothing there should be causing a problem like this, all it does is add a thin orange border.

Hani1991 12 Junior Poster · Answer 2 · 2011-07-28T11:41:40+00:00

Hani1991 12 Junior Poster

15 Years Ago

:
Please tell us when youre done with your code and whether it is solved or not.

Ezzaral commented: Why post this? You have contributed absolutely nothing to the thread. -3

KPheasey 0 Newbie Poster · Answer 3 · 2011-07-28T20:17:27+00:00

I couldn't view your website.. There's an error retrieving it..
Anyway, usually you have to set the align property in the table tag in order for it to work on Firefox. You should do this even if you've set an alignment for a paragraph containing this table..
For example:
<table align="center"......>.....</table>
This should work properly.. Hope it helps.

This had no affect on the position of the fieldset.

I have noticed that the problem is only happening where a <fieldset> is used. I tried messing with some of the style attributes like position, but have not had any success.

Pro2000 29 Posting Whiz · Answer 4 · 2011-07-29T03:25:14+00:00

Well, sorry! I couldn't open your website..
Why don't you post the snippet of your code where you think the problem is??

KPheasey 0 Newbie Poster · Answer 5 · 2011-07-29T03:31:10+00:00

Well, sorry! I couldn't open your website..
Why don't you post the snippet of your code where you think the problem is??

I don't even know where the problem could be, when I look at the layout in firebug, everything seems fine.

It's odd that you can't access the site, it's a test server but still public. It seems as if other posters where able to access it.

KPheasey 0 Newbie Poster · Answer 6 · 2011-07-29T19:09:21+00:00

You should never use tables for layout. It is an outdated technique from 1996. The problem is from margin: 0; in this CSS rule.
ul#menu {
    background: url("../img/menu-bg.gif") repeat-x scroll left top #FFFFFF;
    font-family: "Lucida Grande",Verdana,sans-serif;
    font-size: 0.8em;
    font-weight: bold;
    height: 43px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
This is because the form isn't being pushed far enough down. You can either remove the margin: 0; and allow FF to set it automatically. Or you can use margin-bottom: 8px; Regards
Arkinder

Removing the margin solved the problem, thank you very much.

I realize that tables are outdated, but I didn't get a choice in design, I'm just the developer, the design was done more than a year ago. However, I did add the menu element (which is why that isn't in a table lol).

Table Position Way Off In FF

Dani AI

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers