Lonig Posted June 2, 2008 Share Posted June 2, 2008 So I come to you after searching endlessly for this problem. I'm not sure if it's IE7 only, but I cannot get this darn thing to work like it does on my other designs.Its simply a content div that has a repeating side div background. Very simple, and since it only pertains to a div, I'm not posting all code. I'm sure its simple, but the darn thing validated and thus I'm missing it.note: I have included the style tags in each div. I did this to ensure I wasnt linking wrong, and it IS the actual way I currently have it on the site. Eventually will work into the CSS file, but for now, I've just used style declarations.Thanks in advance, Lonig <!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><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head><body><div id="content">Content Section<br /><div style="clear:left;width:580px;height:10px;background:url('images/contenttop.png');background-color:#000000;"> <!-- top repeater --></div><div style="float:left;width:10px;height:100%;background:url('images/contentleft.png') repeat-y top;background-color:#000000;"> <!-- left repeater --></div><div style="float:left;width:560px;background-color:red;"> <!-- solid background with content -->words....<br /><br /><br /><br /></div><div style="float:left;width:10px;background:repeat url('images/contentright.png') repeat-y top;background-color:#000000;"> <!-- right repeater --></div><div style=" clear:left;width:580px;height:10px;background:url('images/contentbottom.png');"> <!-- bottom repeater --></div></div><!-- end div id=content --></body></html> ** I uploaded it to www.lonig.com/contenttest/content.php incase you are stuck like me and cannot tell whats wrong. Link to comment Share on other sites More sharing options...
Ingolme Posted June 2, 2008 Share Posted June 2, 2008 Your problem is that you can't use height: 100% unless the parent element has a defined height already.All these floated divs aren't really necessary, you can just nest them and the repeating backgrounds should work fine.Here's a better way to do it: <div id="content" style="width: 580px; background-color: #000000;">Content Section<br /> <div style="height:10px;background:url('images/contenttop.png');"> <!-- top repeater --></div> <div style="background:url('images/contentleft.png') repeat-y top left;"><!-- left repeater --> <div style="background url('images/contentright.png') repeat-y top right;"><!-- right repeater --> <div style="margin: 0 10px; background-color: red;"> <!-- solid background with content --> words....<br /><br /><br /><br /> </div> </div> </div> <div style="height:10px;background:url('images/contentbottom.png');"> <!-- bottom repeater --></div> </div><!-- end div id=content --> Link to comment Share on other sites More sharing options...
Lonig Posted June 2, 2008 Author Share Posted June 2, 2008 works perfect. Thanks.note to anyone else who tries the above code, put a : in the contentright.png line. Small typo that will kill the right image if you dont. That line should look like: <div style="background: url('images/contentright.png') repeat-y top right;"><!-- right repeater --> Thanks again Ingolme. Excellent and fast response as usual. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.