This image border CSS won’t work in IE…why?

[GuitarGypsy]

This code works perfectly in FF but doesn’t seem to work in IE. There must be an operator of some sort that’s missing in order for IE to interpret or accept it. Ideas?

.imageBorder {
padding:7px;
background-color:#F5F4F2;
border:1px solid #c8c8c7;
float:middle;
margin: 5px;
}

[cssgirl]

Hey there :)

Well, #1 float:middle doesn’t exist. You can float left or right.

You have a link so we can see what’s happening? There isn’t anything wrong with your CSS (aside from the float), so I’m assuming you more than likely have another style overriding this in IE. Try putting img.imageBorder or #containingDivClassOrSelector before the class. (where #containingDivClassOrSelecter isn’t that literally but whatever HTML tag, or class or id that this image is container within).

[GuitarGypsy]

Lindsey, thanks for the response!

If you have both FF and IE then look at this link:

http://www.nicholsbros.com/nbsbenches.htm

the thumbnails as well as the photo to the right (for each page that loads when clicking the thumbnail) should have this CSS border surrounding it.

I’m pretty clear on what you described with a surrounding div, but could you give me an example so i’m 100% on that, please? And, would it have to be one surrounding div for the entire group of thumbs or one per thumb?

**NEW**
Ok, I placed the imageBorder as the container div and took out the inline class reference. Now the border shows in both IE and FF. But! in IE it wants to display the active/link blue/purple border around the image. I know there’s a tweak to eliminate that but can’t find it.

So, basically I have it now like:

<div class="imageBorder"><a href="blahblah.htm"><img src="nameofimage.jpg"></a></div>

instead of:

<a href="blahblah.htm"><img src="nameofimage.jpg" class="imageBorder"></a>

[cssgirl]

I actually don’t think you even need to add the container div around the image —

Try adding this to your CSS:

Code:

table a img.imageBorder {
padding:7px;
background-color:#F5F4F2;
border:1px solid #c8c8c7;
float:left;
margin: 5px;
}

Also, if it seems you images are getting the link border try this:

Code:

a img {border:none;}

[GuitarGypsy]

that got rid of the link border in both FF and IE. However, in IE the background and border do not show unless I use the div wrapper method instead of the inline class method. If you look at that page in IE note that only the first thumb has the background/border around the exterior. That one is using the wrapper. The others are inline and don’t show.

[GuitarGypsy]

Just an FYI/Update, I went ahead and changed all those to wrapper <div> tags and they work fine that way.

Another question on this… i’d like to add a rollover effect where the background color surrounding the image changes. I’ve experimented with some different CSS but can’t get it to work. Is there a simple operator or two that I would insert to accomplish that?

[Author]

Posts