SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    uk
    Posts
    55
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Separate formatting for link text & link image?

    Hi, I have a Web page with a text link and an image link (clickable image). I want to use CSS to give the text link a dotted underline and I want the clickable image to have no formatting.

    I tried using this style code:

    Code:
    a:link {
    border-bottom: 1px dotted;
    }
    ..but this gives both the text AND the image a dotted underline. I only want the text to have the dotted underline. So I tried this:

    Code:
    <html>
    <head>
    	<style>
    		a:link {
    			border-bottom: 1px dotted;
    		}
    		
    		a img {
    			border-bottom: 0px none;
    		}
    		
    		a > img {
    			border-bottom: 0px none;
    		}
    		
    		a:link img {
    			border-bottom: 0px none;
    		}
    		
    		a:link > img {
    			border-bottom: 0px none;
    		}
    		
    		a + img {
    			border-bottom: 0px none;
    		}
    	</style>
    </head>
    
    <body>
    
    <tr valign="middle">
    	<td align="center">
    		<a href="link.html">
    			<img src="thumb.jpg" width="60" height="60" border="1">
    		</a>
    	</td>
    </tr>
    <tr>
    	<td align="center">
    		<a href="link.html">
    			<font size="1">
    				Click here to find out more.
    			</font>
    		</a>
    	</td>
    </tr>				
    
    </body>
    </html>
    I know that I've tried lots of different style selectors but I was hoping that one of them would work. Unfortunately not. I find that still both the text and image have a dotted underline.

    Does anyone know how to solve this? Surely there must be a straightforward way without using classes?

    Thx,

    May

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Try:
    Code:
     a img {
       border: none;
     }

  3. #3
    SitePoint Enthusiast ArgentinaCoders's Avatar
    Join Date
    Nov 2003
    Location
    Argentina
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi!

    You can do a new css like

    a.image { [props] }

    And in your href.. < a href="target" class="image"><img...></a>

    Bye!


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
  •