1st CSS Attempt, Help Needed

[Darren]

I've attempted to create a webpage with no tables using CSS previously, with very little success.

This evening however I've managed something, which in Firefox doesnt look too bad, however there's a couple of problems.

http://www.darrenjohnson.co.uk/csstest/ is the URL, the 1st problem is on the right - the route map sticks out to the right of the box its in, although I cant get it to Align left (or whatever the equiv is)

In Internet Explorer (spit) its a right mess though, with the blue box on the left pushing down the stuff on the right.

Also in the far right of the menu there appears to be some sort of error with the last button, although only by about 1 pixel though!

I havent had a chance to play with fonts yet or get all the stuff in that I want in there, and the banner at the top is 1 image, but I'll change that once I get more familar with CSS.

But could anyone advise where I'm going wrong here? Many thanks for any help as this is my first attempt to play around with CSS

[kendokendokendo]

first suggestion: run the html and css through a validator on www.w3.org - this actually helps in a lot of cases to clean a few things up.

it also still looks like you're thinking in a table sort of way. try http://bluerobot.com/web/css/center2.html to help you auto-center the page. this will clean up the code a little more as well.

also, what do you mean by blue box on the left? please clarify this.

[Sanim]

kendokendokendo, he could just put margin: auto; in the CSS for #container instead of dealing with all those negative margins, etc.

[kendokendokendo]

true yes, but i don't think internet explorer will do that on the right or bottom. IE has always had little to no support for -right and -bottom things.

[Darren]

Thanks I will have a look at that site tomorrow

As for the blue box that the text is in moving the rest around:

http://www.darrenjohnson.co.uk/csstest/ff_screenie.jpg
Thats the screenshot from Firefox which displays as it should


http://www.darrenjohnson.co.uk/csstest/ie_screenie.jpg
And that one is from IE and the stuff on the right has been shoved down

[kendokendokendo]

oooooh i see now.

Internet Explorer tends to do margins/padding differently... i still haven't figured out the exact science of it but you will need to play around with the margins and padding of the area with the text and also with that of the content boxes on the right. if you get it to look good in Internet Explorer, it should render for the most part pretty good in other browsers as well. if not, you can use a separate stylesheet for IE and put a stylesheet switcher in your header.

[Darren]

Thanks for your help its much appreciated.

I'll have a proper go in the week when I have a few days off for making a full page and CSS without all the rubbish in like that one