Search code examples
jquerycsscycle

jquery Cycle causing border-bottom to disappear


I'm cycling through a number of divs (div.slide). Within each div.slide there are four divs containing image thumbnails. Each of these four divs has a border-bottom set to 1px solid #BBBDC0, however the border-bottom stops displaying once I add the Cycle plugin. I've included the CSS for the relevant div below.

You can see my work here: http://dispose.co/Untitled-2.html

What am I missing? How do I get the border-bottom to display?

Thanks!

div.thumbtile {
width:186px;
height:314px;
margin-top:20px;
border-bottom:1px solid #BBBDC0;
margin-right:22px;
float:left;
text-align:center;
color:#A7A9AB;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}

Solution

  • The bottom bar you're trying to show is hidden because of the specific height you have given to the following containers (elements):

    container

    slider

    .thumbtile

    Increase their height & you'll see the bar. Start with the top one. Also, open up your firefox browser and search for 'firebug'. Install this plugin and view tutorials on it. I think you don't know about this plugin. Otherwise, you probably would not have asked this question.

    hope it helps