I have this slider and above it nav bar with drop downs and the drop downs stay in behind the slider can someone help please.
/* /*
SLIDER
*/
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; z-index: 10 }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 30px;
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb
Are you able to post a live link? That would be easier. And is this happening in a particular browser, like an old version of IE? We at least need to see your HTML. Your CSS above looks like it might have problems, too, if that’s a direct cut and paste. Something is needed between lines 2 and three.
Sorry on local here is the html
<div id=“mainWrapper”>
<div id=“headerWrapper”><img src=“images/logo.png” >
<div id=“navWrapper”>
<ul id=“nav”>
<li><a href=“index.html”>Home</a></li>
<li><a href=“#”>About</a>
<ul>
<li><a href=“about.html”>Our Company</a></li>
<li><a href=“#”>Our Technicians</a></li>
<li><a href=“#”>Testimonials</a></li>
</ul>
</li>
<li><a href=“#”>Services</a>
<ul>
<li><a href=“#”>Residential Service</a></li>
<li><a href=“#”>Commercial Service</a></li>
<li><a href=“#”>Home Protection Plan</a></li>
</ul>
</li>
<li><a href=“#”>Contact Us</a>
<ul>
<li><a href=“contact.html”>Contact Precision Electrical</a></li>
<li> <a href=“#”>Employment Oppertunities</a></li>
</ul>
</li>
<li><a href=“#”>Products</a></li>
<li><a href=“#”>Energy Island</a>
<ul>
<li><a href=“#”>Whole House Power Supply</a></li>
<li><a href=“#”>Solar Energy</a></li>
<li><a href=“#”>Wind Generation</a></li>
</ul>
</li>
<li><a href=“#”>Commercial Energy Services</a>
<ul>
<li><a href=“#”>Lighting Upgrades</a></li>
<li><a href=“#”>Tax Benefits</a></li>
</ul>
</li>
<li><a href=“#”>Service Request</a></li>
</ul>
</div>
</div>
<div style=“clear:both;”></div>
<div id=“mainContent”>
<div class=“centerContent”><div id=“page-wrap”>
<div class="slider-wrap">
<div id="main-photo-slider" class="csw">
<div class="panelContainer">
<div class="panel" title="Panel 1">
<div class="wrapper">
<img src="images/tempphoto-1.jpg" alt="temp" />
<div class="photo-meta-data">
Photo Credit: <a href="http://flickr.com/photos/astrolondon/2396265240/">Kaustav Bhattacharya</a><br />
<span>"Free Tibet" Protest at the Olympic Torch Rally</span>
</div>
</div>
</div>
<div class="panel" title="Panel 2">
<div class="wrapper">
<img src="images/tempphoto-2.jpg" alt="temp" />
<div class="photo-meta-data">
Chicago Bears at Seattle Seahawks<br />
<span>Fifth field goal, overtime win for the Seahawks</span>
</div>
</div>
</div>
<div class="panel" title="Panel 3">
<div class="wrapper">
<img src="images/scotch-egg.jpg" alt="scotch egg" class="floatLeft"/>
<h1>How to Cook a Scotch Egg</h1>
<ul>
<li>6 hard-boiled eggs, well chilled (i try to cook them to just past soft boiled stage, then stick them in the coldest part of the fridge to firm up)</li>
<li>1 pound good quality sausage meat (i used ground turkey meat, seasoned with sage, white pepper, salt and a tiny bit of maple syrup)</li>
<li>1/2 cup AP flour</li>
<li>1-2 eggs, beaten</li>
<li>3/4 cup panko-style bread crumbs</li>
<li>Vegetable oil for frying</li>
</ul>
</div>
</div>
<div class="panel" title="Panel 4">
<div class="wrapper">
<img src="images/tempphoto-4.jpg" alt="temp" />
<div class="photo-meta-data">
A Poem by Shel Silverstein<br />
<span>Falling Up</span>
</div>
</div>
</div>
<div class="panel" title="Panel 5">
<div class="wrapper">
<img src="images/tempphoto-5.jpg" alt="temp" />
<div class="photo-meta-data">
New Video on CSS-Tricks<br />
<span>Using Wufoo for Web Forms</span>
</div>
</div>
</div>
<div class="panel" title="Panel 6">
<div class="wrapper">
<h1>A Tale of Two Cities</h1>
<p><em>Charles Dickins</em></p>
<blockquote>It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to heaven, we were all going direct the other way - in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only.</blockquote>
</div>
</div>
</div>
</div>
<a href="#1" class="cross-link active-thumb"><img src="images/tempphoto-1thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a>
<div id="movers-row">
<div><a href="#2" class="cross-link"><img src="images/tempphoto-2thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#3" class="cross-link"><img src="images/tempphoto-3thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#4" class="cross-link"><img src="images/tempphoto-4thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#5" class="cross-link"><img src="images/tempphoto-5thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
<div><a href="#6" class="cross-link"><img src="images/tempphoto-6thumb.jpg" class="nav-thumb" alt="temp-thumb" /></a></div>
</div>
</div>
</div>
</div>
</div>
<div id=“rightSidebar”><img src=“images/guaranteed.png” alt=“Guarantee 100%” />
<h1>24 Hour Service</h1>
<p></p>
</div>
</div>
<div style=“clear:both;”></div>
<div id=“footer”>
</div>
</div>
and css
/*
CSS Reset
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ‘’;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS Document /
body {
font-size: 0.9em;
color: #221122;
font-family: “Times New Roman”, Times, serif;
background-image: url(…/images/body-bg.png);
background-repeat: repeat-x;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
padding-top: 25px;
padding-bottom: 10px;
font-weight: bold;
}
#mainWrapper {
width: 921px;
text-align: left;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 5px #000000;
}
#headerWrapper {
background-image: url(…/images/header-bg.jpg);
height: 192px;
background-repeat: no-repeat;
}
#headerWrapper img {
padding-top: 5px;
margin-left: 29px;
}
/ MENU /
#navWrapper {
margin-top: 9px;
padding-left: 26px;
}
#nav {
background: #e5e5e5;
float: left;
margin: 0; padding: 0;
/
border: 1px solid white;
border-bottom: none;
*/
z-index: 11;
}
#nav li a, #nav li {
float: left;
}
#nav li {
list-style: none;
position: relative;
}
#nav li a {
padding-left: 18px;
padding-right: 18px;
text-decoration: none;
padding-top: 8px;
padding-bottom: 8px;;
text-decoration: none;
color: white;
background: #292929;
background: -moz-linear-gradient(top, #007229 2px, #028832 18px, #018530 16px);
background: -webkit-gradient(linear, left top, left 25, from(#007229), color-stop(4%, #028832), to(#018530));
/*
border-right: 1px solid #3c3c3c;
border-left: 1px solid #292929;
border-bottom: 1px solid #232323;
border-top: 1px solid #545454;
*/
}
#nav li a:hover {
background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65));
}
/* Submenu */
.hasChildren {
position: absolute;
width: 5px; height: 5px;
background: #007229;
right : 0;
bottom: 0;
}
#nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0; margin: 0;
}
#nav li:hover > ul {
display: block;
}
#nav li ul li, #nav li ul li a {
float: none;
}
#nav li ul li {
_display: inline; /* for IE6 */
}
#nav li ul li a {
width: 170px;
display: block;
}
/* SUBSUB Menu */
#nav li ul li ul {
display: none;
}
#nav li ul li:hover ul {
left: 100%;
top: 0;
}
#nav li ul {
}
#mainContent {
background-image: url(…/images/innerwrapper.png);
background-repeat: repeat-y;
overflow: hidden;
}
.centerContent {
width: 611px;;
float: left;
margin-left: 22px;
padding-bottom: 20px;
}
#rightSidebar {
padding-bottom: 20px;
padding-right: 5px;
padding-left: 5px;
width: 260px;
float: right;
}
#rightSidebar img {
padding-top: 10px;
}
#rightSidebar {
text-align: center;
}
#rightSidebar h1 {
padding-bottom: 15px;
}
#footer {
background-image: url(…/images/footer_bg.png);
height: 42px;
}
#footer p {
font-size: 1.1em;
color: #ffffff;
padding-top: 16px;
padding-left: 10px;
}
#footer a {
text-decoration: none;
color: #000000;
}
#footer .red {
color: #FF0000;
}
#footerExtra {
height: 1em;
}
/*
PAGE STRUCTURE
*/
#page-wrap { width: 500px; margin: 25px auto; position: relative; min-height: 500px;
background: url(…/images/bg.png) top center; }
/* /*
SLIDER
*/
.slider-wrap { width: 419px; position: absolute; top: 87px; left: 40px; z-index: 10 }
.stripViewer .panelContainer
.panel ul { text-align: left; margin: 0 15px 0 30px; }
.stripViewer { position: relative; overflow: hidden; width: 419px; height: 285px; }
.stripViewer .panelContainer { position: relative; left: 0; top: 0; }
.stripViewer .panelContainer .panel { float: left; height: 100%; position: relative; width: 419px; }
.stripNavL, .stripNavR, .stripNav { display: none; }
.nav-thumb { border: 1px solid black; margin-right: 5px; }
#movers-row { margin: -43px 0 0 62px; }
#movers-row div { width: 20%; float: left; }
#movers-row div a.cross-link { float: right; }
.photo-meta-data { background: url(images/transpBlack.png); padding: 10px; height: 30px;
margin-top: -50px; position: relative; z-index: 9999; color: white; }
.photo-meta-data span { font-size: 13px; }
.cross-link { display: block; width: 62px; margin-top: -14px;
position: relative; padding-top: 15px; z-index: 9999; }
.active-thumb { background: transparent url(images/icon-uparrowsmallwhite.png) top center no-repeat; }