Elemental Posted April 17, 2009 Share Posted April 17, 2009 Hey Folks, Not sure what I'm doing wrong... Sorry if this comes across a bit confusing I've been up all night. I'm working on my website, the resume page, and I can't seem to make the images I have as hyperlinks work properly. The navBar text work fine but I'm using my agent's and manager's logo to link to their sites and I can't get the colors to work right (see below) the current code I have wont work in Opera or Safari (PC), and only the hover section works on IE and FFHere's what I've got:external css a:link{color: #999999; text-decoration: none;}a:visited{color: #cc0000; text-decoration: none;}a:hover{color: #00CCFF; text-decoration: none;}a img#synergy:link{border-color: none;}a img#synergy:visited{border-color: none;}a img#synergy:hover{border-color: #00CCFF;} html <table id="header"><tr><td colspan="3"><img id="nameResume" src="../images/nameResume.png" alt="Resume" title="Resume" /><a href="http://www.synergytalent.net", target="_blank"><img id="synergy" src="../images/synergy.png" alt="Synergy Talent Logo - Agent" title="Synergy Talent Logo - Agent" /></a><a href="http://www.madcatch.com/Site/MadCatch_Entertainment.html", target="_blank"><img id="madCatch" src="../images/madCatch.png" alt="MadCatch Entertainment Logo - Manager" title="MadCatch Entertainment Logo - Manager" /></a></td></tr> Can you guys explain what I'm doing wrong here, please...Peace,Elemental Link to comment Share on other sites More sharing options...
jeffman Posted April 17, 2009 Share Posted April 17, 2009 Try it this way: a:link img#synergy{border-color: none;}a:visited img#synergy{border-color: none;}a:hover img#synergy{border-color: #00CCFF;} But I'm not sure "none" is a possible color value. Try "transparent" or using the same color as the element behind it. Link to comment Share on other sites More sharing options...
Elemental Posted April 17, 2009 Author Share Posted April 17, 2009 Try it this way:a:link img#synergy{border-color: none;}a:visited img#synergy{border-color: none;}a:hover img#synergy{border-color: #00CCFF;} But I'm not sure "none" is a possible color value. Try "transparent" or using the same color as the element behind it. Good Morning Sir,Thanks for the reply. the transparent value worked like a charm but Opera and Safari are not taking the bait. The thing is that this worked for me before:/* ***** Text Links **** */a:link {color: #0099FF; text-decoration: none}a:visited {color: #FF0066; text-decoration: none}a:hover {color: #CCCC00;}/* ***** IMG Links ***** */a #img01:hover {border-color: #CCCC00;}a #img02:hover {border-color: #CCCC00;} the html for the image links were like this one <div id="imgSet01"><a href="../galleria/lrgImg/elSuper.html", target="_blank", onclick="open_win(this.href); return false"><img id="img01" class="imgBorders" src="../galleria/images/elSuper.jpg" alt="Photography" title="Photography" /></a></div> However, I didn't have the link and visited values only the hover, not that I think that would matter but it worked on all four browsers ?????Peace,Elemental Link to comment Share on other sites More sharing options...
jeffman Posted April 17, 2009 Share Posted April 17, 2009 :hover, :active, and :focus should work for most page elements in most browsers. (In IE, you'll need a strict doctype for them to work on elements that are not <a> elements.) This makes it possible, for example, to create animated menus using only CSS. Applying the :hover class to an <img> element is certainly correct.But I'm pretty sure the :link and :visited pseudo-classes can be applied ONLY to <a> elements. That is why I suggested using the selectors in a different way. Link to comment Share on other sites More sharing options...
Elemental Posted April 17, 2009 Author Share Posted April 17, 2009 :hover, :active, and :focus should work for most page elements in most browsers. (In IE, you'll need a strict doctype for them to work on elements that are not <a> elements.) This makes it possible, for example, to create animated menus using only CSS. Applying the :hover class to an <img> element is certainly correct.But I'm pretty sure the :link and :visited pseudo-classes can be applied ONLY to <a> elements. That is why I suggested using the selectors in a different way.Deirdre's Dad, I'm sure you are correct so I've changed the order as you suggested, I'll play around with the id's and when I get it to work correctly I'll post it.As for the doctype, here's what I've been using: "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en">I'll get back to you.Peace,Elemental Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.