I have created a layout which looks fine in IE but not in Firefox, I normally have the problem the other way around.

Could someone take a look and give me some pointers as to what I can change to get it straight in both browsers, thanks I appreciate your time.

http://www.tadleywebdesign.com/jdp

I think this problem is caused by the fact that you floated your #maincontent.  Try removing “float: left” and adding a margin-left of 230px.

Hope this helps (please let me know),
SAW

Thanks for your reply, I appreciate it.

I’ve changed the ‘float left’ to ‘margin-left’ 230px but it does not seem to have made a difference.

I hope the css is not too hard for you to understand, i’m a relative newbie to tableless CSS layouts.  Shame about the Firefox rendering of it at the moment, any other ideas?

Thanks

Simon Marlow

I’ll take a stab..

First biggest issue is the white background doesn’t come all the way down in FX.
You have this for the wrapper div

#wrapper {
height: 400px;
width: 800px;
margin-top: 0px;
margin-right: auto;
margin-left: auto;
border: 1px solid #999999;
background: #FFFFFF;
font-weight: normal;
}

The height is unnecessary. IE will ignore what’s in the height and enlarge it based on the size of the content, which is why the background looks right in it. But that is incorrect according to standards. FX is doing what it’s told. The wrapper is only having a height of 400px; Remove that line, and it will fill up MOST of the page like you want.

The 2nd issue I see is one of the horizontal rules is going out of bounds in FX. Not sure why on that, you have it setup as
<hr align=“left” width=“95%” >
Which you think would keep it inside it’s container, maybe there are different rules on HR, I’m not sure on that. But should be easy enough to set at a width since the layout is fixed…maybe 380px or so seems about right.

Last. With the height of the wrapper removed, the background comes down almost all the way to where you want it. Except the footer area..

Here’s what you have for it
#footerarea {
height: 50px;
width: 800px;
clear: both;
float: left;
}

I don’t see any reason for it to be floating left. Again it’s an incorrect way of IE clearing floated content that it shows up like you want in it. Specs say floated content has to be cleared.
Either add a clearing element..with a clear:both style to it, or the easiest thing seems to be just remove the float:left from that.
Doesn’t seem to be doing much. Removing the float will then pull the wrapper all the way down around it.

After that, it looks pretty much the same in FX ,IE and Opera windows for me. Nice layout.