The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Whack alignment in Firefox.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #30216

    Hey guys.

    why is the content perfect in IE, Chrome, and Safari … but completely incorrect in FF? Any help would be greatly appreciated!


    For one, you really should have the entire page in a container of say 960px with margin:0 auto applied. I also notice your header is 100% width, but there’s no need for that. I would nix the individual widths you have applied to each element (header, pagebody, footer, etc..) and wrap the entire layout in a container, far easier to manage and less likelyhood of strange bugs such as this.

    Also not sure why you need to use tables in a simple layout such as this. A simple CSS floated layout would be ideal. Such as:

    #wrapper {width:960px; margin:0 auto}
    #content {float:left; width:600px}
    #sidebar {float:left; width:360px}
    #footer {clear: both}

    Not without a container…for a possibly quick fix, try and wrapping the entire page with a container:

    Then use CSS:

    #container {
    margin:0 auto;

    table {

    And make sure to clear the footer so it drops to the bottom:

    #footer {

    Hope you get this worked out! Ultimately, you’ll want to rebuild the structure if you can, but hopefully this will give you a patch considering your time crunch.


    What was the fix? I’m curious.


    It’s still out of whack, add clear: both; to your footer css.


    Lots of people use them. If this is for a client you need to learn how to code properly otherwise your websites will never pass in IE6 and 7.


    Here’s what you need to change to fix IE7. This is just a fix for the mess you have made, at some point you need to work on this code and write it correctly.

    Remove all the css from header, using position:absolute on an element that is not contained in a relative positioned div, positions the absolute div relative to the body element and will move if the browser window is resized. Read this article
    Remove the margin-top in #menu
    Remove the margin-top in #pagebody

    So that these changes only affect IE7 you need a separate stylesheet ie7.css and you need to put this in the head section beneath the link to your main style sheet.

    and read this article

    You still need to clear the footer for Firefox, I’m on Firefox 3.5 Mac and the footer makes a gap where the Welcome to Floresta etc is.

    As for IE6 you can choose not to support it, it all depends on the target audience of your client.


    IE6 is still used by about 7% of the population, with IE7 accounting for another 8% and IE8 coming in at 16%, 7% can be a substantial number of potential customers to a client, especially depending on what demographic they are looking to reach, older internet users tend to be more resistant to upgrades and changes in browsers, just a couple things to keep in mind when you are deciding whether or not to support IE6.


    Absolutely, especially when you are being paid to do a site. Personally I cater to IE6 as well even though I hate it. Good business is keeping your customers happy.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.