The css layout that I have works perfectly in firefox, but not in IE. The menu has all extra spaces between them, the background image doesn't show, and the container doesn't look the same. I'm sure you guys have seen this many times...here is my css code:
Thanks to anyone who can help...
body {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 0.7em;
background-repeat: repeat;
background-attachment: scroll;
}
#container {
width: 600px;
margin: 0 auto;
padding: 9px;
border: .5px solid #6699FF;
background-color: #ccffff;
}
/* Container Rounded Corners */
.ctop, .cbottom{
display:block;
background:#0000;
}
.ctop *, .cbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#6699FF;
}
.c1{margin: 0 5px}
.c2{margin: 0 3px}
.c3{margin: 0 2px}
.c4{
margin: -4.5em auto 0 auto;
height: .5px
}
#masthead {
background-image:url('../images/masthead.jpg');
text-align: center;
width: 577px;
padding: 10px;
border: 1px solid #0066CC;
background-color: #0066CC;
background-repeat: repeat;
background-attachment: scroll;
}
/* Masthead Rounded Corners */
.rtop, .rbottom{
display:block;
background:#ccffff;
}
.rtop *, .rbottom *{
display: block;
height: 1px;
overflow: hidden;
background:#6699FF;
}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{
margin: 0 1px;
height: .1px
}
#navigation {
position: relative;
float: left;
width: 119px;
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px solid #708090;
}
#content {
float: left;
width: 470px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#footer {
position: relative;
text-align:center;
margin: -4.5em auto 0 auto;
border-top:1px solid #708090;
width: 400px;
}
/* Masthead Styles */
#masthead h1 {
color: #fff;
}
#masthead h3 {
color: #402640;
}
/* Navigation Styles */
#navigation ul {
list-style-type: none;
width: 80%;
display: block;
margin: 0;
padding: 0;
}
#navigation li {
display: block;
margin: 0;
padding: 0;
background-color: #0066CC;
}
#navigation a {
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 1.5px 1.5px 1.5px;
border: 1px solid #66ff99;
background-color: #0066CC;
}
#navigation a:hover {
color: #402640;
text-decoration: underline overline;
background-color: #99FFCC;
}
#active a:link, #active a:visited, #active a:hover
{
border: 1px solid #66ff99;
background-color: #FFFF99;
color: #333;
}
/* Content Styles */
#content h1,h2,h3,h4,h5,h6 {
color: #503750;
}
#content img {
padding: 5px;
border: 1px solid #402640;
}
/* Footer Styles */
#footer p {
color: #808080;
}
#footer a {
color: #503750;
text-decoration: underline;
}
#footer a:hover {
color: #402640;
text-decoration: none;
}
a {
color: #402640;
text-decoration: underline;
}
a:hover {
color: #dfb8df;
text-decoration: underline;
}
.style_bold {
font-weight: bold;
}
.style_italic {
font-style: italic;
}
/*
================================================
styling for footnotes begins here
================================================
*/
/* footnotes as they original appear inline, before reformatting */
#content span.footnote {
color: #f30;
}
/* footnote links in text */
#content a.ftnlink {
vertical-align: super;
font-size: 0.8em;
}
/* div to hold all reformatted footnotes */
.footnoteholder {
border-left: 1px solid #ccc;
margin: 20px 0 50px 0;
padding: 20px 10px;
font-size: 0.8em;
line-height: 1.2em;
}
/* div to hold single reformatted footnote */
.footnoteholder div.footnote {
margin: 0 0 10px 0;
}HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<!-- #BeginTemplate "master.dwt" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- #BeginEditable "doctitle" -->
<title>test</title>
<!-- #EndEditable -->
<link rel="stylesheet" type="text/css" title="CSS" href="style.css" media="screen" />
<style type="text/css">
.style1 {
color: #6699FF;
}
</style>
<script type=”text/javascript” src=”formatFootnotes.js”></script>
</head>
<body style="filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1, StartColorStr='#FF003399', EndColorStr='#FF6699CC'); background-image: url('images/background.jpg');background-attachment: fixed">
<!-- Begin Container -->
<div id="container" style="height: 700px">
<b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
<!-- Begin Masthead -->
<div id="masthead" style="height: 75px">
<h1 class="style1">test</h1>
<h3> </h3>
</div>
<b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
<!-- End Masthead -->
<!-- Begin Navigation -->
<div id="navigation">
<ul>
<li id="active"><a href="default.htm">Home</a></li>
<li><a href="about/about.htm">About</a></li>
<li><a href="news/news.htm">News</a></li>
<li><a href="calendar/calendar.htm">Concert Dates</a></li>
<li><a href="photo_gallery/photo_gallery.htm">Photo Gallery</a></li>
<li><a href="information_links/information_links.htm">Links</a></li>
<li><a href="faq/faq.htm">Directions</a></li>
<li><a href="contact/contact.htm">Contact</a></li>
</ul>
</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content">
<!-- #BeginEditable "content" -->
<h2>test</h2>
<p>Philadelphia's some sentence here
<br><br>another sentence here.</p>
<!-- #EndEditable "content" --></div>
<!-- End Content -->
<!-- Begin Footer -->
<!-- End Footer --></div>
<div id="footer">
<p>- footer</p>
</div>
<!-- End Container -->
</body>
<!-- #EndTemplate -->
</html>
