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 9 of 9
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    a img hover issue

    I have an a link on my image, I have sucessfully removed the border from it, but on hover I get an thick underline. How would I code for this?

    img a:hover{border-bottom: 0;} does not do it.

    My css for the links is:
    Code:
    a:link {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:visited {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:hover {
    	color: #000;
    	text-decoration: none;
    	background: #CCC;
    }
    and for the img I have

    Code:
    img a {
    	border: none;
    }
    img a:hover{border-bottom: 0;}

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Your second CSS basically tells the browser: “Any anchor element inside an image element should have no border. And any anchor element that is hovered over inside an image element should get no bottom border.”

    What’s wrong with this statement?

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    It is not working is what is wrong. I still get a bottom border. I have changed it to the other way round too and it does not work.

    a img {border-style: none;} // this works OK // but does not get rid of the bottom border with a link opn hover
    I have also tried:

    a:hover img{border-bottom: 0;} and this does not work
    neither does

    a:hover img{border-style: none;}

    If you are asking me to question myself, I have and get nothing.
    Last edited by quartzy; 02-17-2011 at 01:33 AM.

  • #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
    Hello quartzy,
    img a:hover{border-bottom: 0;} is either not specific enough to stop the bottom border that is being applied from some other CSS, OR your anchors are not really inside image tags but rather the other way around.

    Once again, we are not really given enough information to help you
    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

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    I was asking what’s wrong because in the code you posted you had the very obvious error of the selectors being in the wrong order. It must read a:hover img, not img a:hover.

    But in your reply you had it right so I’m not sure if it was jsut a typo when posting here. Please provide your entire code (HTML and CSS) as this makes helping a lot easier. Problems aren’t necessarily always caused where they become obvious.

  • #6
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Thank you for your relpies, I have added more specificity but it has still not worked.

    the html is
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="en" name="language" />
    <meta content="Seniors Club entry page and Community Venue entry page" />
    <meta content="Seniors Club and Community Venue" />
    <title>Seniors Entry Page</title>
    <link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
    <link href="styles/layout.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>   
    <div id="bodyblock">
    <div id="container">
    <div id="content">
    <h1 class="margin1">SENIORS</h1>
    <div class="left7">
    <a href="seniors/homepage.html">
    <img alt="Seniors Club " height="106" src="images/seniors_logo.gif" width="343" /></a>
    <h2>Seniors Club</h2><br/>
    <p class="caption2">
    <a href="seniors/homepage.html">Enter</a></p></div>
    <div class="right5">
    <a href="venue/home.html">
    <img alt="Seniors Community Venue" height="101" src="images/venue_logo.gif" width="201" /></a><h2>Seniors Community Venue</h2><br/><p class="caption2">
    <a href="venue/home.html">Enter</a></p></div>
    </div><!--content--></div><!--container--></div><!--bodyblock--></body></html>
    the css is:
    Code:
    html, body {
    	text-align: center;
    	height: 100%;
    	width: 100%;
    	font-family: Trebuchet, Helvicta, Arial, Sans-serif;
    	background: #FFCC00;
    	font-size: 100%;
    	line-height: 145%;
    }
    #bodyblock {
    	width: 972px;
    	margin: 0 auto;
    	background-image: url('../images/shadow.jpg');
    	background-repeat: repeat-y;
    	overflow: hidden;
    }
    #container {
    	border: 0;
    	width: 912px;
    	background: #fff;
    	position: relative;
    	margin: auto;
    	height: auto; /* For IE */;
    	text-align: left; /*Hack to fix IE6 to center*/
    }
    a:link {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:visited {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:hover {
    	color: #000;
    	text-decoration: none;
    	background: #CCC;
    }
    #content {
    	width: 85%;
    	float: left;
    	display: inline;
    	background: #fff;
    	overflow: hidden;
    	padding: 3.50em;
    	margin: 0 auto;
    }
    
    a img  {border-style: none;}
    #bodyblock a:hover img{border-style: none;}
    .right5 {
    	width: 43%;
    	border-top: 2px solid #CCC;
    	border-left: 1px solid #CCC;
    	float: right;
    	padding: 1em;
    	text-align: center;
    }
    .left7 {
    	float: left;
    	width: 43%;
    	display: inline;
    	border-right: 1px solid #CCC;
    	border-top: 2px solid #CCC;
    	padding: 1em;
    	text-align: center;
    }
    .right5 h2 {
    	text-align: center;
    	border: 1px dotted #CCC;
    	margin-top: 3em;
    	padding-top: 1em;
    	padding-bottom: 1em;
    }
    .left7 h2 {
    	text-align: center;
    	border: 1px dotted #CCC;
    	margin-top: 3em;
    	padding: 1em;
    }
    p.caption2 {
    margin-bottom: 7em; 
    text-align: center; 
    font-size: 1.50em; 
    margin-top: 60px;}
    
    .margin1 {margin-bottom: 2em;}

  • #7
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Code:
    a img  {
    border-style: none;
    display:block;
    margin:0 auto;
    }
    The thick underline is the room for the letter going down the baseline such as p or q. Default value for the vertical-align property is baseline.
    basically , you could ask the image to align with the bottom and you'd get the same result:

    Code:
    a img  {
    border-style: none;
    vertical-align:bottom;
    }
    I prefere usuelly to use the first method I suggested; swap to block and center with margin-auto to get rid of the problem you could encounter if the line-hight is higher then your image.

    EDIT: I've juste remembered this is a strict doctype issu; in transitional you're normaly not suppose to see it
    Last edited by Candygirl; 02-17-2011 at 02:26 PM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    quartzy (02-17-2011)

  • #8
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I tried the vertical-align: bottom but the line still showed on one of the images. So I tried the other way, and now my headings underneath are jumping up and down with the hover.

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I fixed it I had to do the code like you had, and remove the a:hover and change to a img, thanks


  •  

    Posting Permissions

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