I've been trying to get this right all day and it's driving me a bit bonkers. I've included a screenshot of the specific area that shows the problem. As you can see, the background image (blue and green is all one image) does not go the length of the page. It stops at the middle while the rest of the text and such goes right past it. Here's the code for the area that has the background image in it. #wrap{ background: #eaf2cb url(right-bg2.gif) repeat-y; height:auto; min-height: 100%; height:100%; } Code (markup): Help please. I'm having a blonde moment and this is little thing is getting the best of me.
Try deleting all that min-height and height nonsense, especially that height:100% - let me guess, does that top half stop EXACTLY at one screen worth? I'd have to see FULL code in context to be 100% certain of what's going on.
Yes, it does stop at one screens worth of height. I have tried to delete the height stuff and nothing changed. I'll go get the code to paste in here for you to see. Thanks!
Css code * { margin:0; padding:0; } h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address { margin:0 0; } body{ height: 100%; margin:0 0; background: #fff; color: #78006D; font-size:11px; font-family: Verdana, Arial, Helvetica, sans-serif; line-height:15px; } #wrap{ background: #eaf2cb url(right-bg2.gif) repeat-y; } #header{ border-bottom: 4px solid #fff; background:#c0ff80 url(logotestnew.gif) right no-repeat; height: 90px; } a { text-decoration:none; color:#78006D; border-bottom: solid 1px; } a:hover { border-bottom: solid 0px; } h1,.cheading{ color: #607900; font-size:18px; line-height:25px; text-transform: uppercase; padding-bottom: 18px; background: transparent; } h2,.contentheading{ font-size:0.9em; line-height:1.5em; text-transform: uppercase; color: #607900; } h3{ font-size:0.7em; line-height:1.0em; } li { margin-left: 15px;} .mtable{ padding:0 0;/*padding for inside text*/ } .contentp { margin: 0 50px; height: 100%; } .contentp{ margin-left:25px; background: #eaf2cb url(blueback.gif) 0 0 repeat-y; min-height: 100%; height:100%; } .mtable h3{ background:#666; color:#fff; margin:0 -10px 0.5em -10px;/*negative padding to pull h3 back out from .mtable padding*/ } div.heading{ padding-top: 30px; margin-left:50px; } .retexts { color: #fff; margin-left: 70px; margin-right: 20px; padding-top: 30px; } h1.retexts{ color: #607900; padding-top: 30px; margin-bottom: -40px; } a.retexts { color: #fff; font-family: bold; } /* -----------CSS menu --------- #topmenu { color: #000; border-bottom: 4px solid #fff; margin: 0; padding: 0; background:#60bf00; width:820px; min-height:60px; } #topmenu ul { list-style: none; padding: 0; margin: 0; margin-left: 50px; } #topmenu li { float: left; margin: 0 0; } #topmenu li a { background: #c0ff80; height: 2.7em; line-height: 2.7em; float: left; display: block; border-right: 4px solid #fff; color: #fff; text-align: center; font-weight: bold; text-decoration: none; text-transform: uppercase; border-bottom: none; padding: 0 8px; } #topmenu li a:hover, a:active { background: #d6e699; color: #607900; } #topmenu li:first-child a { border-left:4px solid #fff; } */ #topmenu { border-bottom: 4px solid #fff; margin: 0; padding: 0; background:#008000; width:820px; /*min-height:60px;*/ } #topmenu a { border-bottom: solid 0px; } .mtable-menu{ height: 60px; margin-left: 40px; } .mtable-menu img { margin: 0px; padding: 0px; } img.contact { margin: 33px 50px; } Code (markup): HTML for the index page <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title> <meta name="title" content=""> <meta name="author" content=""> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="shortcut icon" href=""> <link href="template_css.css" rel="stylesheet" type="text/css" media="screen"></head><body> <div id="wrap"> <div id="header"></div> <div id="topmenu"><div class="mtable-menu"><a href=""><img src="hometab.gif" onmouseover="this.src='';" onmouseout="this.src='hometab.gif';" border="0"></a><a href=""><img src="dogwalkingtab.gif" onmouseover="this.src='';" onmouseout="this.src='dogwalkingtab.gif';" border="0"></a><a href=""><img src="petsittingtab.gif" onmouseover="this.src='';" onmouseout="this.src='petsittingtab.gif';" border="0"></a><a href=""><img src="ravetab.gif" onmouseover="this.src='';" onmouseout="this.src='ravetab.gif';" border="0"></a><a href=""><img src="pricingtab.gif" onmouseover="this.src='';" onmouseout="this.src='pricingtab.gif';" border="0"></a><a href=""><img src="contacttab.gif" onmouseover="this.src='';" onmouseout="this.src='contacttab.gif';" border="0"></a></div></div> <div id="main-body"> <div id="content"> <div class="inside"> <div class="mtable"> <img src="image2.jpg" alt=" " height="85" width="480"> </div> <div id="sidebar"> <p class="retexts"><script type="text/javascript"><!-- google_ad_client = "pub-3722346314834522"; google_ad_width = 120; google_ad_height = 600; google_ad_format = "120x600_as"; google_ad_type = "text"; google_ad_channel = ""; google_color_border = "FFFFFF"; google_color_bg = "FFFFFF"; google_color_link = "3366cc"; google_color_text = "000000"; google_color_url = "000000"; //--></script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></p> </div> <table class="contentp"> <tbody><tr> <td colspan="2" valign="top"> <br><br><img src="" alt=""><br><br><p> This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it.<br><br> This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it. This is just a placeholder so you can see what your website will look like with text on it.This is just a placeholder so you can see what your website will look like with text on it.This is just a placeholder so you can see what your website will look like with text on it.This is just a placeholder so you can see what your website will look like with text on it.</p> </td> </tr> </tbody></table> <span class="article_seperator"> </span> </div> </div> </div> <!--end of main-body--> <div id="sidebar-2"> <div class="inside"> <div class="mtable"> <img src="sidepic.gif" alt=""><br><p class="retexts">text</p> </div> </div> </div> </div> <!--end of wrap--> </body></html> Code (markup): code for the layout CSS body { text-align:center; /*center hack*/ height: 100%; } html { height: 100% } #wrap { height: 100%; width:820px; /*center hack*/ margin:0 auto; /*center hack*/ text-align:left; } * html #wrap { height: 100%; } /* for IE6 */ #header { color: #000; text-align:left; } #main-body { float:left; width:470px; height: 100%; position: absolute; overflow:hidden; } #sidebar-2 { float:right; height: 100%; width:350px; overflow:hidden; margin-left:-3px; } #content { float:right; height: 100%; position: absolute; width:470px; overflow:hidden; } #sidebar { float:left; width:20; height: 100%; margin-left:-65px; position:relative; overflow:hidden; } .inside { padding:0px; } Code (markup):
Well, you might want to try opening your HTML for starters... but your real problem is the repeated: min-height: 100%; height:100%; which should NOT be called side by side... the height declaration is likely SUPPOSED to be hidden behind a * html hack to feed it just to IE, as RoW (rest of world) takes that declaration literally - 100% meaning SCREEN HEIGHT. Up top I would change: body{ height: 100%; margin:0 0; to html, body { height:100%; } body { margin:0 0; Then #wrap { height: 100%; width:820px; /*center hack*/ margin:0 auto; /*center hack*/ text-align:left; } * html #wrap { height: 100%; } /* for IE6 */ is ALMOST correct, except that first height under #wrap should be min-height, not height. Then every instance of min-height:100%; height:100%; should be separated into two classes as #wrap is. What you have here is a REALLY broken 100% height layout - that frankly I'm not even sure is going to work being that most browsers fail at nesting 100% min-height more than two instances deep, and I THINK you've got three. Again where 100% height model like a great many other things is a total /FAIL/ when not using a table resulting in more code and more confusion. But try and tell the anti-table mafioso's that.
Oh, and I'd combine those two CSS files down to one - they've got multiple conflicting values and frankly there is NO reason those should be separate files.
Okay, I think I made the changes you suggested, however it's still not working in firefox. Is there an easier way to do this? I just want that background image to adjust automatically and always go to the end of the screen.
But then the image will be across the entire screen, and not confined to the structure of the layout, right? I don't want it to be the background for the whole page.
okay this bit on your wrap is not looking right becaue your wrap bit is like your content that should be different where it say this but a div at the end plz <div id="wrap"></div> hope this helps if you can post your css and html document up i could maybe be abel to fix it you thanks in advance ginner
Thanks for the suggestion, Ginner. I gave it a try and I'm still having the same problem. You wouldn't think such a small problem could be so hard to fix! lol I posted the code further up thread.