Solved

A Little CSS Help?

Posted on 2012-03-15
8
232 Views
Last Modified: 2012-03-21
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...
0
Comment
Question by:kevp75
  • 4
  • 3
8 Comments
 
LVL 21

Assisted Solution

by:Kim Walker
Kim Walker earned 250 total points
Comment Utility
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.
0
 
LVL 25

Author Comment

by:kevp75
Comment Utility
The header should be above the middle area, the footer should be above the middle area.  page_body is the middle
0
 
LVL 16

Expert Comment

by:s8web
Comment Utility
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.
0
 
LVL 25

Author Comment

by:kevp75
Comment Utility
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 :)
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 25

Author Comment

by:kevp75
Comment Utility
alright.   if you can help with this one, you get the points and grade:

http://new.o7thwebdesign.com/

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?
0
 
LVL 16

Accepted Solution

by:
s8web earned 250 total points
Comment Utility
Try clearing your float between lines 63 and 64.

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

You should make a clear class if you don't have one already, but for troubleshooting this will do.
0
 
LVL 16

Expert Comment

by:s8web
Comment Utility
Just noticed another float. If that doesn't do it, try clearing after </section> as well.
0
 
LVL 25

Author Comment

by:kevp75
Comment Utility
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
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Remove 'disabled' attribute 6 25
Library to convert HTML to PDF. 8 41
razorCMS: Change Menu Font 4 22
HTML CSS 7 13
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now