WordPress.org

Ready to get started?Download WordPress

Forums

can CSS treat jpg and gif images differently? (13 posts)

  1. colep
    Member
    Posted 8 years ago #

    In my CSS stylesheet I have the following:

    img {border:solid #8C0000 2px}

    which puts a border around images. Is it possible to have this apply only to jpg images and not to gifs?

    Thanks!
    Pete

  2. Michael Bishop

    Posted 8 years ago #

    Not that I'm aware of, but what you can do is create two classes, to do that.

    SO you have:

    .jpg {border: solid 8C0000 2px}
    .gif {border: none}

    Then when you post the image <img class="jpg" src="http://www.somesource.com/picture.jpg" alt="image" /> and <img class="gif" src="http://www.somesource.com/picture.gif" alt="image" />

    Then delete the blanket style for img
    That should do it.

  3. IIIIIIIV
    Member
    Posted 8 years ago #

    I'm pretty certain it can be done using before: or after: pseudo-thingies, or using the [something goes here] selector.

    Maybe
    img[gif]
    {border: none;
    }

    But I'm not sure if that's the right syntax for it. Either way, it won't work in IE.

    Edit: It's called an attribute selector and it may well be what you're after.
    http://www.w3.org/TR/REC-CSS2/selector.html#attribute-selectors

    Again, IE is a no go for these.

  4. ifelse
    Member
    Posted 8 years ago #

    Technically, you can via the use of CSS attribute selectors:
    img[src$=".jpg"]{border:2px solid #8c0000;}

    However, this isn't supported by IE6 (it is supported by FF, Safari and IE7 though) so miklb's suggestion is more robust (though I'd probably suggest using a more semantic name than .jpg or .gif if possible).

  5. colep
    Member
    Posted 8 years ago #

    Mklib, your suggestion worked perfectly, but generated two follow-up questions:

    1) I also have a hover class like this:

    a:hover { border:solid blue 2px; }

    which changes the #8C0000 border blue when hovered. This no longer works. I also tried changing it to a:jpg:hover based on what I read about attribute selectors at the link posted above, but that didn't help. (I only want the hover to apply to jpg's).

    Any ideas?

    2) I also have right and left classes like this:

    img.right { padding: 4px; margin: 0 0 2px 7px; display: inline; }
    img.left { padding: 4px; margin: 0 7px 2px 0; display: inline; }

    So how do I combine class="jpg" and class="right" when placing an image on a page? I tried various options but could not find a solution.

    Thanks,
    Peter

  6. ifelse
    Member
    Posted 8 years ago #

    1) It should be:
    a.jpg:hover{border:solid blue 2px;}
    2) For multiple classes, use class="jpg right" e.g.
    <img src="whatever" class="jpg right" />

  7. colep
    Member
    Posted 8 years ago #

    Thanks ifelse. You solved #2 for me, but the blue hover border does not work even with:

    a.jpg:hover {border:solid blue 2px;}

    Tried in both IE and FF.

    I'll keep trying...

  8. Michael Bishop

    Posted 8 years ago #

    try .jpg a:hover

  9. colep
    Member
    Posted 8 years ago #

    OK, I got it! a.jpg:hover did not work but this did:

    a:hover .jpg

    Note: a:hover jpg (without the dot before jpg) did NOT work.

    All is well now with my blog. You guys rule.

    Thanks,
    Pete

  10. colep
    Member
    Posted 8 years ago #

    Heh, well it works fine in Firefox but in IE only the top portion of the border turns blue, and then sometimes that doesn't even happen. Damn you MSFT.

  11. Michael Bishop

    Posted 8 years ago #

    try my last suggestion, and declare the class first, then the a:hover, though IE is odd at times.

  12. Doodlebee
    Member
    Posted 8 years ago #

    Also be sure your links are in the correct order.

    a:link, a:visited, a:hover, a:active (remember "LoVe HAte"). They *must* be in that order, ir they will cease to function properly.

  13. raoulpop
    Member
    Posted 8 years ago #

    ifelse's advice about the CSS attribute selectors for JPG files was right on! I wanted to thank him here. I'd just launched a new site (www.comeacross.info) and realized my blanket CSS for the img tag was also getting applied to the smilies, which were GIFs, messing up the line spacing. This solved it!

    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags