Hello my wonderful CSS friends! So, today I am having a problem with a slideshow not showing up from some sort of overflow problem that I can't find. I know it is the overflow because when I change it to "visible" the slideshow appears, but my content background disappears and I cannot figure out why this is happening, at all. I have done extensive research on this site and others trying to find a similar problem, but I can't seem to find anything similar.
Here is the code to explain things a little bit more:
CSS for the content:
#body {
background:none #000;
margin-top:21px!important;
}
#body.home {
border:1px solid #4f4f4f;
margin:0 auto;
width:1100px;
}
#body.home div:first-child {
overflow:hidden;
}
#body.home div:first-child div:first-child {
border-bottom:0px solid #4f4f4f;
border-right:1px solid #4f4f4f;
float:left;
padding:0 0 13px;
width:510px;
}
#body.home div:first-child div:first-child h2 {
margin:13px 0 0 20px;
}
#body.home div:first-child div:first-child h2 a {
color:#fff;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
margin:0;
text-decoration:none;
text-transform:uppercase;
}
#body.home div:first-child div:first-child p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:16px 0;
padding:0 30px 0 20px;
}
#body.home div:first-child div:first-child p a {
color:#a5a5a5;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div:first-child div:first-child a {
color:#af0000;
font-size:14px;
font-style:italic;
line-height:18px;
margin:0 0 0 20px;
text-decoration:none;
}
#body.home div:first-child div:first-child a:hover {
color:#ff0000;
text-decoration:none!important;
}
#body.home div:first-child ul {
border-bottom:1px solid #4f4f4f;
list-style:none;
margin:0;
overflow:hidden;
padding:0;
}
#body.home div:first-child ul li:first-child {
border:none;
}
#body.home div:first-child ul li {
border-left:1px solid #4f4f4f;
float:left;
width:auto;
}
#body.home div:first-child ul li h3 {
margin:23px 0 5px 20px;
}
#body.home div:first-child ul li span {
color:#a5a5a5;
display:block;
font-size:14px;
line-height:18px;
margin:1px 0 24px 20px;
}
#body.home div:first-child ul li a img {
border-top:1px solid #4f4f4f;
}
#body.home div {
border-bottom:none;
overflow:hidden;
}
#body.home div div:first-child {
border-bottom:none;
border-right:0px solid #4f4f4f;
float:left;
width:510px;
}
#body.home div div:first-child ul {
border-bottom:none;
}
#body.home div div:first-child ul li:first-child {
width:238px;
}
#body.home div div:first-child ul li {
border-right:1px solid #4f4f4f;
padding:0;
width:239px;
}
#body.home div div:first-child ul li a {
display:block;
float:none;
}
#body.home div div:first-child ul li a img {
border-bottom:1px solid #4f4f4f;
}
#body.home div div:first-child ul li h4 {
margin:9px 30px 0 20px;
}
#body.home div div:first-child ul li h4 {
color:#fff;
float:none;
font-size:14px;
font-style:normal;
font-weight:700;
line-height:18px;
text-decoration:none;
}
#body.home div div:first-child ul li p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:1px 30px 0 20px;
}
#body.home div div:first-child ul li p a {
color:#a5a5a5;
display:inline;
float:none;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div div {
float:left;
width:510px;
}
#body.home div div h3 a {
color:#FFF;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
text-decoration:none;
text-transform:uppercase;
}
#body.home div div ul {
list-style:none;
margin:0;
padding:0;
}
#body.home div div ul li {
border-top:1px solid #4f4f4f;
overflow:hidden;
}
#body.home div div ul li a {
display:block;
float:left;
margin:0 20px 0 0;
}
#body.home div div ul li a img {
border-right:0px solid #4f4f4f;
}
#body.home div div ul li div {
width:298px;
}
#body.home div div ul li div span {
color:#a5a5a5;
display:block;
font-size:11px;
line-height:18px;
margin:11px 0 0;
}
#body.home div div ul li div h4 {
color:#fff;
float:none;
font-size:14px;
line-height:16px;
text-decoration:none;
}
#body.home div div ul li div p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:2px 0 0;
}
#body.home div div ul li div p a {
color:#a5a5a5;
display:inline;
float:none;
margin:0;
text-decoration:underline;
}
#body.home div div ul li div p a.more {
color:#AF0000;
display:inline;
float:none;
font-size:14px;
font-style:italic;
line-height:18px;
text-decoration:none;
}
#body.home div div ul li div p a.more:hover {
color:#ff0000!important;
text-decoration:none!important;
}
The code that controls the overflow I am working with is the third one down:
#body.home div:first-child {
overflow:hidden;
}
This is the only one that makes any changes when I change it to visible.
And here is the CSS for the slideshow:
#slider {
position: relative;
width: 500px;
margin: 0px auto 0px auto;
}
#slider .viewer {
width: 500px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}
#slider .viewer .reel {
display: none;
height: 500px;
}
#slider .viewer .reel .slide {
position: relative;
width: 500px;
height: 500px;
}
Finally, here is the html for the content:
<div id="body" class="home">
<div>
<div><br><br>
<h2><a href="index.html">Welcome to our site!</a </h2>
<p>
Text. Text. Text. Text.
</p>
<a href="services.html">Read More</a> </div>
<div id="slider">
<div class="viewer">
<div class="reel">
<div class="slide"><img src="/images/img1.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img2.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img3.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img4.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img5.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img6.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img7.jpg" width="500" height="500" align="center" title=" " /></div>
<div class="slide"><img src="/images/img8.jpg" width="500" height="500" align="center" title="" /></div>
<div class="slide"><img src="/images/img9.jpg" width="500" height="500" align="center" title="" /></div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#slider').slidertron({
viewerSelector: '.viewer',
reelSelector: '.viewer .reel',
slidesSelector: '.viewer .reel .slide',
advanceDelay: 6000,
speed: 'slow'
});
</script>
If you can see where there would be any overflow anywhere on the slideshow, can you please let me know, because I have been looking at this code for days now and I cannot see where there would be any overflow anywhere. Argh!
Thank you in advance for your time and help.