I have had a go at making a website using CSS to dictate the layout (no tables used) and it works quite nicely in firefox but when i open it in IE it completely mangles the whole layout.

Can someone tell me some techniques to prevent this and maybe point me to some helpful pages.

Thanks.

First of all, there are some good references at the w3schools.com site. http://w3schools.invisionzone.com/index.php?showtopic=7567
Secondly, there are some fairly knowledgable folks here. Post a help request in the HTML sub-forum of the computer Forum. Provide a link to your page and the css code and let us see what you have done so far.
It makes it a bit easier if the css is in the html page, but if it is in an external file, that's okay, too.
IE has a problem with Margins and Padding, sort of. If you don't have a correct Doc Type Declaration, IE goes into Quirks mode and guesses at your layout, so lets see some code and we'll help you work through this.
Also, describe as best you can, the problems as you see them, so we know what to correct and modify.

Yes thats right, since ie6 is so outdated you need to fix the errors for ie. One way you can do it is javascript and make ie users use a different stylesheet to the other crowds. Another good thing to do is too check if your css code is valid by going to http://jigsaw.w3.org/css-validator/, this should fix some of your problems.

It's quite crap that there are so many different browsers and all return different errors to your website, look at www.qla6.com in Internet Explorer and in Firefox or Opera as example. Anyway the best way to fix problems like this is to keep trying, look at your code and see if all commands you use are supported by all the browsers which will be seeing your web site, and believe me, getting your site work on every browser is a huge pain in the *bottom* which could have been avoided by the company's who made the browsers themselves...

I know the feeling currently working on my own little css design right now, Hopefully once I have finish this site and tweaked it to all three browsers I will have a tutorial up for it.

Like Florisjuh said it takes time and alot of patience to get it, sometimes if you use the right tags the problem fixes itself.

thats just a few weeks worth of work

My Css file will be hitting the 10KB mark amd close to 400 lines of code .

http://saint-michael.trap17.com/css/index.html

Best thing to do is work one browser and then copy the files and then work them for the next browser and so on.

Also I recommend this link as well these are a bunch of tools you can use to help get a cleaner design.

http://www.trap17.com/forums/index.php?sho...c=42607&hl=

-first of all, work with Firefox (or Opera) as your testing browser, as these respect the web standards, NOT Internet Explorer, as many people think
-then, validate your markup & css code, it might solve the problem (partially, at least)
-post your problems here and we`ll try to help you...there are several known IE bugs regarding rendering of css...

This was just a test site i made a while ago where i had problems with the layout. Maybe you can tell me where i went wrong so i don't end up repeating my mistakes.

Site: http://paulmason.awardspace.com/

CSS: http://paulmason.awardspace.com/design.css

Thanks guys.

First of all, get rid of one of the Body tags.
Second, the Input requires a "name=".
Third, different Browsers set various margins and padding for elements differently, so I usually set them equal to 0 in the body tag of the css and that inherits throughout the page unless I change them for an element. That might make a difference.
And I see that you are setting negative margins on a lot of things. Let the Document Flow define your positions is the best way to handle them. I rarely need negative margins or absolute positioning.
Run the URL through the w3c validator to see what the errors are. And the css through jigsaw.
w3c validator
CSS validator

Thanks jlhaslip, very good advice and really helpful links