Member Avatar for kyllle

Hi all I have a small problem with the footer of my page, basically it works when viewed in ie but in ff it messes about.

I have created a 2 column layout to place some footer text on the left then the main links in the center (maybe this isnt the right method??)

Could someone possibly have a look and provide me with some much needed advice??

http://www.glen-lodge.co.uk/testing_arena.html

Many Thanks

Kyle

  • 4 Contributors
  • 3 Replies
  • 117 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by MelechM

Dani AI

Generated

Notes for : a footer that "works in IE but misbehaves in Firefox" is usually down to one of a few layout issues: missing/quirky DOCTYPE that pushes IE into quirks mode, floated columns that are not cleared, an unclosed tag higher in the document, or other positioning/overflow rules interfering with the footer's flow. and noted it looked okay on their setups, but browser/version differences (and caching) can hide problems — a short checklist and a couple of robust fixes help reliably pin it down.

Checklist to run now:

  • Ensure a standards DOCTYPE (for modern pages use <!DOCTYPE html>).
  • Validate the page markup with the W3C validator to catch unclosed tags or nesting errors (W3C HTML Validator).
  • Put the footer columns inside a single wrapper and clear floats, or switch to a layout system that does not rely on floats.
  • Use the browser inspector to watch computed widths/heights and see which rule is shifting the layout.

A reliable clearfix (works with floated children):

.footer-wrap::after {
  content: "";
  display: table;
  clear: both;
}

Alternatively, use a modern layout (recommended for new projects). A simple flex approach keeps a left item at the start and centers a middle block:

footer {
  display: flex;
  align-items: center;
}
.footer-left { margin-right: auto; }
.footer-center { margin: 0 auto; }

Notes and debugging tips: use a temporary universal outline (* { outline: 1px dashed #f00; }) to visualize flow, and check the inspector for any absolute/float/overflow rules applied by global CSS. For reading on behavior and options see the MDN docs: CSS float - MDN and CSS Flexible Box Layout - MDN. ’s report that it showed fine for them reinforces that validation and the inspector are the fastest way to spot the one offending rule.

Recommended Answers

All 3 Replies

Member Avatar for meabed

it work fine here , on firefox and IE 7 ,
but am gonna tell you advice , design your pages on Firefox first and it must work good on IE because Firefox uses web standard .
plus the most problems in FireFox coming from miscalculate the height , width of the tags .

Member Avatar for murderotica

Your page looks fine in FF. meabed is right, much better if you do test your work on both then try to adjust to make it look the same on FF and IE. Hope this helps.

Member Avatar for MelechM

It works fine, no problem detected.

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.