Space on the sides of thumbnails (portrait orientation)

[chewieg2]

I've added a border around my thumbnails, but for some reason there is a space between the edge of the image and the border. Strange thing is that it only occurs on the images that have a portrait orientation.

See http://www.pbase.com/chewieg2/may04 for an example.

Can anyone tell me how to get rid of it?

Here's the css code that I used:

div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h1,h2,h3,h4,h5,font, center {
border: 0px;
color: rgb(91, 91, 101);
font: 12px verdana, arial, sans-serif;
}

font {
margin-left: 4px;
margin-right: 4px;
width: 170px;
display: block;
color: rgb(91, 91, 101);
font: 9px Verdana, Tahoma, Helvetica, sans-serif;
letter-spacing: 0px;
}



a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
border: rgb(0, 0, 0) 2px solid;
border-right: rgb(0, 0, 0) 2px solid;
display: block;
background: rgb(238, 237, 234);

}
a.td.thumbnail:hover {
border: rgb(95, 121, 216) 2px solid;
border-right: rgb(95, 121, 216) 2px solid;
display: block;
background: rgb(238, 237, 234);

}


img.display {
border: rgb(0, 0, 0) 2px solid;
border-right: rgb(0, 0, 0) 2px solid;
display: block;
}

Thanks!

[chewieg2]

Can anyone help?

If I get rid of the display: block, it does get rid of the spaces, but now the border on the right side of the thumbnail is missing.

Please help!

[matiasasun]

Can anyone help?

Hi!.. I´m no expert at all. All I do is try until something works. So I´ll give you the resuts of my tries.

First of all: It looks like a problem with Internet Explorer, because Mozilla Firefox (version9) didn´t show any border at all. For some reasons both browsers di work in very different ways.

I did try that in Internet explorer, using the CSS that you had in your gallery and I came out with this one:

Code: Select all

/*
   ::::::: StyleSheet Information :::::::
   http://www.pbase.com/chewieg2/profile
   Style sheet for:   
   http://www.pbase.com/chewieg2/may04
   ::::::::::::::::::::::::::::::::::::::
*/


body{
   margin-bottom: 20px;
   margin-top: 0px;
   background: rgb(238, 237, 234);
   background-attachment: fixed;
   background-image: url(http://genji.image.pbase.com/u47/chewieg2/upload/33889326.emmabkgrd.jpg);
   background-repeat: no-repeat;
   background-position: center;
}


a, a:link,a:visited,a:active {
        color: rgb(108, 138, 246);
        text-decoration: none;
       
}
a:hover {
        color: rgb(48, 78, 209);
        text-decoration: none;
        font-weight: none;
/*Note: Set NONE to bold to make it BOLD again*/
}


a.td.thumbnail, a.td.thumbnail:link, a.td.thumbnail:visited, a.td.thumbnail:active {
        border: rgb(0, 0, 0) 2px solid;
        border-right:  rgb(0, 0, 0) 2px solid;
        background: none;
       
}
a.td.thumbnail:hover            {
        border: rgb(95, 121, 216) 2px solid;
        border-right: rgb(95, 121, 216) 2px solid;
        background: none;
       
}


div,th,tr,table,font,li,ul,form,
blockquote,p,b,i,h4,h5,center {
        border: 0px;
        color: rgb(91, 91, 101);
        font: 12px verdana, arial, sans-serif;
}

font {
        margin-left: 4px;
        margin-right: 4px;
        width: 170px;
        display: block;
        color: rgb(91, 91, 101);
        font: 9px Verdana, Tahoma, Helvetica, sans-serif;
        letter-spacing: 0px;
}


h1, h2 {
        border: rgb(95, 121, 216) 1px dotted;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        margin-bottom: 1em;
        margin-left: -10px;
        margin-right: 0px;
        padding: 5px;
        width: 100%;
        display: block;
        background: rgb(238, 237, 234);
        color: rgb(204, 204, 255);
        font-size: 24px;
        font-weight: bold;
        letter-spacing: 4px;
        text-align: right;
        height: 21px;
        position: relative;
   
}


h3 {
        border-bottom: 1px none;
        border-left: 1px none;
        border-right: 1px none;
        border-top: 1px none;
        padding: 2px;
        width: 400px;
        display: block;
        background: rgb(238, 237, 234);
        color: rgb(238, 237, 234);
        font: 12px;
        font-weight: normal;
        letter-spacing: 0px;
        text-align: center;
}

img.display {
border: rgb(0, 0, 0) 2px solid;
        border-right:  rgb(0, 0, 0) 2px solid;
        display: block;
}


/*make thumb title disappear*/
td.thumbnail,font {
   font-family: Tahoma;
   font-size: 11px;
   color: rgb(238, 237, 234);
   
}

.caption {
  font-size : 17pt;
  color : rgb(91, 91, 101);
font-style: italic;
}


.exif {
  color : rgb(238, 237, 234);
}

.exif { display: none; }
.exif a { display: none; }

.camera{

display:none;

}

.title{

display:none;

}


I did four things:
1) Removed some codes that were making trouble in the td.thumb sections (the background of the thumbnails, because you already had a background; and a "display block" code).
2) I did add an Identification tag at the beggining that you can mofidy as you wish.
3) I did change the order of the classes, just to make it more simplier to modify, and I did remove some extra information you had that was unnecesary and
4) I did remove a bold tag from the links (.a class), that you can set as it was if you follow the note I left you. Excuse me if It is no good but that way it was easier to modify.

Hope it works, because as I told you I´m no expert. By the way, I recommend you create an alternate stylesheet to check if it works as you want (I mean: Do not replace the original you had now before checking this one).

[chewieg2]

Thank you matias for your help! Unfortunately, when I tried your code, I ended up with the same missing right border on some of the images.

Like you, I just fool around and try to get something that works! Luckily, I was able to figure it out last night. For some reason, I had to add a left and right margin of -3px to the thumbnails. I don't know why, but it works!

Thanks again for your help!

[matiasasun]

Thank you matias for your help! Unfortunately, when I tried your code, I ended up with the same missing right border on some of the images.

Like you, I just fool around and try to get something that works! Luckily, I was able to figure it out last night. For some reason, I had to add a left and right margin of -3px to the thumbnails. I don't know why, but it works!

Thanks again for your help!

Weird... I can´t understand why it didn´t work, maybe a caché issue?. I did try it in both browsers and did use a CSS validator and nothing was wrong. Even more, there were no 3pix border in your code.

As I said before, Computer CAN and DO think. They usually try to make our lives harder. Any way thanks for the experience too because I did learn some differences between Firefox and Internet Explorer. Also: I didn´t told you before but your style sheet looks very good. The combination of colors and the image in the background creates a great effect.