Brendon Branigin Posted April 18, 2006 Share Posted April 18, 2006 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 More sharing options...
smiles Posted April 18, 2006 Share Posted April 18, 2006 ul , li , a:link, a:visited maybe Link to comment Share on other sites More sharing options...
Kasdraven Posted April 18, 2006 Share Posted April 18, 2006 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 More sharing options...
Brendon Branigin Posted April 18, 2006 Author Share Posted April 18, 2006 alright, thanks guys. if anyone finds that answer to this let me know, personaly i think eliminating 50lines of css would be worth it ;/ Link to comment Share on other sites More sharing options...
justsomeguy Posted April 21, 2006 Share Posted April 21, 2006 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 Link to comment Share on other sites More sharing options...
Brendon Branigin Posted April 21, 2006 Author Share Posted April 21, 2006 neither worked Link to comment Share on other sites More sharing options...
raimo Posted April 22, 2006 Share Posted April 22, 2006 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 Link to comment Share on other sites More sharing options...
mpoer Posted April 22, 2006 Share Posted April 22, 2006 I think raimo has you covered. Just be sure to define the classes all the way Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now