CSS underline color

Jon W · 04-08-2009, 09:16 PM

So I've got this code to work on every browser but... You've guess it... IE7... The goal is to have a underline color change on a hover, but not the actual link color. Here is the script that works on good browser.

Code:

a:link { color:#000000; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; border-bottom:1px solid #cccccc; }
a:visited { color:#000000; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; border-bottom:1px solid #cccccc; }
a:hover { color:#000000; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; border-bottom:1px solid #D9841B; }

But it doesn't work on IE7, what is a fix for this, does anyone know?

Excavator · 04-08-2009, 09:46 PM

Not sure, without seeing the rest of your code... I think what you have should work. Try it 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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	font: 14px "Comic Sans MS";
	background: #000;
	text-align: center;
}
* {
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}
#container {
	width: 800px;
	margin: 30px auto;
	padding: 50px 0;
	background: #999;
	overflow: auto;
}
a:link, a:visited, a:active { 
	text-decoration: none;
	border-bottom: 1px solid #cccccc; 
}
a:hover { border-bottom: 1px solid #D9841B;}
</style>
</head>
<body>
    <div id="container">
    	<a href="http://www.codingforums.com/showthread.php?t=163417">CodingForums.com</a>
    <!--end container--></div>
</body>
</html>

Jon W · 04-08-2009, 10:03 PM

This is the full CSS code.

Code:

<style type="text/css">
    html, body { background-image:url('/images/wicked_bg.png');
	height:100%;
	width:100%;
	margin:0px;
	margin:auto;
	}
	
	#content {
	background-color:#FEF9F9;
	text-decoration:none;
	margin:auto;
    height:auto;
	width:874px;
	}
	
    #bottom {
    margin:auto;
    width:874px;
    height:45px;
    background-image:url('/images/bottom.png');
    background-repeat:no-repeat;
	}
    
	.updated {
	color:#ccc;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	text-decoration:none;
    }
	
	#logo {	
    background-image:url('/images/logo_full.png');
	background-repeat:no-repeat;
	font-family:arial, helvetica,clean,sans-serif;
	color:#404142;
	width:874px;
	text-align:left;
	font-weight:bold;
	line-height:20px;
	height:120px;
	}
	
    #footer {
    font-size:12px;
    background-color:#68A007;
	padding:15px;	
    text-align:center;
	border:3px solid #5F9107;
    width:400px;
    margin:auto;
	}
	
	#top-content {
    background-color:#fff;
	border-bottom:1px solid #000000;
	}
	
	#login {
	padding-right:3px;
	padding-left:3px;
	font-size:13px;
	font-weight:normal;
	text-align:left;
	padding-right:5px;
	color:#FFFFFF;
	font-weight:700px;
	font-family:arial, helvetica,clean,sans-serif;
    position:absolute;
    left:0px;
    top:99px;
    position:relative;
    left:0px;
    top:99px;
    background-color:#1F211F;
	}
	
	.new-date {
    font-size:11px;
	font-weight:normal;
	font-family:arial, helvetica,clean,sans-serif;
	color:#404142;
	}
	
	#head-content {
	width:600px;
	height:400px;
	border:1px solid #ccc;
	padding-right:5px;
	padding-left:5px;
	padding-top:0px;
	padding-bottom:0px;
	
	}
	
	#x {
	position:absolute;
	left:670px;
	top:79px;
	position:relative;
	left:670px;
	top:79px;
	width:200px;
	text-align:right;
	color:#80c409;
	font-size:13px;
	}
	
	.posted {
	color:#ccc;
	font-size:11px;
	font-weight:normal;
	font-style:normal;
	font-family:arial, helvetica,clean,sans-serif;
	}
	
	fieldset {
	padding:5px;
	border:1px dashed #cccccc;
	width:600px;
	text-align:left;
	padding-left:5px;
	font-size:13px;
	font-weight:540px;
	font-style:normal;
	text-decoration:none;
	color:#000000;
	font-family:arial, helvetica,clean,sans-serif;
	}
	
	#text {
	width:600px;
	height:100%;
	font-size:13px;
	font-weight:540px;
	font-style:normal;
	text-decoration:none;
	color:#000000;
	font-family:arial, helvetica,clean,sans-serif;
	padding:5px;
	}
	
	.word {
	font-size:14px;
	font-weight:bold;
	color:#404142;
	text-decoration:none;
	width:200px;
	}
	
	.description {
	color:#000000;
	font-size:12px;
	font-weight:normal;
	text-decoration:none;
	font-style:normal;
	font-family:arial, helvetica,clean,sans-serif;
	}
	
	#img {
	float:right;
	width:50px;
	height:50px;
	z-index:-0;
	}
	
	hr {
    color:#cccccc;	
	}
	
	.header {
	color:#4F4747;
	font-size:25px;
	font-weight:bold;
	font-style:oblique;
	text-align:left;
	font-family:Comic Sans, Comic Sans MS, cursive;
	}
 
	a:link { color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; }
	a:visited { color:#ffffff; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; }
	a:hover { color:#cccccc; font-size:12px; font-weight:normal; font-style:normal; text-decoration:none; }
	
	#nav a:link { color:#404142; height:30px; line-height:30px; width:60px; font-size:12px; font-weight:bold; text-decoration:none; background-image:url('/images/nav1.gif'); display:block; text-align:center; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; font-family:arial, helvetica,clean,sans-serif;  }
    #nav a:visited {  color:#404142; height:30px; line-height:30px; width:60px; font-size:12px; font-weight:bold; text-decoration:none; background-image:url('/images/nav1.gif'); display:block; text-align:center; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; font-family:arial, helvetica,clean,sans-serif;  }
    #nav a:hover { color:#404142; height:30px; line-height:30px; width:60px; font-size:12px; font-weight:bold; text-decoration:none; background-image:url('/images/nav_hoverr.gif'); display:block; text-align:center; border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; font-family:arial, helvetica,clean,sans-serif; }
	
	</style>