Help with CSS. Can't quite get this right.



What I need is:
topheader: height to be 86px with 2px bottom border (#666666)
topbar:    height to be 76px with 2px bottom border (#666666)
sliderbg:  height to be 280px with 2px bottom border (#666666)
subheader: height to be 45px with 2px bottom border (#666666)

I also need topheader AND topbar to remain at top when scrolling. If it takes combining them into one div, that's OK.

The index page is the only page to have the slider, the other pages will have the subheader.

I have also seen a problem with the .banner .stripe in IE9. It shows at the bottom of the slider and also about 2/3 way to top
of slider.

Any help here will be appreciated.
LVL 27
Eddie ShipmanAll-around developerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

To get the topbar to stay in place:

in core5.css
.topbar {
    background: url("../images/bgHeader2.png") repeat scroll 0 0 transparent;
    border-bottom: 2px solid #666666;
    position: relative;
    top: 86px;

Open in new window

.topbar {
    background: url("../images/bgHeader2.png") repeat scroll 0 0 transparent;
    border-bottom: 2px solid #666666;
    position: fixed;
    top: 86px;

Open in new window

To prevent the sliderbg from conflicting with the topbar, change its top from 86  to 222 (86 + 136 = 222)

I noticed that the changes for index.html make the top part of the content in aboutus.html float underneath the topbar.  You'll need to play with your margins and heights to get everything to line up on both pages.  

In a nutshell, though, "position:fixed" is how you tell it to stay anchored at a certain location.  z-index:9999 prevents your slider images from appearing on top of it.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eddie ShipmanAll-around developerAuthor Commented:
I have made some very good changes based on your input. It looks greate. But what is causing the problem in IE9 with the slider? It is especially apparent when the 2 slides with white backgrounds are showing.

Eddie ShipmanAll-around developerAuthor Commented:
I figured out the IE9 problem. I removed the position:absolute in the .banner .stripe, set the line-height to 65px.
Then I also removed position: absolute for .banner .stripe a.btnLeft and .banner .stripe a.btnRight.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.