...

View Full Version : 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. :p



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



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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum