flexslider not positioning slides correctly using vertical animation

Question

I'm having an issue with flexslider where slides are spacing unevenly when I use the "vertical" slide transition.

For instance, the first slide will start out looking like it has ~20px of padding above it, bumping about half of the caption off the bottom. Each new slide compounds the problem until the slider resets. This only happens when I use the "vertical" transition.

In the flexslider documentation, it reads:

The vertical slide animation does not enjoy the same organic sizing as the horizontal animation, and the slides must be equal height. If you have slides of varying height while using the vertical direction, your slides will space incorrectly.

However, each of my slides are exactly the same height / width.

Here is the basic HTML code:

<div class="flexslider">
    <ul class="slides">
        <li>
            <img src="myimage" />
            <h1>Title 1</h1>
        </li>
        <li>
            <img src="myimage2" />
            <h1>Title 2</h1>
        </li>
        <li>
            <img src="myimage3" />          
            <h1>Title 3</h1>
        </li>
    </ul>
</div>

Here is the relevant CSS:

/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

/* Clearfix for the .slides element */
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} 
html[xmlns] .slides {display: block;} 
* html .slides {height: 1%;}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {display: block;}

/* FlexSlider Default Theme
*********************************/
.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;}
.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;}
.loading .flex-viewport {max-height: 300px;}
.flexslider .slides {zoom: 1;}

.carousel li {margin-right: 5px}

I made a jsFiddle where you can see the slides out of position. I've tried zeroing in and adjusting margins. I'm at the point where I need some help because I think it has something to do with the inline CSS that the Flexslider script is injecting.

Thanks in advance to anyone who can help with this!

UPDATE: Found the fix. H1 tag had browser default margin on it. Simple fix in the answer below.

Also, there's an orphan HTML tag in there: <div class="figcaption"> — isherwood
I don't see the problem in Chrome. What browser are you using? Here's an updated fiddle: jsfiddle.net/isherwood/nwtwW/2 — isherwood
ok I'm sorry - I must not have updated it, or used the wrong link. Are you seeing the issue now? jsfiddle.net/timshutes/nwtwW/1 I caught the orphan tag and fixed it earlier, but the fiddle link was wrong. Sorry about that! — timshutes
I do see the problem. I had inadvertently set my updated fiddle to horizontal. Too many things at once. — isherwood

timshutes timshutes · Accepted Answer · 2013-07-18T17:08:23

After much trial and error, I discovered the problem was the <H1> tag. The browser was applying a default margin, which made the slides bigger than the flexslider script detected.

The fix is simple. Just add:

.slides li h1 {margin:0; padding: 0;}

See new fiddle with the fix applied.

Hope this helps someone else.

flexslider not positioning slides correctly using vertical animation

1 Answers