CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
rlemon
rlemon

Reputation: 17666

twitter bootstrap thumbnails not aligning properly anywhere but Chrome + Windows XP

Ok so I'm prototyping a site for work and I have run into a small snag using the thumbnails as part of Twitter Bootstrap

My issue is very easy to see and is applicable in every browser I've tested but Chrome 20.0.1132.57 (Official Build 145807) m on Windows XP SP3.

If you goto the page you will likely see something like this: enter image description here however When I check this on Windows + Chrome the thumbnails all line up properly (no whitespace on the second row on the left.) see below enter image description here

Here is the markup I used (I've looked it over thrice now and cannot see a mistake.. so i'll post it all incase it somehow is malformed?): 

<ul class="thumbnails">
    <li class="span3" id="c4">
    <div class="thumbnail vcard">
        <h4>AG Dryer Services, Inc.</h4>
        <p>
            <address>
            234 N. Tyler street<br>
             P. O. Box 450<br>
             Elm Creek NE 68836, USA<br>
            <br>
             Phone: 1-308-856-4636<br>
             Fax: 1-308-856-4641 </address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c5">
    <div class="thumbnail vcard">
        <h4>Advanced Grain Handling</h4>
        <p>
            <address>
            823 Main St West<br>
             Mayville ND 58257, USA<br>
            <br>
             Phone: 1-701-788-8927</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c6">
    <div class="thumbnail vcard">
        <h4>Whitcomb Brothers Crane Service</h4>
        <p>
            <address>
            16710 90th Ave<br>
             Atwater MN 56209, USA<br>
            <br>
             Phone: 1-320-974-8337<br>
             Fax: 1-320-974-8837</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c8">
    <div class="thumbnail vcard">
        <h4>Sims Construction Co.</h4>
        <p>
            <address>
            1860 St Rt 56 SW<br>
             London OH 43140, USA<br>
            <br>
             Phone: 1-740-852-4137<br>
             Fax: 1-740-852-4729</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c10">
    <div class="thumbnail vcard">
        <h4>Elevator Services &amp; Storage, Inc.</h4>
        <p>
            <address>
            312 W Main St.<br>
             Beaverdam, OH 45808, USA<br>
            <br>
             Phone: 1-419-643-5111<br>
             Fax: 1-419-643-4762</address>
        </p>
        <a href="http://www.essicompanies.com" class="btn btn-primary" target="_blank">Website</a><a href="mailto:[email protected]" class="btn btn-success">Email</a>
    </div>
    </li>
    <li class="span3" id="c12">
    <div class="thumbnail vcard">
        <h4>General Steel Crane &amp; Rigging</h4>
        <p>
            <address>
            P.O. Box 1078<br>
             Hopkinsville KY 42241<br>
            <br>
             Phone: 1-270-886-8857<br>
             Fax: 1-419-643-4762</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c7">
    <div class="thumbnail vcard">
        <h4>Northern Grain Design &amp; Const.</h4>
        <p>
            <address>
            8015 highway 7, SE<br>
             Clara City MN 56222, USA<br>
            <br>
             Phone: 1-320-367-2881<br>
             Fax: 1-320-367-2879</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c9">
    <div class="thumbnail vcard">
        <h4>Miller Agri. Sales</h4>
        <p>
            <address>
            103 Sycamore<br>
             Friend NE 68359, USA<br>
            <br>
             Phone: 1-402-947-9881<br>
             Fax: 1-402-947-9801</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
    <li class="span3" id="c11">
    <div class="thumbnail vcard">
        <h4>Innovative Electrical Solutions. LLC.</h4>
        <p>
            <address>
            11 W. Wilson<br>
             P.O. Box 202<br>
             Henning IL 61832, USA<br>
            <br>
             Phone: 1-217-286-3280</address>
        </p>
        <a href="#" class="btn btn-primary" disabled>Website</a><a href="#" class="btn btn-success" disabled>Email</a>
    </div>
    </li>
</ul>

and the bootstrap css file I have made some very minor changes (link colours and stuff with the tabs/background colours) but nothing to do with thumbnails or the grid system.

Please any help would be appreciated, I'm really scratching my head here.

Upvotes: 3

Views: 5252

Answers (2)

Ash
Ash

Reputation: 9081

I had this same issue recently, but I didnt want to fix the widths of the grid (not sure if thats what youre looking for?) But this is the amazing lib that got me around this VERY quickly and smoothly -

http://masonry.desandro.com/

Thanks,

Ash.

Upvotes: 0

Esailija
Esailija

Reputation: 140228

Giving them height fixes it:

.thumbnails > li {
    float: left;
    margin-bottom: 18px;
    margin-left: 20px;
    height: 200px;
}

Upvotes: 5

Related Questions