Whack alignment in Firefox.

[tannercampbell]

Hey guys.

http://florestavet.net

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

[Luminated]

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}

[Luminated]

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

Then use CSS:

#container {

width:990px;

margin:0 auto;

}



table {

float:left;

}

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

#footer {

clear:both;

}

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.

[Luminated]

What was the fix? I’m curious.

[virtual]

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

[virtual]

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.

[virtual]

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 https://css-tricks.com/absolute-positioning-inside-relative-positioning/
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 https://css-tricks.com/how-to-create-an-ie-only-stylesheet/

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.

[shagzdesign]

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.

[virtual]

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.

[Author]

Posts