CODEWITHSUNDEEP
htmlcssjquery-plugins
Jeremy Stone
Jeremy Stone

Reputation: 350

Unslider image problems

I'm using Unslider to show photos on the home page of a website I'm creating, but the images are surrounded by what looks to be padding - and there is no padding in my css. How can I fix this? It's making my clean gallery look awful.

Unslider plugin found here: http://unslider.com

Here's the HTML:

<div class="banner">
    <ul>
        <li><img src="media/duo.jpg" alt="Duo"/></li>
        <li><img src="media/lastshot.jpg" alt="Last"/></li>
        <li><img src="media/rose.jpg" alt="rose"/></li>
        <li><img src="media/r0se.jpg" alt="D"/></li>
    </ul>
</div>

CSS:

.banner {
position: relative;
width: 100%;
overflow: auto;

font-size: 18px;
line-height: 24px;
text-align: center;

color: #FFFFFF;
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);
background: #000000;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}

 banner ul {
    list-style: none;
    width: 300%;
}
.banner ul li {
    display: inline-block;
    float: left;
    width: 33%;
    min-height: 350px;

    -o-background-size: 100% 100%;
    -ms-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;

    box-shadow: inset 0 -3px 6px rgba(0,0,0,.1);
}

And here's a screenshot of what I'm talking about: enter image description here

Upvotes: 0

Views: 2457

Answers (2)

Grzes Slania
Grzes Slania

Reputation: 602

<ul> elements come with default padding value. I had the same problem. I solved it by adding padding:0px to the .banner ul style.

Upvotes: 2

Sergio Ramirez
Sergio Ramirez

Reputation: 680

Maybe Images have a default padding value, add padding:0px; to the css file to ".banner ul li" and ".banner ul li img"

Upvotes: 0

Related Questions