CODEWITHSUNDEEP
css
Nicholas Chauvin nxchauvin
Nicholas Chauvin nxchauvin

Reputation: 99

Space underneath list of images HTML/CSS

I am getting a blank space (which is currently a black line) underneath my list when an element is selected (all elements in list are images). I found a few threads suggesting vertical-align:middle and display:inline-block, but neither work or I am putting it in the wrong place here is my code and the JSFiddle :http://jsfiddle.net/6geo6qkv/

HTML

<div id="Gfilter">
    <ul id="grade" class="option-set sort">
        <li>
            <a href="#" data-filter="*" class="selected"><img src="images/Filtre2.png" width="150"/></a>
        </li>
        <li>
            <a href="#" data-filter=".1"><img src="images/Filtre2.png" width="150"/></a>
        </li>
    </ul>
</div>

CSS

#Gfilter {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 0;
    vertical-align: middle;
}

.sort {
    width: 100%;
    font-size:55px;
}

.sort li {
    display:inline-block;
}

.sort ul {
    text-align:center;
}

.selected {
    background:black;
    vertical-align:middle;
}

Upvotes: 1

Views: 73

Answers (1)

A Web-Developer
A Web-Developer

Reputation: 858

Add this to your css

#grade a{
  display:block;
  line-height: 0;
}

Also please fix your HTML, you have a /img> at the end of every img tag which is not necessary.

Upvotes: 2

Related Questions