SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast fLUx1337's Avatar
    Join Date
    Jul 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Linked Image Border

    Hey,

    I'm having some trouble with a image link in my wordpress blog, heres the html/css, just pop it into a file and view it, you will understand what I mean:

    Code HTML4Strict:
    <style>
    body{
      color:#000000;
      font-family:Verdana;
      font-size:0.6em;
    }
     
    .entry a{
    color:#15A1DC;
    border-bottom:1px dashed #6CC509;
    text-decoration:none;
    font-weight:bold;
    }
     
    .entry a:hover{
    color:#fff;
    background:#15A1DC;
    text-decoration:none;
    font-weight:bold;
    border-bottom:0px;
    }
     
    .entry a img{
    border:none;
    }
    </style>
     
     
    <div class="entry">
    <p>blah blah blah  <a href="http://google.com">test</a> blah blah blah</p>
    <p><a href="http://google.com"><img src="http://i2.sitepoint.com/graphics/flipbook.jpg" title="test" alt="&nbsp;" /></a></p>
    </div>

    ...when you hover over the image, the dashed green border goes away (due to ".entry a:hover"), but all border:none; on .entry a img does is remove the #15A1DC border (well, its acctully the background).

    Anyone know how I could remove the green dashed border under the image?

    Cheers in advance!

    fLUx

    P.s. I understand this works...

    .blah a{
    border:none;
    }

    ... but surely their is a way to do it without diving into Wordpress's insides to add "<div class="blah">...</div>" where it turns the WYSIWYG image into the html?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    When you tell an anchor to have a dotted underline it gets a dotted underline. Selectors aren't physic and won't suddenly not underline an anchor just because it contains an image.

    Remember that the image is inside the anchor and the styling is on the anchor, so therefore addressing the image has no effect on the anchors styles. It may as well be just a different word as far as the selector goes.

    You will need to apply a class to the anchor or the p wrapper to do this properly.

    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>
    body{
      color:#000000;
      font-family:Verdana;
      font-size:0.6em;
    }
     
    .entry a{
    color:#15A1DC;
    border-bottom:1px dashed #6CC509;
    text-decoration:none;
    }
     
    .entry a:hover{
    color:#fff;
    background:#15A1DC;
    border-bottom:0px;
    }
     
    .entry a img{
    border:none;
    }
    .fbook a,.fbook a:hover{border:none;background:#fff}
    </style>
    </head>
    <body>
    <div class="entry">
        <p>blah blah blah <a href="http://google.com">test</a> blah blah blah</p>
        <p class="fbook"><a href="http://google.com"><img src="http://i2.sitepoint.com/graphics/flipbook.jpg" title="test" alt="" /></a></p>
    </div>
    </body>
    </html>
    Now having said all that above - there actually may be an easy fix in some cases and you can try this first but it depends on what else is going on in your layout. Just set the image to display:block or float:left.

    Code:
    .entry a img{
    border:none;
    display:block
    }
    That should make the image hide the border but it does depend on how your layout is structured.

  3. #3
    SitePoint Enthusiast fLUx1337's Avatar
    Join Date
    Jul 2007
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Code:
    .entry a img{
    border:none;
    display:block
    }
    That should make the image hide the border but it does depend on how your layout is structured.
    That worked....thanks!

    So stupidly simple....


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
  •