SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Zealot slandry's Avatar
    Join Date
    Feb 2002
    Location
    Right behind you!
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Border Hover like msn.com

    I've been trying to create a similar style as used on http://www.msn.com (when you search for images the thumbnails have a border around them which changes on hover) For some reason I can't get it to work in Firefox.

    Please see my code below:


    <html>
    <head>
    <style type="text/css">
    <!--
    #pic a{border: 5px solid #CCCCCC;}
    #pic a:hover {border: 5px solid #FF0000;}
    -->
    </style>
    </head>
    <body>
    <div id="pic">
    <a href="#"><img border="0" src="<A href="http://www.mpfamily.com/Sponge-Bob.jpg"></a">http://www.mpfamily.com/Sponge-Bob.jpg"></a>
    </div>
    </body>
    </html>

    Works fine in IE but wierds out in Firefox. Any thoughts?

    Thanks!

  2. #2
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    did you mean:

    <html>
    <head>
    <style type="text/css">
    <!--
    #pic a{border: 5px solid #CCCCCC;}
    #pic a:hover {border: 5px solid #FF0000;}
    -->
    </style>
    </head>
    <body>
    <div id="pic">
    <a href="http://www.mpfamily.com/Sponge-Bob.jpg"><img border="0" src="http://www.mpfamily.com/Sponge-Bob.jpg"></a>
    </div>
    </body>
    </html>

  3. #3
    SitePoint Zealot slandry's Avatar
    Join Date
    Feb 2002
    Location
    Right behind you!
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gavin, sure that works I was just using the "#" as a place holder.

    For some reason the border only shows in the lower half of the image in Firefox.

  4. #4
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what I was saying is that you have in the img element:

    src="<A href="http://www.mpfamily.com/Sponge-Bob.jpg"></a"

    which doesn't make sense, and may well cause the weirdness to occur

  5. #5
    SitePoint Zealot slandry's Avatar
    Join Date
    Feb 2002
    Location
    Right behind you!
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Duh! Yes sry bout that. Sloppy cutting and pasting.

    Although it's still acting weird in Firefox.

  6. #6
    SitePoint Enthusiast boagworld's Avatar
    Join Date
    Jul 2004
    Location
    Dorset UK
    Posts
    65
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    try adding a display:block; to the a link. That might well do the trick
    Paul Boag
    www.boagworld.com
    Award winning web design podcast
    email: paul@boagworld.com

  7. #7
    SitePoint Guru gavwvin's Avatar
    Join Date
    Nov 2004
    Location
    Cornwall, UK
    Posts
    686
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #pic a img {border: 5px solid #CCCCCC;}
    #pic a:hover img {border: 5px solid #FF0000;}

    seems to work correctly in firefox (and seems the correct way to do it to me), but not in IE, so I tried this which seems to work in both, but looks ugly:

    a {
    border:5px solid #CCCCCC;
    }
    a:hover {
    border:5px solid #FF0000;;
    }
    html>body a img {
    border:5px solid #CCCCCC;
    }
    html>body a:hover img {
    border:5px solid #FF0000;
    }
    html>body a, html>body a:hover {
    border:none;
    }

    However if you put a doctype in IE removes the top border for some reason (even with your code)

  8. #8
    SitePoint Zealot slandry's Avatar
    Join Date
    Feb 2002
    Location
    Right behind you!
    Posts
    128
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excellent! Thank you.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •