Now, I have three background, the first in the body, the second in an outer div and the third in an inner div. The outer div wraps the header and footer, the inner one should just fill in between the header and footer. Well, when I close that div before the footer, the background image will not show up, although if you right-click and view background image, it does show the correct image. If I close it after the footer, the background image shows up, but because that inner div is not as wide as the footer image, that causes a problem. It NEEDS to end before the footer, but it just refuses to display properly if I do that.
Could someone please help me understand what the problem is here? I had the exact same issue on another custom WP theme and just worked around it, but I can't do it with this one.
I also added the code to the CSS as you suggested. It didn't seem to make any difference. I do have a clear: both in the CSS for the footer...is that why this didn't work?
Interesting, in FF on my Mac last night the background wasn't going all the way down, but if you're saying you had a clear:both in the footer the whole time, then I have no idea why it wasn't working properly last night.
You shouldn't necessarily need the clear div if you have a clear:both in your footer, but I did notice a positioning problem with the footer in FF3 on WIN, the following cleaned up code seems to fix it, but I can't test the updated code in IE:
The background wasn't going all the way down last night, but when I moved the closing div tag, it made it show up...but it also made the div go all the way to below the footer. The div in question has a width of 900 pixels and the footer graphic is wider than that, that's why it's being pushed over like it is. I really want that inner div that contains the background to end before the footer, but if I close it before the footer, the middle background image disappears...that's the mystery :) . If I follow your suggestion and make the change you suggest, what happens is that the footer does center up, but the middle background image extends past the footer background image, so the rounded corners of the footer are on top of the background image...does that make sense? That middle background image has to stop before the footer, but I can't figure out why doing that makes the image disappear altogether.
Okay, thanks to another set of eyes, I put the div class clear, then the closing div tag, both before the footer and it is fixed...now if I just understood why. I'll go read Chris' article again and maybe I'll "get it".
http://www.digiscrapschool.com
Now, I have three background, the first in the body, the second in an outer div and the third in an inner div. The outer div wraps the header and footer, the inner one should just fill in between the header and footer. Well, when I close that div before the footer, the background image will not show up, although if you right-click and view background image, it does show the correct image. If I close it after the footer, the background image shows up, but because that inner div is not as wide as the footer image, that causes a problem. It NEEDS to end before the footer, but it just refuses to display properly if I do that.
Could someone please help me understand what the problem is here? I had the exact same issue on another custom WP theme and just worked around it, but I can't do it with this one.
Thanks in advance!!
This is not the first time you have requested this, and it's completely unnecessary.
To the matter at hand...
You simply need to put a clear before the footer div. You can either put this before the footer div:
Or put this before the footer div:
And if you go the class="clear" option (which I recommend), put this in your CSS file:
.clear {clear:both;
}
Here's a post Chris had about Floats and Clears:
http://css-tricks.com/all-about-floats/
</div><div class=\"clear\"></div><div id=\"footer\">© 2007 <a href=\"<?php echo get_option('home'); ?>/\">Blog Oh Blog</a> | Powered by <a href=\"http://wordpress.org/\">WordPress</a> | Theme by ©<a href=\"http://www.theblogshoppe.com\">The Blog Shoppe</a> 2008<?php wp_footer(); ?></div></div></body>
</html>
I also added the code to the CSS as you suggested. It didn't seem to make any difference. I do have a clear: both in the CSS for the footer...is that why this didn't work?
Thank you again!
You shouldn't necessarily need the clear div if you have a clear:both in your footer, but I did notice a positioning problem with the footer in FF3 on WIN, the following cleaned up code seems to fix it, but I can't test the updated code in IE:
#footer {text-align:center;
clear:both;
height: 89px;
background:url(images/footer.gif) center bottom no-repeat;
padding-top: 20px;
}
The background wasn't going all the way down last night, but when I moved the closing div tag, it made it show up...but it also made the div go all the way to below the footer. The div in question has a width of 900 pixels and the footer graphic is wider than that, that's why it's being pushed over like it is. I really want that inner div that contains the background to end before the footer, but if I close it before the footer, the middle background image disappears...that's the mystery :) . If I follow your suggestion and make the change you suggest, what happens is that the footer does center up, but the middle background image extends past the footer background image, so the rounded corners of the footer are on top of the background image...does that make sense? That middle background image has to stop before the footer, but I can't figure out why doing that makes the image disappear altogether.
Thanks for the help so far, I appreciate it!
This is not the first time you have requested this, and it's completely unnecessary.
To the matter at hand...
You simply need to put a clear before the footer div. You can either put this before the footer div:
Or put this before the footer div:
And if you go the class="clear" option (which I recommend), put this in your CSS file:
.clear {clear:both;
}
Here's a post Chris had about Floats and Clears:
http://css-tricks.com/all-about-floats/[/quote]
Okay, thanks to another set of eyes, I put the div class clear, then the closing div tag, both before the footer and it is fixed...now if I just understood why. I'll go read Chris' article again and maybe I'll "get it".
Thanks, all!