Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #23359
    GuitarGypsy
    Member

    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;
    }

    #50332
    cssgirl
    Participant

    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).

    #50334
    GuitarGypsy
    Member

    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>

    #50335
    cssgirl
    Participant

    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;}
    #50336
    GuitarGypsy
    Member

    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.

    #50325
    GuitarGypsy
    Member

    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?

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.