combining a:link a:active ect

[Brendon Branigin]

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?

[smiles]

ul , li , a:link, a:visited maybe

[Kasdraven]

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.

[Brendon Branigin]

alright, thanks guys. if anyone finds that answer to this let me know, personaly i think eliminating 50lines of css would be worth it ;/

[justsomeguy]

You can do that, just leave out the commas. It's a space-delimited list.If this doesn't work:#content a a:link a:visited a:hover a:activethen try this:#content a :link :visited :hover :active

[Brendon Branigin]

neither worked

[raimo]

neither worked

<{POST_SNAPBACK}>

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

[mpoer]

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