Jump to content

combining a:link a:active ect


Brendon Branigin
 Share

Recommended Posts

ive got a few sets of links where all 4 statuses are the same (link, visited, hover, active)so to optimize the code i tried combining them, it went terribly wrong :) heres the code

#content a a:link, a:visited, a:hover, a:active  {	color : #4a8ac8;	text-decoration : underline;	font-family : Arial, Helvetica, sans-serif;	background-color : #ffffff;	margin: 0px;	padding: 0px;}#text a:link, a:visited, a:hover, a:active  {	color : #4a8ac8;	text-decoration : underline;	font-family : Arial, Helvetica, sans-serif;	background-color : #F4F4F4;	margin: 0px;	padding: 0px;}#projects a:link, a:visited, a:hover, a:active {	color : #4a8ac8;	text-decoration : underline;	font-family : Arial, Helvetica, sans-serif;	background-color: #FFFFFF;	margin: 0px;	padding: 0px;}ul#legalnav li a:link, a:visited, a:hover, a:active {	text-decoration : none;	color : #4A8AC8;	margin : 0px;	padding : 0px 5px 0px 10px;	background-color: #FFFFFF;	}ul#footernavigation li a:link, a:visited, a:hover, a:active  {	text-decoration : none;	color : #666666;	margin : 0px;	padding : 0px 5px 0px 10px;	background-color: #FFFFFF;	}#navigation ul li a:link, a:visited {	color: #6A6A6A;	text-decoration: none;	list-style-position: inside;	list-style-image: none;	list-style-type: none;	text-transform: uppercase;	font-family: Tahoma, sans-serif;	font-weight: 900;	font-size: 11px;	background-image: url(images/normal.gif);	background-repeat: no-repeat;	background-position: left center;	padding-left: 15px;	margin: 0px 0px 0px 15px;	padding-top: 0px;	padding-bottom: 0px;	padding-right: 0px;	background-color: #FFFFFF;}#navigation ul li a:hover, a:active {	color: #6A6A6A;	text-decoration: none;	list-style-position: inside;	list-style-image: none;	list-style-type: none;	text-transform: uppercase;	font-family: Tahoma, sans-serif;	font-weight: 900;	font-size: 11px;	background-image: url(images/active.gif);	background-repeat: no-repeat;	background-position: left center;	padding-left: 15px;	margin: 0px 0px 0px 15px;	padding-top: 0px;	padding-bottom: 0px;	padding-right: 0px;	background-color: #FFFFFF;}#logo a:link, a:visited, a:hover, a:active {	text-decoration: none;	font-family: Tahoma, sans-serif;	font-size: 11px;	color: #666666;	background-color: #FFFFFF;}

what did i do wrong?

Link to comment
Share on other sites

Well i'm not sure about the ul and li, but I don't think you can put the link identifiers together like that. Someitmes optimization isn't best. If I were you i'd leave it the same or put them into a pseudo class and use the pseudo class for all the other identifiers. Also, it's up to you, but I wouldn't use the a: active property at al. It's always acted rather "volatile" for me. Like one time I used it and no matter what hex I put in it turn the text on my entire page white and reversed the background image. Don't know how or why but it did that on three different browsers including IE and FireFox Mozilla. When I deleted it everything went back to normal.

Link to comment
Share on other sites

neither worked :)

hmm? :)
a{text-decoration: none;}#content ul li a:hover, #content ul li a:visited,#content ul li a:active,#d1 .b1:hover{border-bottom: dotted 2px #FF8080;}#content ul li.l1 a:visited:hover{ /* if hover happend with visited link in li-element with class l1 */border-bottom: dotted 2px #80FF80;}

#content ul li.l1 a:visited:hover case:<div id="content"><ul><li><a href="#">red bottom border</a><li class="l1"><a href="http://google.ru/">green bottom border when is visited and hover happend</a></li></ul></div>#d1 .b1 case is:<div id="d1"><b>not border</b><b class="b1"><a href="#">dotted bottom border when hover happend</a></b></div>Get Firefox Console2 extension, my friend! (all of You) :) It's a very powerfull CSS error huntig tool. https://addons.mozilla.org/extensions/1815edit: here is other good extension-tool for Javascript, CSS, HTML, Ajax.. FireBug: https://addons.mozilla.org/addon.php?id=1843

Link to comment
Share on other sites

I think raimo has you covered. Just be sure to define the classes all the way

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...