SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    US
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    img + text both inside a single anchor

    What I want to do seems simple enough - a single thumbnail image with a single text label beneath it, all inside a single anchor...


    #####
    #####
    #####
    Text label



    When you hover over either the <img> OR the text label, the text underlines, but not the image...


    #####
    #####
    #####
    Text label



    Now this used to work fine before I started doing sites with an xhtml strict doctype. When you hovered the cursor over either the img or the text, just the text underlined, and it gave the impression of a nice single clickable area. And it was unbelievably easy to implement....

    Code HTML4Strict:
    <a href="foo.htm">
          <img src="/images/thumb1.jpg" alt="">
          <br />1120 Case
    </a>
    (and I also used to chuck this in for good measure... )
    Code CSS:
    a img { border:0; }

    But now in XHTML Strict, when you hover anywhere in the anchor, it's making the <img> underline in addition to the text.

    I've tried adding a class to the img to override it with a text-decoration: none; but it's still having none of it. (And this is still Firefox testing btw, I've not even looked at IE yet)

    I need it so that just the text underlines.

    Has anyone successfully managed to do this in strict? Or am I going to have to split it into two separate anchors? I don't really want to start changing the doctype for these pages. TIA.

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi there 5tevooo,

    have a look at this example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    #mylink a:link {
        display:block;
        width:100px;
        height:30px; 
        padding-top:60px;
        background-image:url(http://mysite.orange.co.uk/azygous/images/banana_thumb.jpg);
        background-repeat:no-repeat;
        background-position:top center;;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:13px;
        color:#000;
        text-align:center;
        text-decoration:none;
     }
    #mylink a:hover{
        text-decoration:underline;
     }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="mylink">
    <a href="http://www.google.com">text label</a>
    </div>
    
    </body>
    </html>
    coothead

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    US
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for that! I'm familiar with using padding+background images for bullets and things, but hadn't twigged to go down that route with this. (Think I just got too caught up with inline <img>'s.)

  4. #4
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No problem, you're welcome.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    But now in XHTML Strict, when you hover anywhere in the anchor, it's making the <img> underline in addition to the text.
    You are missing the point a bit there Its the anchor that has a text decoration which is what it does. You can't say I want an anchor underlined but don't underline some bits. The text and the image don't have text-decoration applied so you there's nothing you can turn off there.

    You could however place the text inside a span and give that an underline on hover instead of the anchor.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p.test{float:left;}
    .test img{    
        display:block;
        border:none;
    }
    .test a{    
        display:block;
        text-decoration:none;
        text-align:center;
    }
    .test a:hover span{text-decoration:underline;}
    .test a:hover{visibility:visible;}
    </style>
    </head>
    <body>
    <p class="test"><a href="#"><img src="images/volcano-1.jpg" width="300" height="225" alt="test" /><span>Testing</span></a></p>
    </body>
    </html>
    Of course the background image method shown above is much simpler and cleaner assuming that images in the background aren't an issue for you

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    US
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes I see what you're saying Paul. It was just frustrating that something so simple could be achieved so easily before without resorting to background images and id's - just wrap the anchor around the img and text, and only the text would underline on hovering the whole thing. But of course I was at the mercy of the doctype (or lack of it!)

    I have no problem with the id/padding/background image route. I'm happy to use that.

    The span method is interesting, should I ever need to use <img>s.

  7. #7
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    + be sure to close your image tags as so: />

    [if you haven't already ;-)]

    El
    F-Fox 2.0 :: WIN :: el design :: US


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
  •