Forum Moderators: not2easy
I have a box inside wich I have a left-nav and a right-side main content. Because I want the line between the two to continue to the bottom of the page regardless of which column turns out to be longer - I have put a faux-col bg into the outside box.. but for some reason - It's not showing up! everything else shows up.. except the graphic. I checked the spelling - and the path, so it's not that.
- in the case of this example, I've got a red background and a left line instead of the faux col image - neither of them are showing up - and i've stripped all the rubbish out for easy viewing
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>foo</title>
<style type="text/css">
body {margin:0; padding:0; font:normal 79%/1.4 tahoma, verdana, arial, helvetica,sans-serif;}
* {padding:0; margin:0;}
#outterwrapper{width:728px; margin:30px auto; background: #fff;}
#extradiv{border-left: 1px solid #00155F; background:#f00;}
#leftcol{float:left; width:190px; }
#leftcol img.mainleftpic{border-top: 1px solid #00155f;}
#main{float:right; width:536px;}
#content{margin:0 0 0 15px; border:1px solid #00155f; border-right:0px; background: #e1e1e1 url(../img/content-bg.jpg) top left repeat-y; min-height: 650px; height: auto; _height:650px;}
#footer {background-color:#fff; border-right:1px solid #00155F;}
ul#navigation{list-style-type:none; margin:5px 0 0 0; padding:0px;}
ul#subnav{list-style-type:none; margin-bottom:0px; padding-bottom:0;}
</style>
</head>
<body>
<div id="outterwrapper">
<div id="extradiv"><!--this is the one where i've set my faux col--><div id="leftcol">
<img src="img/left-1.jpg" alt="foo" class="mainleftpic" />
<h2 class="leftheader">services</h2>
<ul id="navigation">
<li><a href="#" title="Cars">cars</a>
<ul id="subnav">
<li><a href="" title="foo">foo</a></li>
<li><a href="" title="foo">foo</a></li>
<li><a href="" title="foo">foo</a></li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div><!--leftcol--><div id="main">
<img src="img/bannercar1.jpg" alt="foo" class="mainimg" />
<div id="content">
<h1>foo header</h1>
<h2>foo header</h2>
<p>insert foo content here </p>
</div><!--content-->
<div id="footer">
<p>foo</p>
</div><!--footer-->
</div><!--main-->
</div> <!--extradiv-->
</div><!--outterwrapper-->
</body>
</html>
thanks a heap for any help anybody can offer me on this one
cheers!
stratus
</div><!--footer-->
</div><!--main-->
<br style="clear:both;" /> <!-- <<<< added -->
</div> <!--extradiv-->
</div><!--outterwrapper-->
</body>
</html>
it can't be! that's like 3 hours of buggering around trying to figure out why it USED to work ..... and I even remember removing that break thinking.. "oh.. I don't need THAT any more"..
grrrrrr!
ok.. you've saved me from my own sillyness.. doh!
<homer> mmmm.. clearing breaks</homer>
thanks a bunch!
Stratus
