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

link: http://test.scic.com/files/durable/index.html
and:  http://test.scic.com/files/durable/aboutus.html

CSS:
http://test.scic.com/files/durable/css/core5.css
http://test.scic.com/files/durable/css/style.css

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 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
 
nap0leonCommented:
To get the topbar to stay in place:

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

Open in new window


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

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

slider-stripe-problem.png
0
 
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.
0
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.