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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts

    CSS underline color

    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?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,688
    Thanks
    22
    Thanked 1,828 Times in 1,812 Posts
    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>
    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
    Regular Coder
    Join Date
    Jan 2008
    Posts
    334
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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>


  •  

    Posting Permissions

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