Hi everyone, I'm new to these forums and to web development in general so thanks ahead of time for any help you can offer. I'm trying to get a site redesigned for my office in a short time frame and haven't had any luck finding an answer to this issue although I'm sure it must be a pretty common one:
I have a content container div and I want to put a background image of the same width so that one thin gray line runs down the right side of the navigation menu and then stretches to match the content. I'm using CSS that has worked fine for me on other sites but not on this one. I can't get the background to display in either FF or IE. The navigation div has been really buggy for me as well but I found a workaround that didn't look horrible so I gave up trying to solve it - I don't know if all the various problems I've had with this stylesheet could be linked somehow - maybe someone will see something really obvious I've done wrong. It's not all my code, I've copied a lot from the main website of my employer to make our pages match, and I don't know enough to tell if things are conflicting.
Anyway here's the html: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--[if IE 6]>
<style type="text/css">
.caption {position:absolute; width:760px; margin-left: -960px; margin-top: 285px; background:none;text-align:right; font-family: georgia, times, helvetica,sans-serif;font-size:14px;line-height:18px;color:#898279;}
ul#tabs { z-index: 10000; position:absolute;float:right; list-style-type: none; width: 180px; height:15px; margin-left: 770px; margin-top:-25px; font-family:Arial, helvetica,verdana,sans-serif; font-size: .8em; text-align:center; background:none; }
</style>
<![endif]-->
<link href="inc/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<?php include("inc/header.php"); ?>
<div id="contentwrap">
<?php include("inc/contentheader.php"); ?>
<?php include("inc/nav.php"); ?>
<div id="content">
<p><img src="img/spotlight-events.gif" /> </p>
<div id="testdiv">
test
</div>
</div><!--end div content-->
<?php include("inc/footer.php"); ?>
</div><!--end div contentwrap-->
</body>
and the CSS that goes along with the content portion of the page:
#contentwrap a:link a:visited a:hover a:active {
color: #C1B58A;
}
#contentheader {
width: 960;
display:block;
margin: 0 auto;
padding-bottom: 20px;
}
#contentwrap {
margin: 0 auto;
width:960px;
display:block;
border:1px solid #DDD8CF;
border-top: 0;
background: transparent url(img/content-bg.gif) repeat-y;
}
#columnnav { width:240px; float: left; margin-top: 10px; margin-bottom: 15px; }
#columnnav { font-family: georgia, times, "times new roman", serif; font-size: 18px; font-weight: normal; color: #625750;}
#navmenu {
display:inline;
width: 200px;
float: left;
}
#navmenu ul { list-style-type: none; margin: 0;}
#navmenu li { width: 200px; border-bottom: 1px dotted #9e7e38;}
#navmenu a { width: 200px; display: block; color: #625750; margin:0; padding:2px 5px; text-decoration:none;}
#navmenu a:hover { width: 190px; background-color: #625750; color: #FFFFFF; padding:2px 5px;}
#sulogo a {
display: inline;
float: left;
padding-top: 10px;
padding-left: 60px;
}
#content {
width: 700px;
float: right;
display: inline;
}
#testdiv {
display: inline;
width: 700px;
}
#prefooter {
width: 960px;
display:block;
clear: both; margin: 0 auto;
text-align:center;
background-color: #efede3;
}
#footer {
display:block;
width: 960px;
clear: both; margin: 0 auto;
height:35px;
background-color: #333333;
}
#footer p {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #C2B589;
text-align: center;
padding-top: 10px;
}
