Cronthenoob Posted August 23, 2006 Share Posted August 23, 2006 So This is what i've got. <div class="outerdiv"> <div class="innerdiv"> <div class="content"> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> </div </div></div> In IE the innerdiv stretches to the size of the content.In FF the innerdiv only stretches to the size of the viewport.If the user has to scroll down in FF, the part that was originally hidden, has no background.Heres my CSS: html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; height:100%;}.outerdiv {width:100%;height:100%;margin:auto;}.innerdiv {background-image:url('../images/gradient_bg.gif');width:800px;height:100%;margin:auto;float:none;}.content {background-color:transparent;width:600px;margin:auto;}.banner {background-image:url('../images/banner_bg.gif');background-repeat:no-repeat;width:608px;height:103px;margin:auto;float:left;}.left { width:435px; position:relative; float:left;}.right { width:160px; position:relative; float:right;} I suspect it has something to do with the float, and it takes the dives that are floating outside of their container. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 can you post a link..I can't seem to figure it out without the background images Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 Sure.The Test Page in Question. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 the backgrounds are not working in FF Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 Yep, thats the problem. Link to comment Share on other sites More sharing options...
boen_robot Posted August 23, 2006 Share Posted August 23, 2006 That happens with IE7 and Opera 9 as well, so it might be IE6's fault (why am I not surprised?).Perhaps giving the fixed background "background-attachment: fixed;"? Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 I tried this:background-attachment:fixed;background-position:center;background-repeat:repeat-y;No luck. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 Yep, thats the problem.I mean when I load your link in FF it is just a big gray background...the image backgrounds are not showing at all.Anyways try this<div class="outerdiv"><div class="innerdiv"> <div class="content"> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> <br style="clear:both"/> </div></div></div> Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 Try it now . . . I think I fixed it.I put the background image on the html, body style and added center position and background repeat-y on it. html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; background-image: url('../images/gradient_bg.gif'); background-position:center; background-repeat:repeat-y;} Before I had the background image in a different div. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 nothing...the backgrounds show fine in IE and Opera but not FF, wierd...try the code change I suggested.EDIT: NVM...I am a dumba$$. AdBlock was blocking images from your site for some reason...I whitelisted you and it works fine.So how about the real problem does the clearing <br> work? Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 Ok, I added it, try it now :)I've got IE and FF running, and FF is showing the background images fine for me. Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 worked like a charm...*blows smoking gun* yup it just needed a little persuasion Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 The original CSS html, body style: Heres my CSS:html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; height:100%;} And I changed it to this:html, body { margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; background-color:#CBCBCB; background-image: url('../images/gradient_bg.gif'); background-position:center; background-repeat:repeat-y;} and now it works fine! :)I also completely took away the innerdiv.Thanks for the help :)P.S. What does the <br style="clear:both"> do anyways? Link to comment Share on other sites More sharing options...
aspnetguy Posted August 23, 2006 Share Posted August 23, 2006 clear has 3 options :left,right,both (since you have elements floating left andd right I used both).Basically when you float an element, it floats out of its container unless you use a clearing <br> before you close the container holding the floated elements.IE seems to do this automatically while FF and Opera follow the standard and require you to place the clear in the code. Link to comment Share on other sites More sharing options...
Cronthenoob Posted August 23, 2006 Author Share Posted August 23, 2006 Makes sense!Thx! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now