What is causing the grey line?

Question

I have an image slideshow on my site: http://dev.jmret.com/recruit.php

However i have a problem it has a grey line under the annotation.

see here:

here is the code:

$(function(){
            $('#slides').slides({
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });

How would i get rid of the grey line? That appears? Fixes or points in the right direction are much appreciated. If you view source on the site you will see anything else you need.

Here is the HTML & CSS:

<div id="slides">
            <div class="slides_container" style="overflow: hidden;position: relative;display: inline-block;">
            <div class="slides_control" style="position: relative; width: 3339px; height: 228px; left: -1113px;"><div class="slide" style="position: absolute; top: 0px; left: 2226px; z-index: 0; display: block;">
                        <a href="/eduforschools.php">
                        <img src="img/Slide1.jpg" width="1000px" height="225px" alt="Slide 1"></a>
                        <div class="caption" style="bottom: 0px;">
                            <p>We support recruitment &amp; education in over 140 local schools.</p>
                        </div>
                    </div><div class="slide" style="position: absolute; top: 0px; left: 1113px; z-index: 5; display: block;">
                        <a href="/recruit.php">
                        <img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 1"></a>
                        <div class="caption" style="bottom: 0px;">
                            <p>Apprenticeships – wide range available.</p>
                        </div>
                    </div></div>
                        </div>
            <ul class="pagination"><li class="current"><a href="#0">1</a></li><li class=""><a href="#1">2</a></li></ul></div>

Thanks

It is probably the gap under the img, wich as inline-block stands on the baseline by default. reset vertical-align to img or set it as a block. no css nor html here to go further (in your question) — G-Cyrillus, Mar 16 '16 at 15:47

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

Add this css to your styles:

.slide a img {
   display: block;
}

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default.

from https://stackoverflow.com/a/7774854/5925366

edited May 23 '17 at 12:07

Community

1
1

answered Mar 16 '16 at 15:55

score 0 · Answer 2 · answered Mar 16 '16 at 15:53

0

try adding margin-bottom: 3px; to your.caption class .

answered Mar 16 '16 at 15:53

noel zubin

662
9
11

score 0 · Answer 3 · answered Mar 16 '16 at 15:56

0

this is not a grey line. This is caused by the padding bottom of caption which overflows the image itself. You can fix it by adding a margin-bottom: 5px; to the .caption class

answered Mar 16 '16 at 15:56

lopezi

537
2
7
20

What is causing the grey line?

3 Answers3