Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Limit underline to the text

    Hi,

    I'd like to have the underline for the text only and at the same keep the image part of the link:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <title>Test</title>
    
    <style type="text/css">
    a:hover {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    </style>
    
    <a href="#">Subscribe to feed<img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
    The code result isn't the same in all major browsers.
    Many thanks for any help!
    Last edited by Rain Lover; 04-07-2011 at 05:13 PM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Rain Lover View Post
    Hi,

    I'd like to have the underline for the text only and at the same keep the image part of the link:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <title>Test</title>
    
    <style type="text/css">
    a:hover {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    </style>
    
    <a href="#">Subscribe to feed<img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>
    The code result isn't the same in all major browsers.
    Many thanks for any help!
    Is that your complete code?
    Teed

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Rain Lover,
    Since the image and text are both part of the anchor you need to put the text in a span so you can style it differently.
    Try something like this -
    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	background: #FC6;
    }
    #container {
    	height: 500px;
    	width: 700px;
    	margin: 30px auto;
    	padding: 50px;
    	background: #999;
    }
    a:link,
    a:visited {
    	text-decoration: none;
    	color: #333;
    }
    a:hover,
    a:active {color: #f00;}
    	a:link span,
    	a:visited span {
    		border-bottom: 1px solid #333;
    	}
    	a:hover span,
    	a:active span {border: none;}
    img {
    	border: none;
    	vertical-align: bottom;
    	margin-left: 15px
    }
    </style>
    </head>
    <body>
        <div id="container"> 
        	<a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt="" /></a> 
        <!--end container--></div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    Is that your complete code?
    Yes, it is.

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    So you dont have opening and closing html, head and body tags at all??
    Teed

  • #6
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by teedoff View Post
    So you dont have opening and closing html, head and body tags at all??
    As far as I know it doesn't make a difference and my code is valid -- give it a try in W3C Validator.
    Last edited by Rain Lover; 04-07-2011 at 07:09 PM.

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Hello Rain Lover,
    Since the image and text are both part of the anchor you need to put the text in a span so you can style it differently.
    Thanks for the detailed answer! However, look and style of a border is different from an underline and I'd prefer not to replace them with each other.

    Thanks anyway!

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    How about:

    Code:
    a{text-decoration:none}
    a span{text-decoration:underline}
    a:hover span {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}

  • #9
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SB65 View Post
    How about:

    Code:
    a{text-decoration:none}
    a span{text-decoration:underline}
    a:hover span {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    If you mean the following embed code, unfortunately it doesn't work in IE6:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <title>Test</title>
    
    <style type="text/css">
    a{text-decoration:none}
    a span{text-decoration:underline}
    a:hover span {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    </style>
    
    <a href="#"><span>Subscribe to feed</span><img src="http://www.google.com/phone/static/images/feed-icon.gif" alt=""></a>

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,949
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Try:

    Code:
    a{text-decoration:none}
    a:hover{background-color:transparent}
    a span{text-decoration:underline}
    a:hover span {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    Ridiculous, but then so is IE6...

  • Users who have thanked SB65 for this post:

    Rain Lover (04-07-2011)

  • #11
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Thumbs up

    Quote Originally Posted by SB65 View Post
    Try:

    Code:
    a{text-decoration:none}
    a:hover{background-color:transparent}
    a span{text-decoration:underline}
    a:hover span {text-decoration:none;}
    img {border:none; vertical-align:bottom; padding-left:15px}
    Ridiculous, but then so is IE6...
    Fantabulous!

  • #12
    Regular Coder
    Join Date
    Nov 2009
    Posts
    170
    Thanks
    16
    Thanked 0 Times in 0 Posts
    I just came up with a simple solution:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <style type="text/css">
    a:hover {text-decoration:none;}
    a {background:url(http://www.google.com/phone/static/images/feed-icon.gif) no-repeat right bottom; padding-right:31px;}
    </style>
    
    <a href="#">Subscribe to feed</a>
    Last edited by Rain Lover; 04-22-2011 at 06:35 PM.


  •  

    Posting Permissions

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