For some reason, the Content is only staying a certain height, which is too short obviously as it is not as tall as the text in the #main.
What am I missing?
Also - the background image (blue) for the footer is 1000px tall, and yet it is truncating itself.
Why is that?
#main is floated which means it is removed from the normal document flow.
That basically means the parent in this instance (#container) dosnt recognise the fact that #main is breaking out of Content, add overflow:auto to Content and it will behave itself and keep a better eye on the height of #main.
I assume that the 1000px tall image is to fill the gap under the footer so that the bottom of the page is always the footer? If so then you can put the background image ( background: url(‘images/blue_pattern.png’) repeat-x; ) on the body in your CSS as the wrapper hides everything above the footer. Note, you can crop this image to the minimal needed height and width to repeat the pattern and save loading the large image.
On a side note, I really really hope the intention isn’t to replicate the reference site, unless the same person owns both.
a) I added the overflow auto … and it sort of fixed the problem.
The Content, with the white background, is supposed to overlap the footer … just like in the referenced website.
b) I am just borrowing the effect I’m trying to achieve (the main content “paper” effect overlapping the footer) - no other elements. Once all is in place, I will swap out the footer’s background image. I have no desire to plagiarize the reference site (using their images, etc).
I still don’t understand why the full height of the image isn’t showing. What is preventing that since I have provided no restrictions as to the footer’s height or the website’s height.
You should be able to achieve that with “position: relative;” on the #container, you may need to adjust z-index’s and definatley check it across browsers.
Div’s are elastic, they will always shrink to the minimum height of the content which is why the image is cropped (the image isn’t cropped the div is just too short to show any more). You can use CSS and Javascript work rounds to make the footer 100% tall but I would not recommend this.
Hello. The problem is taht on #footer you have a -100px margin-top set on it. It’s causing the footer to overlap the content. Please remove the margin-top:-100px and all will be good on taht issue
You may have it there but you’re not making it correct.
#content {width:1000px;background-color:#fff;padding:25px 0 45px 0;overflow:auto;[SIZE=3][B]position:relative -moz-box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5); [/B][/SIZE] -webkit-box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5); box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.5), -20px 0 20px -20px rgba(0, 0, 0, 0.5);}
Where is the semi colon after the position:relative? Without that ending semi colon ( ; ) the rule is not being applied. I did not look in your CSS file, sorry, because I assumed it was not there in the first place.
quietly sneaks in and adds the ; and then dashes out
DUH! For whatever reason, I just never noticed that. Always the simplest of things …
Now, IE hacks are something I haven’t really delved into yet.
So, since the shadow effect that shows in Firefox doesn’t work in IE … is there a way I can tell IE to use a substitute effect (ie, 1px border) and make sure that effect isn’t applied in Firefox?
One are conditional comments. Google for more information, but basically you can target specific browser versions, or something like IE6 and up, or IE7 and down. And then write the styles to apply to only them. Google for more information.
Thanks so much for your help … Nutty and Ryan.
I really appreciate you taking the time =)
I will revisit those conditions/hacks later on and part of the “finishing touches” stage.
Just really need to get back into adding content … well, as soon as the client sends that =)
