A Little CSS Help?

I have a site in the works here, and I am stuck getting something to work right.

Here is the site: http://new.o7thwebdesign.com/

And the issue is, you should see in the header the white fluffy stuff at the bottom of the blue, and in the footer, you should see the same, but at the top.

I need this to be above the middle area.

I've tried setting the z-index, but that does not appear to be working...
LVL 25
Who is Participating?
Try clearing your float between lines 63 and 64.

       <div style="clear:both"></div>

You should make a clear class if you don't have one already, but for troubleshooting this will do.
Kim WalkerWeb Programmer/TechnicianCommented:
What are you calling the middle area? I do see the things you're saying I should at the bottom of the header and the top of the footer. What should be above the middle? If the page_body section is the middle, then above the middle would also be the bottom of the footer, right? Or do you mean layered on top of the middle? They don't overlap, so that can't be it.

I see several elements with a z-index of 2 so the latter element would be layered on top of a former element in those cases.
kevp75Author Commented:
The header should be above the middle area, the footer should be above the middle area.  page_body is the middle
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

I see the white fluffy stuff in FF and Chrome. I guess this is a cross-browser issue. What browser is the problem?

Nice design by the way. I dig it.
kevp75Author Commented:
WHAT A FLIPPIN TOOL I AM!!!!!!!!!!!!!!!

I was going to send the image along, so I opened it in my graphics software, and 'lo and behold, I cut the flippin image off on the line where it shows on the site...   there is no overlapping, per the image...

DANG IT~!   I could've sworn I put the overlap in...   I'll have to change that.  I'll keep the q open just in-case

Glad you like it :)
kevp75Author Commented:
alright.   if you can help with this one, you get the points and grade:


the middle content area.   IT does not stretch the full height of the content...  short of using javascript to force the height, how do I fix it?
Just noticed another float. If that doesn't do it, try clearing after </section> as well.
kevp75Author Commented:
Actually...  i changed display:block; to display:table; in #inner_page  and it appears to have worked....

I'm running a couple more tests right now on browser shots
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.