Floated menu and content messed up in IE

[alextj]

I've spent the last couple of days trying to figure out where I'm going wrong, but before I turn to drink I thought of asking here

The page is a simple top bar div, header, floated right content, then floated left menu and footer.

In FF it works fine, but in IE8 the content div doesn't stick to its defined width - it takes up the entire width, and the menu and footer's styling aren't applied.
You can see what I mean here: http://www.tjtaylor.net/test

Any ideas? Any help or suggestions are appreciated, thanks!
Alex

[mark3738]

It may help initially if you had the correct URL for us to look at, which I believe is http://www.tjtaylor.net/test.htm. However, that is a minor issue.

A quick look at your page and code I would suggest you tried setting the width (and height) for all the menu.png images. You are using images in your menu, and IE likes images to have their dimensions set.

You may also have to add a width setting to the spritenav class to keep IE happy too. Usually when I have had problems it is tied up with not setting a width for various elements, and especially when dealing with IE, but some CSS guru will probably have a better more definitive answer.

[weegillis]

Structure. This is the first thing I find questionable. Back to the drawing board, rather than trying to hammer this thing into submission. This is much more than a CSS problem. The structure is not natural or 'contained' but forced together by a slough of properties. This is not a favorable approach for what is otherwise a very simple layout.

[alextj]

@mark I went extensionless a couple of years ago for new pages - definitely recommended.
When I come across IE bugs the first place I look is the classic padding and width problems vs FF, but that didn't seem to be the problem this time.

@weegillis I've seen much worse A large part of the CSS is from the addthis widget and the sprite rollover menu.

I've since found the solution, and it was up in the header with the absolute positioning. I had the telephone number absolute positioned plus styling the text in the same class - and that's not on...
You have to position with one class or id (.tel), and style with a second (#call). Problem solved!
I've no idea why IE didn't like that but FF didn't blink.

I'll leave the test page and css up a few days so people can look, plus I now have the sub menu styling going funny on some of the live pages...
Have a good one!
Alex