...

View Full Version : a img hover issue



quartzy
02-17-2011, 12:08 AM
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:
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


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

VIPStephan
02-17-2011, 12:19 AM
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?

quartzy
02-17-2011, 01:19 AM
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.

Excavator
02-17-2011, 01:43 AM
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 :(

VIPStephan
02-17-2011, 12:27 PM
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.

quartzy
02-17-2011, 12:47 PM
Thank you for your relpies, I have added more specificity but it has still not worked.

the html is
<!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:


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;}

Candygirl
02-17-2011, 02:03 PM
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:


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

quartzy
02-17-2011, 02:49 PM
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.

quartzy
02-17-2011, 02:52 PM
I fixed it I had to do the code like you had, and remove the a:hover and change to a img, thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum