Divs and CSS VS Tables

I've been trying my hand at some web development recently, and I decided to use divs (and CSS) for the main layout of my page. It's been very frustrating, there seem to be a plethora of compatability issues with all IE browsers. my page renders as it should in firefox and Opera, but internet explorer seems to break it a lot.

it _seems_ to be padding issues, but i'm using float properties, and it might solve the problem by using relative positioning instead.

any thoughts? is IE just bad at rendering? should I change to tables?

my page is www.zerov3n.com for anyone who wants to take a closer look; the CSS is www.zerov3n.com/css/istyle.css

Thanks for suggestions :)

(bear in mind it's nowhere near finished)

You know whats funny is I have the opposite problem, IE renders fine and firefox is giving headaches.
Make sure you put IE in standards mode. By default it is in quarks mode. Which does not follow css to the T.
To place IE is standards mode place:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

At the very top of your html file, before the html tag.
You could also add the html meta tag, but whether it is really needed or not others will have to answer that.
To place the html meta tag:

<meta http-equiv="Content-Type" content="text/html; charset=EUC-JP">

I think that maybe the wrong character set, not even sure how that was set.
Hope this helps
Silk

I'm far from a html/css guru but try wrapping another div around the "left" and "content" divs. I had a similar problem with page rendering in IE recently that was fixed by doing this.

In reply to:
there seem to be a plethora of compatability issues with all IE browsers

Technically, unless you're refering to IE4 and IE5.5, there's only 1 IE browser; IE. Every other browser is just a shell.

As far as the issues, tons with IE, but if you keep your HTML simple, things can be over come by using "IE Specific" CSS.

You've seem to be getting frustrated over a very well known problem: IE Box Model. Here's a nice explination as to the IE Box model and what's wrong with it:
http://css.maxdesign.com.au/listamatic/about-boxmodel.htm.
http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
It's been a known problem for a good 5+ years, ever since "CSS" itself came onto the picture as mainstream.

Best way to fix it is to create an IE specific CSS file and use:

<!--[if lte IE 6]>
  <link relation="stylesheet" type="text/css" href="blah" />
<![endif]-->

This will also set up your site to be compatable with IE7, too (note: lte means; less than or equal to).

heh, I actually _was_ talking about IE 6 and IE 5.5 (since that's the one my school uses... -_-)

Thanks for the help though, I'll give both methods a shot.

ok i've tried the adding a div to wrap around the content and left divs, and this seems to work in IE 6+

I still have to use the IE 5.5 workaround though; I just wanted to say thanks for all your help

~kamaji