Having a height problem

[beyre]

And no, I don't mean with my short stature (grins)

http://www.johnnywattsagency.com/index-build.php
http://www.johnnywattsagency.com/style.css

I'm using this website as my guide ... http://www.cowellfortreasurer.com/

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?

Thanks in advance,
~ Barbara

[NuttySkunk]

#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.

[beyre]

Thanks for your reply.

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).

[beyre]

RE: footer image

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.

[NuttySkunk]

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.

[NuttySkunk]

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.

[beyre]

Nope, position:relative did not work on the #content

As for the footer image - I understand your explanation - thank you! =)

[NuttySkunk]

What browser are you using?

[beyre]

Firefox 9.0.1 ...

It's not doing it right in IE7 either (recently replaced computer, should really upgrade IE LOL)

[RyanReese]

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

[beyre]

But that is how the reference site [http://www.cowellfortreasurer.com/] had it setup so that the #content would overlap the footer ....

[RyanReese]

I did not look at the reference site. I'm sorry.

Put position:relative on "#content" to allow the content to stack on top of the footer.

[beyre]

I've already had that (and is currently there) ... doesn't change anything.

Am I not holding my tongue right here? hehehe

[RyanReese]

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;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);  -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.

[beyre]

*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?

[RyanReese]

Sure. THere are multiple ways.

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.

Then you have some "hacks" you can use

* html #thing{} /*this targets IE6 only*/
*+html #thing{}/*this targets IE7 only*/

The only reason that IE7 works for IE7 and not IE6 is because + isn't recognized by IE6. This is called the star HTML hack.

However, you might want to take a look at this article. Might be interesting to you . Uses an image but heck, if you want to go that route...

[beyre]

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 =)

[RyanReese]

You're welcome . I had some free time today afterwork so I thought I'd stop on by here.

[NuttySkunk]

Glad it worked