Stuck on IE

Hello everyone,

This is my first post here. Oh, if only I had found codingforums.com a long time ago... :p

I apologize in advance for my naivety on Internet Explorer-specific CSS coding, as well as CSS in general. I just started using CSS a few months ago, and I'm definitely still amateur.

I am making a site for a photographer [located here] (http://ribbonsofsmoke.org/davidrobertelliott/new/), and everything looks great (http://apocalyptotuesday.com/uploads/images/screenshots/dre.jpg) in Firefox and Safari, but apparently it looks like crap in IE (http://apocalyptotuesday.com/uploads/images/screenshots/badie.png).

Here is my CSS file, which I know is pretty bad. I would greatly, greatly appreciate any help you could give me!

body {
color: #7a848f;
font: 9px/18px "lucida grande", tahoma, arial, sans-serif;
letter-spacing: 1px;
position: absolute;
left: 20px;
}

* {
margin: 0;
padding: 0;
}

#container {
position: absolute;
overflow: auto;
width: 500px;
height: 450px;
top: 44px;
left: 289px;
border: thin solid #5c6369;
padding: 30px 27px 27px;
text-align: justify;
display: inline;
float: right;
}

#contactcontainer {
position: absolute;
overflow: auto;
width: 500px;
height: 450px;
top: 44px;
left: 289px;
background: url(../images/contact.gif) no-repeat fixed 289px 52px;
border: thin solid #5c6369;
text-align: center;
padding: 30px 27px 27px;
display: inline;
float: right;
}

#contactcontainer a:link {
background-color: #536369;
color: #ffffff;
padding: 10px;
text-transform: uppercase;
font: 14px "Lucida Grande", Helvetica, Arial, Sans-serif;
letter-spacing: 1px;
text-decoration: none;
}

#contactcontainer a:hover {
background-color: #97A4B0;
color: #ffffff;
padding: 10px;
text-transform: uppercase;
font: 14px "Lucida Grande", Helvetica, Arial, Sans-serif;
letter-spacing: 1px;
text-decoration: none;
}

#contactcontainer a:active {
background-color: #536369;
color: #ffffff;
padding: 10px;
text-transform: uppercase;
font: 14px "Lucida Grande", Helvetica, Arial, Sans-serif;
letter-spacing: 1px;
text-decoration: none;
}

#contactcontainer a:visited {
background-color: #536369;
color: #ffffff;
padding: 10px;
text-transform: uppercase;
font: 14px "Lucida Grande", Helvetica, Arial, Sans-serif;
letter-spacing: 1px;
text-decoration: none;
}

#photoscontainer {
position: absolute;
overflow: none;
width: 554px;
height: 507px;
top: 44px;
left: 289px;
border-top: thin solid #5c6369;
border-right: thin solid #5c6369;
border-bottom: thin solid #5c6369;
text-align: center;
float: right;
display: inline;
}

.dateheader {
background-color: #536369;
color: #ffffff;
font-size: 11px;
text-align: center;
padding-top: 4px;
padding-bottom: 4px;
}

.footer {
background-color: #536369;
color: #ffffff;
font-size: 9px;
text-align: right;
padding-top: 4px;
padding-bottom: 4px;
text-transform: uppercase;
direction: ltr;
}

#newscontainer {
position: absolute;
overflow: auto;
width: 500px;
height: 450px;
top: 44px;
left: 289px;
border: thin solid #5c6369;
background: url(../images/oldnews.gif) no-repeat fixed 289px 52px;
padding: 30px 27px 27px;
text-align: justify;
display: inline;
}

#newscontainer a:link {
text-decoration: none;
border-bottom: thin dotted #97A4B0;
color: #97A4B0;
padding: 2px;
}

#newscontainer a:hover {
padding: 2px;
color: #ffffff;
background-color: #536369;
border-top-style: none;
}

#newscontainer a:active {
text-decoration: none;
border-bottom: none;
color: #97A4B0;
padding: 2px;
}

#newscontainer a:visited {
text-decoration: none;
border-bottom: thin dotted #97A4B0;
color: #97A4B0;
padding: 2px;
}

#slideshowholder {
top: 106px;
border-top: thin solid #5C6369;
border-bottom: thin solid #5C6369;
border-left: thin solid #5C6369;
position: absolute;
width: 288px;
height: 445px;
}

#copyright {
top: 106px;
border-top: thin solid #5C6369;
border-bottom: thin solid #5C6369;
border-left: thin solid #5C6369;
position: absolute;
width: 288px;
height: 445px;
background: url(../images/copyright.gif) no-repeat;
}

#siteby {
position: absolute;
top: 560px;
left: 716px;
background-image: url(../images/siteby.gif);
width: 133px;
height: 12px;
}

#leftline {
position: absolute;
left: 0;
top: 44px;
width: 2px;
height: 62px;
border-left: thin solid #536369;
}

Hello ribbonsofsmoke,
That looks like it's just a basic container with 2 columns... Have a look at this example for some ideas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
text-align: left;
}
* {
margin: 0;
padding: 0;
}
#davidrobertelliot {
margin: 10px 0 0 10px;
border: none;
}
#container {
width: 650px;
height: 400px;
margin: 0 0 0 10px;
border: 1px solid #000000
}
#left_col {
width: 250px;
height: 400px;
float: left;
border-right: 1px solid #000000
}
#right_col {
margin-left: 250px;
}
</style>
</head>
<body>
<a href="http://www.nopeople.com" id="davidrobertelliot"><img src="images/davidrobertelliott.gif" alt="davidrobertelliot" width="289" height="45" /></a>
<div id="container">
<div id="left_col">
<!--closes left_col --></div>
<div id="right_col">
<!--closes right_col --></div>
<!--closes container --></div>
</body>
</html>

You really need a doctype if you expect it to render the same in different browsers. Have a look at the links in my sig below.

I’d get your pages out of backward‐compatibility (quirks) mode (http://hsivonen.iki.fi/doctype/) first; your documents are missing a document type declaration (http://www.w3.org/QA/2002/04/valid-dtd-list.html). I’d recommend an HTML 4.01 DTD even though you seem to be using XHTML syntax occasionally. This is the first step toward (A) creating a correct HTML document and (B) cross‐browser–compatibility.

Other problems include erroneous HTML (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fribbonsofsmoke.org%2Fdavidrobertelliott%2Fnew%2F) and invalid CSS (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fribbonsofsmoke.org%2Fdavidrobertelliott%2Fnew%2Fcss%2Fgray.css) documents. The article Flash Satay (http://www.alistapart.com/articles/flashsatay/) explains how to correct the Flash errors in a cross‐compatible manner. You may also want to list the Windows equivalent of the Lucida Grande font (in your style sheets), Lucida Sans Unicode, as listed here (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html).

Note: Excavator posted while writing this.

Hello again,

Thanks so much for the responses. You don't even know how much I appreciate it. I believe everything is fixed in IE 6, which is fabulous. I have no idea how I forgot about doctypes...such a simple mistake. Haha.

I really appreciate it. Now, off to fix up that CSS / Flash junk.