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>&nbsp;</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>

Does anyone have any ideas?

where is your image i mean location and give image in HTML page it works fine ...

?

I'm not quite sure I understand...my background works fine now...its just my container border that doesn't show in IE, and extra spaces in the menu that appear in IE.

Ok, figured out my menu problem, it was my padding with li and ul...I set them to 1.5px 1.5px 1.5px.

Now it's just my border container that I need to fix!

OOOK so I just answered all my questions lol.

Changed the border to 1px instead of .5px

Does anyone have suggestions to make my code any cleaner? I'm just trying to make a perfect template for future sites that I would build.

Thanks!

in that case would you mind changing this to solved.

your code looks decent enough other than you dont need the extra space between each and every line of code.

Yes, this can be marked as solved, thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.