I’m writing a wordpress image slider for my wordpress site, the image on the slider keeps overflowing and falling on other content. I’ve tried the code else where on a plain html file it works fine but it does not work on the wordpress theme. I knwo it’s the css but I cannot find the problem. What could I have done wrong? My markup exapmle is here and therefafter my css code for the whole site,
<div style="background-color: gray; height: 300px;padding: 0px 0px 0px 10px;margin:10px 10px 10px 10px;">
<!--Start WOWSlider.com BODY section id = slider-container-->
<div id = "slider-container">
<div class = "ws_images"><ul>
<li><a href = "http://link addresss1.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "Beera-Mu-Klass-Black-500x447" title = "Beera-Mu-Klass-Black-500x447" id = "wows1_0"/></a>Beera mu klass 1</li>
<li><a href = "http://link addresss2.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" title = "Beera-Mu-Klass-White-500x447" id = "wows1_1"/></a>Beera mu klass 2</li>
<li><a href = "http://link addresss3.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "Celebrating-50-Years-500x447" title = "Celebrating-50-Years-500x447" id = "wows1_2"/></a>Celebrating 50 yrs</li>
<li><a href = "http://link addresss4.com"><img src = "http://mysite.loc/files/2012/11/mysite-wall-art-Online29-697x10241.jpg" alt = "mysite-wall-art-Online29-697x1024" title = "mysite-wall-art-Online29-697x1024" id = "wows1_3"/></a>mysite baby!!!</li>
</ul></div>
<div class = "ws_bullets"><div>
<a href = "#" title = "Beera-Mu-Klass-Black-500x447">1</a>
<a href = "#" title = "Beera-Mu-Klass-White-500x447">2</a>
<a href = "#" title = "Celebrating-50-Years-500x447">3</a>
<a href = "#" title = "mysite-wall-art-Online29-697x1024">4</a>
</div></div>
<a href = "#" class = "ws_frame"></a>
<div class = "ws_shadow"></div>
</div>
<script src = "<?php bloginfo('stylesheet_directory'); ?>/js/wowslider.js" type = "text/javascript" charset = "utf-8"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/script.js" type="text/javascript" charset="utf-8"></script>
My Css file.
</div>
/* Global */
* { margin: 0; padding: 0; }
body { font-size: 12px; font-family: verdana, arial, georgia; color: #333333; }
#main_container { width: 1015px; margin: 0 auto; }
h1,h2,h3,h4,h5,p { margin: 10px 0; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
img { border: none; }
a { color: #666; text-decoration: none; }
a:hover { color:#333; }
/* Header */
#header { padding: 10px 0 30px; }
#menu_container { padding-bottom: 25px; }
#menu_container ul { list-style-type: none; margin-right: 25px; float: left; }
#menu_container ul li { float: left; }
#menu_container ul li a { color: #fff; text-decoration: none; background-color: #000; padding: 6px 5px; margin-right: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; display: block; }
#menu_container ul li a:hover { background-color: #858585; }
#menu_container ul li.current-menu-item a, #menu_container ul li.current_page_item a { background-color: #858585; }
#menu_container input[type=text] { width: 172px; height: 25px; background-color: #000; color: #fff; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; float: right; border: none; padding: 0 5px; }
.header_social_icons_cont { float: right; margin-right: 5px; }
.header_social_icons_cont img { float: left; margin-right: 7px; }
/* Content */
.home_post_cont { float: left; margin-right: 34px; width: 228px; min-height: 331px; margin-bottom: 35px; position: relative; }
.home_post_cont_last { margin-right: 0; }
.home_post_cont img { width: 228px; height: 331px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; }
.home_post_cont h3 { font-size: 14px; }
.home_post_cont h3 a { color: #000; text-decoration: none; }
.home_post_cont h3 a:hover { text-decoration: none; color: #666; }
.home_post_content { color: #A0A0A0; font-size: 12px; padding-right: 30px; font-weight: normal; height: 270px; }
.home_post_content .in_title { color: #fff; font-size: 14px; margin: 0; font-weight: bold; }
.home_post_content h4 a { color: #fff; font-size: 14px; margin: 0; }
/*.home_post_cat { position: absolute; bottom: -20px; left: 10px; color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; }*/
.home_post_cat { color: #A0A0A0; font-size: 10px; font-weight: normal; padding-right: 40px; }
.home_post_cat a { color: #A0A0A0 !important; text-decoration: none; }
.home_post_cat a:hover { text-decoration: none; color: #666; }
.single_left { float: left; width: 665px; }
.single_left h1 { font-size: 13px; margin-top: 0; }
.hover_caption {
/* If you can count of CSS3 support: */
background-color: /*rgba(0, 0, 0, 0.7)*/ #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;
/* Or use a transparent image if you need to support bad browsers: */
/*background-image: url(images/hover_caption_bg.png);*/
/* NOTE: If you're img elements have paddings or margins you'll need to
match them here to get things lined up properly. */
}
#commentform input[type=submit] { background-color: #000; border: none; color: #fff; padding: 8px 10px; }
#commentform a { color: #000; }
.commentlist a { color: #000; }
.iphone-home-image { width: 300px !important; }
/* Sidebar */
#sidebar { float: right; width: 270px; }
.side_box { margin-bottom: 25px; }
.side_box h3 { padding: 5px 5px; background-color: #000; margin-top: 0; color: #fff; }
.side_box p { padding: 0px 5px; }
.side_box ul { list-style-type: none; margin-left: 5px; }
.side_box ul li { margin-bottom: 3px; }
.textwidget { padding: 5px; }
/* Footer */
#footer { margin: 25px 0; padding: 12px 0; border-top: 1px solid #CBCBCB; border-bottom: 1px solid #CBCBCB; color: #8C8889; text-align: right; }
#footer a { color: #8C8889; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#infscr-loading { text-align: center; }
@media screen and (max-width: 480px) {
#main_container { width: 320px; }
#menu_container { display: none; }
.home_post_cont { margin-right: auto; margin-left: auto; float: none; clear: both; }
#footer { display: none; }
#commentform textarea { width: 220px; }
#sidebar { display: none; }
.single_left { float: none; width: 228px; margin-left: auto; margin-right: auto; }
.single_left img { width: 228px; height:inherit; }
}
#slider-container {
zoom: 1;
position: relative;
max-width: 920px;
max-height: 300px;
z-index: 100;
border: none;
text-align: left;
}
* html #slider-container{ width:920px }
#slider-container .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#slider-container .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#slider-container .ws_images{
position: relative;
left: 0;
top: 0;
width: 100%;
overflow: hidden;
}
#slider-container .ws_images a{
width:100%;
display:block;
color:transparent;
}
#slider-container img{
max-width: none !important;
}
#slider-container .ws_images img{
width:100%;
border:none 0;
max-width: none;
}
#slider-container a{
text-decoration: none;
outline: none;
border: none;
}
#slider-container .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#slider-container .ws_bullets div{
position:relative;
float:left;
}
#slider-container a.wsl{
display:none;
}
#slider-container .ws_bullets {
padding: 10px;
}
#slider-container .ws_bullets a {
margin-left: 5px;
height: 10px;
width: 10px;
float: left;
border: 1px solid #B8C4CF;
color: transparent;
text-indent: 0px;
background-image:url("data:image/gif;base64,");
position:relative;
}
#slider-container .ws_selbull {
background-color: #B8C4CF;
color: #FFFFFF;
}
#slider-container .ws_bullets a:hover, #slider-container .ws_overbull {
background-color: #dae9f6;
color: #FFFFFF;
}
#slider-container a.ws_next, #slider-container a.ws_prev {
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
position:absolute;
display:none;
top:50%;
margin-top:-15px;
line-height:30px;
z-index:60;
background-color: #000000;
color: #FFFFFF;
padding: 0px 10px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
#slider-container a.ws_next{
right:0;
}
#slider-container a.ws_prev {
left:0;
}
* html #slider-container a.ws_next,* html #slider-container a.ws_prev{display:block}
#slider-container:hover a.ws_next, #slider-container:hover a.ws_prev {display:block}
/* bottom center */
#slider-container .ws_bullets {
top:0;
right: 0;
}
#slider-container .ws-title{
position: absolute;
bottom:0;
left: 0;
margin-right:5px;
z-index: 50;
background-color:#000000;
color:#FFFFFF;
padding:10px 1%;
width:98%;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
opacity:0.55;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=55);
}
#slider-container .ws-title div{
padding-top:5px;
font-size: 12px;
}
#slider-container .ws_images ul{
animation: wsBasic 16.8s infinite;
-moz-animation: wsBasic 16.8s infinite;
-webkit-animation: wsBasic 16.8s infinite;
}
@keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-moz-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 12.5%{left:-0%} 25%{left:-100%} 37.5%{left:-100%} 50%{left:-200%} 62.5%{left:-200%} 75%{left:-300%} 87.5%{left:-300%} }
#slider-container .ws_bullets a img{
text-indent:0;
display:block;
top:12px;
left:-79px;
visibility:hidden;
position:absolute;
border: 2px solid #B8C4CF;
max-width:none;
}
#slider-container .ws_bullets a:hover img{
visibility:visible;
}
#slider-container .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#slider-container .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
background-color:#B8C4CF;
width:157px;
}
#slider-container .ws_bullets .ws_bulframe{
display:none;
top:25px;
overflow:visible;
position:absolute;
cursor:pointer;
border: 2px solid #B8C4CF;
}
#slider-container .ws_bulframe span{
position:absolute;
}
just use
overflow:hiddenin some div.