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}