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 5 of 5
  1. #1
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Making a:hover img NOT underline

    I was told before that to stop my images from being underlined on Firefox when hovering, I need to make it a background image. How exactly is that done? I don't know if it makes it more complicated, but I also have a rollover image. They are the links along the left hand side. http://www.grammarperfection.com/index.html

    CSS Code:
    Code:
    a:hover img {
        text-decoration: none;
    }
    There are several image links, but they all have about the same code:

    HTML Code:
    Code:
    <h5><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home Rollover','','../Images/home_rollover.jpg',1)">
    <img src="../Images/grammar-perfection-home-icon.jpg" name="Home Rollover" width="50" height="50" border="0" id="Home Rollover" /><br />
              Home</a></h5>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello SeanWoods,
    You are telling it to underline on :hover right now. In your CSS you have this -
    Code:
    a:hover {
    	font-weight: normal;
    	text-decoration: underline;
    
    }
    To stop it, change it to this -
    Code:
    a:hover {
    	font-weight: normal;
    	text-decoration: none;
    
    }
    http://validator.w3.org/check?verbos...m%2Findex.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

  • #3
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Oops! I neglected to mention that I do want all the text links (and in-line text links)to remain underlined, just not the image links.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I'm sorry. I thought as much but got lazy.
    Try this -
    Code:
    #icons {
    
    
    		
    }
    
    #left a:hover {text-decoration: none;}
    a img {
    	border:none;
    		
    }
    
    a:link {
    	text-decoration: none;
    	font-weight: normal;
    }
    a:visited {
    	text-decoration: none;
    	font-weight: normal;
    }
    
    a:hover {
    	font-weight: normal;
    	text-decoration: underline;
    
    }
    a:active {
    	text-decoration: none;
    }
    a {
    You still need to have a look at the errors on your page - http://validator.w3.org/check?verbos...m%2Findex.html

    See the links about validating in my sig below.

    ...
    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

  • Users who have thanked Excavator for this post:

    SeanWoods (05-03-2009)

  • #5
    New Coder
    Join Date
    Apr 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow, what a bunch of errors! I thought it had it pretty good. haha

    Thanks for helping me with the underline.

    I'm still working on the rounded corners on my CSS boxes.

    I found a site that creates code for this http://www.roundedcornr.com/ I'm still trying to get it working though.


  •  

    Posting Permissions

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