Possible issue with many thumbnails

KrunchMuffin commented 12 years ago

Here is a pic to show what I am referring to. Below that is the code. This is for 2.0.3. Pic was taken in Chrome 20. Happens in FF 12 as well. Happens with or without the captions. And seems random.

Alt Text

<div class="row">
        <div class="span12">

                <ul class="thumbnails">

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="0_SZsWV66V0" data-title="IMG_1063.MOV" class="thumbnail"><img src="http://i.ytimg.com/vi/0_SZsWV66V0/default.jpg" alt="IMG_1063.MOV"></a>
                                <div class="caption">
                                    <h5>IMG_1063.MOV</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="6dbMF3mWS8Y" data-title="2002 chevy s10 blazer alternator noise?" class="thumbnail"><img src="http://i.ytimg.com/vi/6dbMF3mWS8Y/default.jpg" alt="2002 chevy s10 blazer alternator noise?"></a>
                                <div class="caption">
                                    <h5>2002 chevy s10 blazer alternator noise?</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="LE-_bxWUuj0" data-title="chevy blazer 10 replacing pulley.mp4" class="thumbnail"><img src="http://i.ytimg.com/vi/LE-_bxWUuj0/default.jpg" alt="chevy blazer 10 replacing pulley.mp4"></a>
                                <div class="caption">
                                    <h5>chevy blazer 10 replacing pulley.mp4</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="sC9rnzrzawo" data-title="1994 Chevrolet S10 Blazer Used Cars Portland OR" class="thumbnail"><img src="http://i.ytimg.com/vi/sC9rnzrzawo/default.jpg" alt="1994 Chevrolet S10 Blazer Used Cars Portland OR"></a>
                                <div class="caption">
                                    <h5>1994 Chevrolet S10 Blazer Used Cars Portland OR</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="BWmbbxc2yQ0" data-title="12C0271 1996 CHEVY BLAZER S10,4.3,AT,4X4,261261 MILES,MORRISON'S AUTO SALVAGE YARD" class="thumbnail"><img src="http://i.ytimg.com/vi/BWmbbxc2yQ0/default.jpg" alt="12C0271 1996 CHEVY BLAZER S10,4.3,AT,4X4,261261 MILES,MORRISON'S AUTO SALVAGE YARD"></a>
                                <div class="caption">
                                    <h5>12C0271 1996 CHEVY BLAZER S10,4.3,AT,4X4,261261 MILES,MORRISON'S AUTO SALVAGE YARD</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="VS62VITXpQ8" data-title="97 CHEVY S10 BLAZER FOR SALEsold! 1500" class="thumbnail"><img src="http://i.ytimg.com/vi/VS62VITXpQ8/default.jpg" alt="97 CHEVY S10 BLAZER FOR SALEsold! 1500"></a>
                                <div class="caption">
                                    <h5>97 CHEVY S10 BLAZER FOR SALEsold! 1500</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="VKzpVi2DqGs" data-title="JW's S10 Blazer at BMR 2012" class="thumbnail"><img src="http://i.ytimg.com/vi/VKzpVi2DqGs/default.jpg" alt="JW's S10 Blazer at BMR 2012"></a>
                                <div class="caption">
                                    <h5>JW's S10 Blazer at BMR 2012</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="KGZpNXY5ucQ" data-title="2000 Chevrolet Truck BLAZER S10/JIMM SN: Q0192" class="thumbnail"><img src="http://i.ytimg.com/vi/KGZpNXY5ucQ/default.jpg" alt="2000 Chevrolet Truck BLAZER S10/JIMM SN: Q0192"></a>
                                <div class="caption">
                                    <h5>2000 Chevrolet Truck BLAZER S10/JIMM SN: Q0192</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="oHtVusgS0G0" data-title="s10 blazer on grand stair case disney ok" class="thumbnail"><img src="http://i.ytimg.com/vi/oHtVusgS0G0/default.jpg" alt="s10 blazer on grand stair case disney ok"></a>
                                <div class="caption">
                                    <h5>s10 blazer on grand stair case disney ok</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="pOi1vrjzeYs" data-title="big block S10 blazer" class="thumbnail"><img src="http://i.ytimg.com/vi/pOi1vrjzeYs/default.jpg" alt="big block S10 blazer"></a>
                                <div class="caption">
                                    <h5>big block S10 blazer</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="QvD5plnYVfM" data-title="cherry bomb chevy blazer s10 2002" class="thumbnail"><img src="http://i.ytimg.com/vi/QvD5plnYVfM/default.jpg" alt="cherry bomb chevy blazer s10 2002"></a>
                                <div class="caption">
                                    <h5>cherry bomb chevy blazer s10 2002</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="cMJaIFo3R3U" data-title="2002 chevy s10 blazer with duratrac tires and blizzard" class="thumbnail"><img src="http://i.ytimg.com/vi/cMJaIFo3R3U/default.jpg" alt="2002 chevy s10 blazer with duratrac tires and blizzard"></a>
                                <div class="caption">
                                    <h5>2002 chevy s10 blazer with duratrac tires and blizzard</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="sRq2ohp8A7o" data-title="How to Install the Fuel Pump E3992M in 1998-2005 Chevrolet S10 Blazer, GMC S15 Jimmy, Olds Bravada" class="thumbnail"><img src="http://i.ytimg.com/vi/sRq2ohp8A7o/default.jpg" alt="How to Install the Fuel Pump E3992M in 1998-2005 Chevrolet S10 Blazer, GMC S15 Jimmy, Olds Bravada"></a>
                                <div class="caption">
                                    <h5>How to Install the Fuel Pump E3992M in 1998-2005 Chevrolet S10 Blazer, GMC S15 Jimmy, Olds Bravada</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="ZLqUlJz9-gc" data-title="How to install Fuel Pump E3953M in 1997-1998 Chevrolet S10 Blazer, GMC S15 Jimmy" class="thumbnail"><img src="http://i.ytimg.com/vi/ZLqUlJz9-gc/default.jpg" alt="How to install Fuel Pump E3953M in 1997-1998 Chevrolet S10 Blazer, GMC S15 Jimmy"></a>
                                <div class="caption">
                                    <h5>How to install Fuel Pump E3953M in 1997-1998 Chevrolet S10 Blazer, GMC S15 Jimmy</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="PUIKrflxyaQ" data-title="How to Install Fuel Pump E3992M 1996 1997 Chevy Tahoe and GMC Yukon (E3932M)" class="thumbnail"><img src="http://i.ytimg.com/vi/PUIKrflxyaQ/default.jpg" alt="How to Install Fuel Pump E3992M 1996 1997 Chevy Tahoe and GMC Yukon (E3932M)"></a>
                                <div class="caption">
                                    <h5>How to Install Fuel Pump E3992M 1996 1997 Chevy Tahoe and GMC Yukon (E3932M)</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="b_Q5sIxZdtE" data-title="BLAZER s10 MAGNAfLOW EXHAUST" class="thumbnail"><img src="http://i.ytimg.com/vi/b_Q5sIxZdtE/default.jpg" alt="BLAZER s10 MAGNAfLOW EXHAUST"></a>
                                <div class="caption">
                                    <h5>BLAZER s10 MAGNAfLOW EXHAUST</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="iBOB62jLjAs" data-title="Chevy s10 blazer 2.8 v6" class="thumbnail"><img src="http://i.ytimg.com/vi/iBOB62jLjAs/default.jpg" alt="Chevy s10 blazer 2.8 v6"></a>
                                <div class="caption">
                                    <h5>Chevy s10 blazer 2.8 v6</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="vQGNEiyZv1g" data-title="1988 Chevy S-10 Blazer Vacuum Issues" class="thumbnail"><img src="http://i.ytimg.com/vi/vQGNEiyZv1g/default.jpg" alt="1988 Chevy S-10 Blazer Vacuum Issues"></a>
                                <div class="caption">
                                    <h5>1988 Chevy S-10 Blazer Vacuum Issues</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="5Hv70TkO88Y" data-title="12B0162 2002 CHEVY S10 BLAZER,4.3,AT,4X4,120522 MILES,MORRISON'S AUTO SALVAGE YARD" class="thumbnail"><img src="http://i.ytimg.com/vi/5Hv70TkO88Y/default.jpg" alt="12B0162 2002 CHEVY S10 BLAZER,4.3,AT,4X4,120522 MILES,MORRISON'S AUTO SALVAGE YARD"></a>
                                <div class="caption">
                                    <h5>12B0162 2002 CHEVY S10 BLAZER,4.3,AT,4X4,120522 MILES,MORRISON'S AUTO SALVAGE YARD</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="S_XpKM6rRPM" data-title="S10 Blazer Fender Install" class="thumbnail"><img src="http://i.ytimg.com/vi/S_XpKM6rRPM/default.jpg" alt="S10 Blazer Fender Install"></a>
                                <div class="caption">
                                    <h5>S10 Blazer Fender Install</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="YcKfSHoEqis" data-title="S10 Blazer Fenders Painted Up" class="thumbnail"><img src="http://i.ytimg.com/vi/YcKfSHoEqis/default.jpg" alt="S10 Blazer Fenders Painted Up"></a>
                                <div class="caption">
                                    <h5>S10 Blazer Fenders Painted Up</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="ZdwZ8lorCMc" data-title="1994 Chevrolet S10 Blazer Used Cars Westminster-Denver CO" class="thumbnail"><img src="http://i.ytimg.com/vi/ZdwZ8lorCMc/default.jpg" alt="1994 Chevrolet S10 Blazer Used Cars Westminster-Denver CO"></a>
                                <div class="caption">
                                    <h5>1994 Chevrolet S10 Blazer Used Cars Westminster-Denver CO</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="iFMIcUUNnXU" data-title="Grays Blazer making its way up the embankment" class="thumbnail"><img src="http://i.ytimg.com/vi/iFMIcUUNnXU/default.jpg" alt="Grays Blazer making its way up the embankment"></a>
                                <div class="caption">
                                    <h5>Grays Blazer making its way up the embankment</h5>
                                </div>
                            </div>
                        </li>

                        <li class="span3">
                            <div class="thumbnail">
                                <a href="#" data-videoid="M1aiKWBfWps" data-title="1991 s10 blazer on 20" iroc="" rims"="" class="thumbnail"><img src="http://i.ytimg.com/vi/M1aiKWBfWps/default.jpg" alt="1991 s10 blazer on 20" iroc="" rims"=""></a>
                                <div class="caption">
                                    <h5>1991 s10 blazer on 20" iroc rims</h5>
                                </div>
                            </div>
                        </li>

                </ul>

        </div>
    </div>

kcivey commented 12 years ago

It's happening because your captions have different heights, so the float isn't going to work nicely, since it bumps into the long one when it goes to the next row. Set them to have the same height and you should be OK (assuming the images are already the same height).

flipactual commented 12 years ago

Try adding the following css(of course it'll work in less as well):

.thumbnail p {
height: 36px;
overflow: hidden;
}

Assuming you're using a line height of 18px, this should show the first two lines of text and hide any overflow.

If all your images are the same size, this will make all your thumbnail boxes the same size too.

Give it a shot and see if your images line up better.

KrunchMuffin commented 12 years ago

it wasn't working, then i realized the p should be h5, now it works great. thank you, thank you!

darkleaf commented 12 years ago

.span3:nth-child(5) {
  clear: left;
}

twbs / bootstrap

Possible issue with many thumbnails #3317