CODEWITHSUNDEEP
cssgoogle-chrome
Cool Yuri
Cool Yuri

Reputation: 17

CSS border cut off in Chrome

In chrome my image borders are cut off on the right side enter image description here

but in other browsers it looks fine it only happens in Chrome. Is there any fix for this? here's the live version of the site http://www.blackrockshooter.nu

Upvotes: 0

Views: 15710

Answers (4)

Tyler Eich
Tyler Eich

Reputation: 4248

CSS:

.box-images img {
    box-sizing: border-box; /* add this */
    -moz-box-sizing: border-box; /* Firefox */
    -webkit-box-sizing: border-box; /* Older Webkit browsers */

    border: 3px solid #1f5bbb;
    float: left;
    padding: 5px;
}

Information on box-sizing

Upvotes: 4

DaniP
DaniP

Reputation: 38252

Change the property column-gap to 0 :

.imagecontent {
  -webkit-column-gap:0;
  column-gap:0;
}

Upvotes: 0

Kamlesh
Kamlesh

Reputation: 529

Please change CSS 

.box-images img {
    border: 3px solid #1f5bbb;
    float: left;
    /*padding: 5px;*/
}
.smallinfo {
    color: #FFF;
    background-color: #1f5bbb;
    float: left;
    width: 100%;
    border-right-width: 3px;
    border-left-width: 3px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #1f5bbb;
    border-left-color: #1f5bbb;
    /*padding-right: 5px;*/
    padding-bottom: 5px;
    /*padding-left: 5px;*/
    font-weight: bold;
    font-size: 0.75em;
    text-align: center; 
}

Upvotes: 0

chen
chen

Reputation: 407

update .imagecontent like below:

.imagecontent { -moz-column-count: 4; -moz-column-gap: 6px; width: 960px; }

then the border will come out again

Upvotes: 0

Related Questions