css - Extend body background image/body not as tall as html -
i've got 2 background images, 1 on html, , other on body. reason, body 1 not stretch full height of window, should. or, more specifically, there's a...maybe 50px space body's bg not show. have margin on bottom of content (which doesn't seem show, not big deal) 50px, i've deleted , still problem persists. you can see problem here. can't quite figure out why. ideas? maybe i'm missing fundamental...
edit:
i have, yes. thought might of been html image might big, , didn't want stretch body's image much, doesn't make sense, so.
i meant post code, didn't have on hand. here now:
<!doctype html public "-///w3c///dtd html 4.01 transitional///en" "http:///www.w3.org/tr/html4/loose.dtd"> <head> <script type="text/javascript" src="../_script/jquery-1.4.3.min.js"></script> <script type="text/javascript" src="../_script/jquery.fancybox-1.3.4.pack.js"></script> <link rel="stylesheet" href="../_script/jquery.fancybox-1.3.4.css" type="text/css" /> <link rel="stylesheet" href="../_script/page_photo.css" type="text/css" /> <script type="text/javascript"> $(document).ready(function() { $("a.single_image").fancybox(); }); </script> <style type="text/css"> /*v reset v*/ html,body,div,span,h1,h2,h3,h4,h5,h6,hr,p,a,abbr,acronym,address,big,del,em,img, small,strike,strong,sub,sup,ul,ol,fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td,optgroup,option { margin: 0; padding: 0; border: 0; outline: 0; text-align: left; vertical-align: middle; text-decoration: none; list-style: none; } /*^ reset ^*/ html { height: 100%; min-width: 1000px; background: url("../_images/wall.jpg"); margin: 0; padding: 0; } body { height: 100%; min-width: 1000px; background: url("../_images/nav_bg-half.png") repeat-y; font: 300 12px/22.0px palatino linotype, palatino, book antiqua, georgia, serif; color: #bdb798; } a:link { color: #bdb798; text-decoration: none; } a:visited { color: #333333; text-decoration: none; } a:hover { color: #d8e5c2; text-decoration: none; } a:active { color: #a5a49f; text-decoration: none; } #nav a:link { color: #bdb798; text-decoration: none; } #nav a:visited { color: #9e9c7a; text-decoration: none; } #nav a:hover { color: #d8e5c2; text-decoration: none; } #nav a:active { color: #9e9c7a; text-decoration: none; } #header { height: 80px; margin-bottom: 50px; padding: 10px; background: #2e2d29; border-bottom: 1px solid black; background-image: url("../_images/head-bg.png") } @import url("constant.css"); #nav { width: 119px; height: 528px; /*minus padding+border*/ margin-right: 60px; padding: 10px; border: 1px solid black; border-left: 0; background: #2a2727; *padding: 10px 0 10px /*ie*/ *width: 119px; /*ie*/ float: left; } #nav ul { margin: 0 10px; } #nav hr { margin: 5px -10px; color: #848678; border: 0; border-bottom: 1px solid black; *margin: 5px 0 5px 10px; *width: 99px; } #content { min-height: 90%; overflow: hidden; padding: 0 30px; border: 1px solid black; border-right: 0; background: #2a2727; *padding: 0 30px 0 30px; /* ???? */ *font-size: 20px; } #content hr { margin: 0 -30px; clear: both; border-top: 1px solid #010101; border-bottom: 1px solid #4a4a4a; *margin: 0 0 0 -30px; *width: 106%; } #content .bio { width: 70%; max-height: 220px; overflow: auto; margin: 0 20px 20px 0; padding: 10px; float: right; } #content h2.author { margin: 5px 0; text-align: right; *font-size: 20px; } #content .bio p { line-height: 1.25; text-align: right; } #content .work { width: 100%; height: 660px; overflow: auto; padding: 10px; clear: both; } #content .work img { vertical-align: center; border: 4px double grey; } </style> </head> <body> <div id="header"> <img src="../_images/logo.png" /> </div> <div id="nav"> photography <ul> <li><a href="google.com">beth balmforth</a></li> <li><a href="google.com">kristen popcheff</a></li> <li><a href="google.com">krystle parker</a></li> <li><a href="google.com">renee blanchord</a></li> <li><a href="google.com">-reserved-</a></li> <li><a href="google.com">-reserved-</a></li> </ul> <hr /> poetry <ul> <li>rebecca r. pierce</li> <li>justin louras</li> <li>-reserved-</li> </ul> <hr /> <a href="../about.html">home</a><br /> <a href="../about.html">about</a><br/> <a href="../about.html">submit</a><br /> </div> <div id="content"> <h2 class="author">beth balmforth</h2> <div class="work"> <img src="-photo-images/beth-balmforth_01.jpg" alt="get 'em tiger beth balmforth" title="get 'em tiger beth balmforth" /> </div> <hr /> <div class="bio"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit. aliquam dui odio, pulvinar luctus gravida in, varius ac est. sed dapibus, felis sed placerat dignissim, urna magna egestas ante, aliquet tincidunt lacus ligula eu dui. pellentesque pellentesque magna sed tortor ultricies lobortis. mauris ultrices iaculis est, id vestibulum dolor molestie at. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. maecenas rhoncus gravida neque, vitae posuere ipsum sodales sed. cras adipiscing sagittis magna id varius. quisque ut ligula eget justo volutpat adipiscing quis ut purus. proin sollicitudin velit ac justo dictum adipiscing. curabitur @ sodales est. praesent aliquam volutpat est, vel dignissim sapien dignissim non. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p> </div> </div> </body> </html>
have tried setting:
html, body { width:100%; height:100%; }
Comments
Post a Comment