Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

Undesired white space at the bottom of the Woo Flexslider

Hi, the slider (Woo Flexslider) on this page www.ajp.cool has an undesired white space at the bottom.

Originally there was no white space at the bottom. Also the Pause/Play button was placed on the top of the image (covering the image, so to say), not below of it.

But since I've added the text (the title of the image - bottom right corner of the slider, see

<a href=""><span class="slider-text"></span></a>

) this white space appeared. Now I would like to get rid of it. But how?

It looks like the text although positioned relatively (position: relative;) somehow needs to take some space, and as it cannot take the space where it is placed (on the top of the image, covering the image), it takes the space below the image.

Chrome's Inspect Element shows that there is a ::after element just before the closing of the ul tag. Like this:

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="#">
            <a href=""><span class="slider-text"></span></a>
        </li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        ::after
    </ul>
</div>

Could it be that that ::after is making this white space?

Or the problem lies within 

<a href=""><span class="slider-text"></span></a>

element? CSS for .slider-text is:

.slider-text {
    position: relative;
    bottom: 100px;
    padding: 10px 25px;
    color: white;
    right: 5%;
    float: right;
    font-size: 22px;
    font-size: 2.2rem;
    display: block;
}

Can you help?

4 Answers

Jason Brooks
Jason Brooks
1,362 Points
Jason Brooks
Jason Brooks
1,362 Points

So I've looked up some info on the ::after pseudo-element, and the way it's used here (in the HTML) seems odd. Can you search in the CSS to find how ::after is implemented? I would expect something like:

li ::after { css declarations; }

So perhaps there's something in its CSS description that alters the positions of something (does it have it's own "position: relative" declaration?)...

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

The only time ::after is mentioned in flexslider.css file is:

.slides:after {
content: "\0020"; 
display: block; 
clear: both; 
visibility: hidden; 
line-height: 0; 
height: 0;
}

But .slides is a class for ul (please have a look at my code above, ul is a slider and li is a singular slide inside the slider)

And also from Chorme Inspect Element it is visible, that <li> has a "position:relative".

Does that tell you anything?

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, again,

I've found this post: http://stackoverflow.com/questions/17729633/flexslider-2-captions-over-image-are-shifting-nav-controls

Which links to this JS Fiddle: http://jsfiddle.net/isherwood/aMDLP/2/

Just to test it I've changed position:relative to position:absolute. Like this:

.slider-text {
    position: absolute; /*befor it was position: relative */
    bottom: 50px;
    padding: 10px 25px;
    color: white;
    right: 5%;
    float: left;
    font-size: 22px;
    font-size: 2.2rem;
    display: block;
}

And it looks perfect.

Jason Brooks
Jason Brooks
1,362 Points
Jason Brooks
Jason Brooks
1,362 Points

First off, I like your artwork!

Second, I'm wondering if the slider-text's "float: right" is bumping the pause button to the next line... and since your bottom is defined (i.e. 100px from the bottom of the image--that is to say, while the text is floating left-right, it's fixed vertically), perhaps there's not enough room for the pause button inside the image. Just for giggles (and it may not match your aesthetics, but try "float: left" for the text, and see if the pause button moves back in to the image.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Thanks, Jason. The artist although is my friend. I'm just building the website for him :)

float:left unfortunately does not help

look at www.ajp.cool now

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

But the thing is that before I've used float: right or float:left the white space was only one line high.

Since I'm using float: righ it is two lines heigh - too heigh to ignore the mistake.

So if you have any more hints, they are more than welcome

Jason Brooks
Jason Brooks
1,362 Points
Jason Brooks
Jason Brooks
1,362 Points

Interesting result. Glad it works!

I was looking in the slides:after, and noticed a "clear: both"--and thought that maybe was clearing what used to be called a "clearing div" after the slides element, and thereby pushing the pause button to the next line. But you're right, making the text location absolute overrides (or ignores?) the position of any other element, leaving other elements unaffected (I think).

Either way, thanks for the discussion--I think I learned a thing or two!

Jason

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Do you think that the solution with position: absolute is good enough (I mean permanent and stable)

Namely, I've done it by pure luck, not knowing at all what I'm doing, just following your trach that something could be wrong with position: relative.

Jason Brooks
Jason Brooks
1,362 Points
Jason Brooks
Jason Brooks
1,362 Points

Hey Maja,

Sorry for the delay, I don't get much time to work on this stuff.

I don't see a problem with it. If it's CSS 2.0-compliant (which I believe it is), you should be good to go. See:

http://www.css-validator.org

I think CSS 3.0 is out, but I'm not sure. I think the most complex part of your slider is the slider and the code behind it--the various images characteristics, the transitions, etc. The locations of the text and the pause button don't change with each slide, so if it works for one, it should work for all--and future images as well.

For reference, I'm no pro--this just makes sense to me. Also, can't hurt to find a service that will validate your site on multiple browsers and versions. There are a number out there, some for free.

Good luck!

Jason

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Thank you.