5 replies [Last post]
kgeary83
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2009-03-03
Posts: 3
Points: 0

have an s3slider slide show on www.karate-usa.com/testhome

As you can see, the

    bullet point is showing up next to the slideshow and it's not supposed to be. Here is the CSS:

#s3slider { 
   width: 840px; /* important to be same as image width */ 
   height: 250px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}
 
#s3sliderContent {
   width: 840px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}
 
.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}
 
.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 16px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 840px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   bottom: 0;
 
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image 
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
 
.clear {
   clear: both;
}

And the markup:

<div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <a href="#"><img src="http://www.karate-usa.com/slideshow/slide1.jpg" /></a>
          <span>This is test text.</span>
      </li>
      <li class="s3sliderImage">
          <a href="#"><img src="http://www.karate-usa.com/slideshow/slide2.jpg" /></a>
          <span>This is more test text.</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

Thanks so much!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's the script that is at

It's the script that is at fault, it's adding an inline style of display:list-item to bring back the image after changeover; by adding padding-left I was able to remove the room needed to display the bullet and enabled the image to run the full width, but that was inline styling, you can play around and try and ensure that margins and paddings applied to ul/LI elements are cleared, you could also hack the script and change the display value from list-item to block perhaps; failing that find another script as there are hundreds of these galleries around that don't have this problem.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kgeary83
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2009-03-03
Posts: 3
Points: 0

Hugo wrote:It's the script

Hugo wrote:

It's the script that is at fault, it's adding an inline style of display:list-item to bring back the image after changeover; by adding padding-left I was able to remove the room needed to display the bullet and enabled the image to run the full width, but that was inline styling, you can play around and try and ensure that margins and paddings applied to ul/LI elements are cleared, you could also hack the script and change the display value from list-item to block perhaps; failing that find another script as there are hundreds of these galleries around that don't have this problem.

It's not the script. I've seen the script demo'd on about 50 sites and none of them are having this problem.

liam.smart
Offline
Enthusiast
Dundee, Scotland
Last seen: 13 years 43 weeks ago
Dundee, Scotland
Joined: 2008-06-26
Posts: 164
Points: 0

line 453 of your CSS add

line 453 of your CSS add 'padding:0;' That gets rid.

Looks like the 'display:list-item' is a jQuery default for flipping between an li's visibility as I cant see where he is adding the display properties (its a small script so its def not being set in there). I dnt know jQuery though but he must be calling a default class within the library.

Many thanks,
Liam
www.liamsmart.co.uk

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 4 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

kgeary83 wrote:Hugo

kgeary83 wrote:
Hugo wrote:

It's the script that is at fault, it's adding an inline style of display:list-item to bring back the image after changeover; by adding padding-left I was able to remove the room needed to display the bullet and enabled the image to run the full width, but that was inline styling, you can play around and try and ensure that margins and paddings applied to ul/LI elements are cleared, you could also hack the script and change the display value from list-item to block perhaps; failing that find another script as there are hundreds of these galleries around that don't have this problem.

It's not the script. I've seen the script demo'd on about 50 sites and none of them are having this problem.

Ok fair enough that was a rash and unusually - for me - wrong Smile but did you then actually read the rest of what I wrote and attempt to deal with the padding? or indeed list-style:none;

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

kgeary83
Offline
newbie
Last seen: 13 years 48 weeks ago
Joined: 2009-03-03
Posts: 3
Points: 0

List style none didn't

List style none didn't work.

I set the padding to 0 and it fixed it.

Thanks everyone for the help!