more IE problems

[knowram]

I am trying to use CSS to put padding around an image and then put a border on specific sides depending on where the image is.  the desired effect is that the border lines are spaced away from the image by the padding. Here is the CSS I have

 

<style>
img {
padding: 10px;
}

.br { border-right: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e; }

.bl { border-left: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e; }

.blr { border-left: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e; border-right: 1px solid #5e5e5e;}

.btl { border-left: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e; border-top: 1px solid #5e5e5e;}

.btr { border-right: 1px solid #5e5e5e; border-bottom: 1px solid #5e5e5e; border-top: 1px solid #5e5e5e;}

.tlr { border-left: 1px solid #5e5e5e; border-top: 1px solid #5e5e5e; border-right: 1px solid #5e5e5e;}

.tl { border-left: 1px solid #5e5e5e; border-top: 1px solid #5e5e5e;	}

.tr { border-right: 1px solid #5e5e5e; border-top: 1px solid #5e5e5e; }

.all { border: 1px solid #5e5e5e; }	
</style>

 

works great in Safari and Firefox but not IE. IE puts the borders right next to the image. Is there anyway to add space between the borders and the image?

 

thanks for the help

[ToonMariner]

hmm that is an interesting one.  Its kind of odd as the img tag is (IMO) a special tag.  Padding in other tags dictates the amount of 'white space' to render before any content. The image however has no 'content' its just a pciture. In that respect I actually agree with the output from IE (it makes more sense to me).

 

The solutions as far as I can see would be:

 

a, try using display: block; for the image.

 

b, placing the image in a div and apply border and padding to that.

[corbin]

You could also try using margins, but I'm fairly sure the borders would still render right next to the image...