Web Analytics Made Easy -
StatCounter CSS underline color - CodingForum

Announcement

Collapse
No announcement yet.

CSS underline color

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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.codingforum.net/showthread.php?t=163417">codingforum.net</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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

    Comment


    • #3
      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>

      Comment

      Working...
      X