CSS Noob needs help

[digitaloverlay]

As the title indicates, I am new to CSS and need some help. I am trying to create a three column layout using CSS and it just isn't cooperating. As you can see on this test page http://www.digitaloverlay.com/test/index.htm my columns (right and main) are showing up in different areas of the screen for FF and IE. When I get it just right for one, the other is way off. What am I doing wrong? I finally figured out how to add my header graphic and get the menu to show up as well but it too is off position depending on what browser you use. Here is my source CSS file


do2.css

html{
margin-top:0;

margin-bottom:0;
}

body {
background-image: url("bg7.png");
font-family: times new roman;
font-size: 12 pt;
}

}
a:hover {background-image:url("menubuttonbg1.png");}
li {display:inline}


td {
font-family: times new roman;
font-size: 12 pt;
}
#mainimg{
background-image: url("topimg.png");
float:left;
position:absolute;
left: 300px;
top: 0px;
width: 500px;
height: 175px;


}
#wrapper{
width:100%;
text-align:left;
margin-left:auto;
margin-right:auto;
}
}

#maincol{
width:90%;
float:left;
position:relative;
left: 31px;
top: 176px;
height: 127px;



}

#rightcol{
width:18%;
float:right;
position:static;
right: 10px;
top: 176px;
left: 801px;

}

#leftcol{
float: left;
display:inline;
width:80%;
position:absolute;
left: 10px;
top: 176px;
font-family: times new roman;
font-size: 12 pt;
}

#footer{
float: left;
display:inline;
width:90%;
position:absolute;
left: 20px;
top: 600px;
font-family: times new roman;
font-size: 12 pt;
}


menu.css

#menu
ul
{
float:left;
width:80%;
padding:0;
display:inline

list-style-type:none;

position:absolute;
left: 250px;
top: 170px;

}
a
{

text-decoration:none;
color:white;
background-image:url("menubuttonbg.png");
padding:0.2em 0.8em;
border-right:1px dashed white;
border-left:1px dashed white;
}
a:hover {background-image:url("menubuttonbg1.png");}
li {display:inline}

[Boogle]

You're using a mix of

position:absolute;
position:relative;
position:static;

/* AND THEN ALSO FLOAT 
    YOU SHOULD STICK TO RELATIVE IMO AND USE DIVS */

Also you've declared this twice, which is kinda wrong because although i know you think you've used it for two different things, it doesn't matter the browser probably picks it up for ALL A ELEMWNTS

//this is in do2.css
a:hover {background-image:url("menubuttonbg1.png");}
li {display:inline}
//and is in menu.css
a:hover {background-image:url("menubuttonbg1.png");}
li {display:inline}

When you declare something by the global element name, it applies to all those elements in the document; therefore any <a></a>'s will do what you've asked them to do there. You've tried too many positioning techniques to go with a table. It looks as if you're trying to "colspan" using absolute positioning to me. Just use "colspan" but my main piece of advice would be g to using divs. If you would like to i can write a three column layout for and give you it. You can then work on it to suit you.

Otherwise checkout colspan and see how much easier it would make your table to layout correctly.

HTH's Boog's