|
CSS - A:visited & A:link Problems
Good Morning! First off I am not a professional, not even close. I have been teaching myself html & css on and off for the past 6 months. Ok so here is my issue:
I have a CSS rule: a:link, a:visited { display:block; font-weight:bold; color:#000; background-color:#FFF; width:200px; text-align:left; padding:10px; text-decoration:none; text-transform:uppercase; } The above rule is used on my side nav bar. My issue is now every <a href"etc.." </a> i place on my main page inherits all the above attributes. How can eliminate all the parent stuff. Ive been trying to get this working for the past 2 hours and my brain is fried.! Thanks for all your help! -Chris Similar TutorialsHi. Pleeease help! I've created a CSS for a CMS but I'm having a problem with text color. I wanted the links to change from black to white text when hovered over. I seem to have achived this . . . until they have been clicked, and then that function is disabled and they just stay black all the time. I tried deleting cookies and temp internet folders. I tried using the :visited option in the CSS and putting color white in it and that didn't work. Can anyone help? Thanks for taking the time to read my question. I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why? Here is my css. @charset "iso-8859-1"; .text { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #ffffff } .textCopy { font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #CCCCCC; hover: #ffffff } .textbigger { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #CCCCCC; hover: #ffffff } a:hover { color: #ffffff; } a:link { color: #999999; } a:visited { color: #747474; } a:active { color: #CCCCCC; } body { margin-top: 0; background-color: #000000; } You can see this at work at www.pierced.ca Brad I have my links, and a:hover does not activate when the link has been visited. Is there any special for a hover visted link or any way to fix this? Whew, it's been a while sin'ce i've been here. Thanks in advance! ~Brendan Thanks for taking the time to read my question. It's been a while since I last tried making a page. I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have link, visited, and active all the same color. Only hover is different, and none of them are purple. I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working. HTML Code: <a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a> <a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a> CSS Code: a.NavButtons:link {
border-color: green;
border-width: 2px;
border-style: solid;
} /* unvisited link */
a.NavButtons:visited {
border-color: green;
border-width: 2px;
border-style: solid;
} /* visited link */
a.NavButtons:hover {
border-color: Red;
border-width: 2px;
border-style: solid;
} /* mouse over link */
a.NavButtons:active {
border-color: green;
border-width: 2px;
border-style: solid;
} /* selected link */
I am using an external CSS where I am defining the color of my links when un-visited, visited etc. The problem is in Netscape 7.1/7.2 those links which are calling my other pages, are being shown up as visited when clicked,. But those where I say href='javascript:void(0);my js function' are not being shown with the correct 'visited' link color. They are being shown in the color specified for 'un-visited' links!! Can someone help?? my layout is pretty simple... Code: <div class="container"> <div class="topbar"> <div class="list"> <div class="gametitle"></div> <div class="percentage"></div> <div class="system"></div> </div> </div> i have the following CSS applied to gametitle, percentage and system... for somereason, gametitle doesnt work... Code: .gametitle {
float:left;
width:250px;
color:#FFF;
}
.gametitle a:link,
.gametitle a:visted,
.gametitle a:hover {color:#FFF;}
.percentage {
float:left;
color:#FFF;
}
.percentage a:link,
.percentage a:visited,
.percentage a:hover {color:#FFF;}
.system {
float:right;
color:#FFF;
}
.system a:link,
.system a:visited,
.system a:hover {color:#FFF;}
here is the page where all this code is going down... Mini Catalog I have another problem with IE for Windows: I have several links which should not appear as links but should inherate the colors (grey or black) and decoration (none) from their parents ... works fine every where except MSIE for windows (where the usual red and blue - but no underline - appear) the relevant styles: <style type="text/css"> a:link { text-decoration: none; color: inherit; } a:visited { text-decoration: none; color: inherit; } </style> the relevant html: <h3 style="padding: 0; margin: 0.25em;color:#000000; ">Some <a href="http://www.theDanceGypsy.com/danceFinder.shtml" target="viewFrame">Dance Events</a> near you:</h3> <ul class="newsList"> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-26:6-4" target="viewFrame"><span class ="unconfirmed">6/25: Bernardston~ <cite>Eastern Squares</cite> </span></a></li> <li><a href="http://www.thedancegypsy.com/danceList.php?dance=dance-30:6-4" target="viewFrame">6/26: Brattleboro~ <cite>Paneurhythmy</cite> </a></li> anyone have any idea for a workaround? Thanx Code: <style>
.class1, .class1 a { color: blue; }
.class2, .class2 a { color: green; }
</style>
<div class="class1">
<a href="moo.html">This link shows up as blue</a>
<a href="moo2.html" class="class2">This link shows up as blue even though it should be green.</a>
</div>
Anyone know how to get around this without resorting to applying classes to every <a> tag.. ? Like say I want to change the color of a single link while leaving default to all the others.. I'm setting up my first CSS page and am having a problem I do not understand. I set up my CSS page "test.css" like this:<STYLE TYPE="text/css"> BODY {background-color: #C4C4C4} H1 {font-family: serif; font-style: italic; font-weight: 900; font-size: xx-large; color : #CC3300} H2 {font-family: Fantasy; font-style: normal; font-weight: 700; font-size: large; color : #666699} P {font-family: Arial, Helvetica, sans-serif; font-style: normal; font-size: x-small; color : #993366} B {background-color: #FFFFFF; font-size: medium} </STYLE> If I copy this code directly into my <HEAD> section, it all works as expected, but when I replace this with a <LINK REL="test.css"> statement, the background and bold styles do not work while all the rest work the same. Any ideas??? Joel ok here is a thing, it is also a firefox and ei related issue, when i specify background image for my link and specify lef-padding so that, small image that i attached looks like bulleting point, now if my width of the link is longer then my column then logically it will continue on a next line, and everything is great in firefox, but in ei what happens to background image it centers between two lines. So how can i fix it so it sticks to with in first boundary edges of the first line like in fire fox. to see example check the opticsblog.com Hi-- I'm sure I'm missing something incredible easy, but I'm working on no sleep so please help! I've got image buttons and for rollovers I want to have a simple color highlight on the top so I've got the image in the background of a <div> then in a nested <div> I put a 100% transparent .png inside a link tag. Using CSS, I said replace that with the semi-transparent .png. In Firefox it displays the highlight at the bottom of the button image; in IE 6, it doesn't even display the background. My code: 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=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
a img {border: none;}
.button {width: 193px; height: 116px; background-image:url(button.jpg);}
.button2 a:link {background-image:url(transparent.png); border: none; width: 193px; height: 116px; display: block;}
.button2 a:hover {background-image:url(hover.png); border: none; width: 193px; height: 116px;}
-->
</style></head>
<body>
<div class="button"><div class="button2"><a href="#"><img src="transparent.png" width="193" height="116" /></a></div></div>
</body>
</html>
hey everyone, need your help here. i have a run-of-the-mill FAQs page with questions at the top anchored (# links) to various text answer sections at the bottom. i have the following for links in my external css page: a:link { color: #4480D5; font-size: 12px; line-height: 1.6em; text-decoration: none; } a:visited { color: #FF9B21; text-decoration: none; } a:hover { color: #FFC51B; text-decoration: underline; } a:active { color: #4480d5; } it seems once i click a #link once, IE, in it's infinite stupidity, sees that this page has been visited, hence ALL my #links show up as visited. anyway I can get around this? if this is covered elsewhere, please point me to it thanks! so what do each one do? Thanks for reading my question. Why do my a:link, a:visited, a:hover, and a:active commands work for IE but not in FireFox? The hover works in both, but the visited only works in IE. I don't have a url for this page yet, so I've put it under my band web page. www.pierced.ca/Kelly/index.htm Try it with IE and you'll see that the visited works. Try it with FireFox and the visited doesn't work. Thanks again, Brad Having two problems, kind of related to browsers. 1) Most of the time, the site loads better under Firefox. For some reason, Firefox won't implement the text-decoration:none attribute. Any ideas? 2) Also, the on hover flip filter doesn't seem to be working in IE, which i was told was the only browser that would work in? I think I used bad syntax, but can't find it. Help would be appreciated! edit--i used the html validation and the css one, the html said I cant use the xspace and vspace in this iframe: <iframe class="fade" style="position:absolute; top:125; left:200;" src="blog.html" width="400" height="400" frameborder="0" align="left" xspace="3" vspace="3"></iframe> this is the only i frame I use, and was something I got off a frames tutorial... guess i didn't learn it well enough? was a ton more wrong with the css, but it wasn't like the html validator and telling me where i went wrong. here is the full css file: .fade{filter:alpha(opacity=70); -moz-opacity:0.7; background:#ffffff;} font, td{color:#0000FF; font-size:medium; font-family:sans-serif; font:"Comic Sans MS",Tahoma;} a,a:link,a:visited,a:hover,a:active { font-size:medium; font-weight:bold; font-family:sans-serif; font:"Comic Sans MS",Tahoma; text-decoration:none; } .link1 a:link { color:#0000FF; } .link1 a:visited { color:#0000FF; } .link1 a:hover { color:#0000FF; filter:flipv; } .link1 a:active { color:#0000FF; } .link2 a:link { color:#0000F5; } .link2 a:visited { color:#0000F5; } .link2 a:hover { color:#0000F5; filter:flipv; } .link2 a:active { color:#0000F5; } could someone please help me figure out what I did to my fonts, and where the links are preventing the underline decoration from being disabled? Hi, i have 2 links with email and website. After visited these two links, both should appear yellow (a:visited). Well, with the IE everything functions marvelously, but with the Netscape only one link (website) functioned, but email does not activate itself yellow after the attendance. Here is the Code: Code:
style type="text/css">
<!--
a:link {color: #000000; font-family: Verdana; font-size: 10px; text-decoration:none; }
a:visited {color: #ffff00; font-family: Verdana; font-size: 10px; text-decoration:none;}
a:hover {color: #ffcc33; font-family: Verdana; font-size: 10px; text-decoration:none;}
p {
font-family: Verdana;
font-size: 12px;
color: #ccffff;
}
body {
background-color: #9095af;
}
.style1 {color: #ccffff; font-family: Verdana; font-size: 11px; }
.style2 {color: #ccffff; font-family: Verdana; font-size: 20px; }
.style3 {color: #000000; font-family: Verdana; font-size: 12px; }
.style4 {color: #000000; font-family: Verdana; font-size: 10px; }
-->
</style>
if($email) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='mailto:$email'>$email</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
if($website) {
$eintrag= "<tr><td><span class='style3'>$text</span></td></tr>";
$eintrag.="<tr><td><a href='$website'>$website</a>, <span class='style4'>$datum</span></td></tr>";
$eintrag.="<tr><td><hr></td></tr>\n";
}
What's the problem here??? Greetings I have been having a problem with my CSS. I want to make my visited links just a big bigger than my unvisited links so that the users can know where they been Code:
#mainCategories a:link{
font-size:.55em;
}
#mainCategories a:visited{
font-size:.65em;
}
#mainCategories a:hover{
font-size:.65em;
}
#mainCategories a:active{
font-size:.65em;
}
it changes size on a:hover but not on a:visited Is there a way to tell the browser not to change the color of a visited link? I have an anchor around some text, but I don't know the color setting of the text. When I visit the link, I just want the text to retain its color based on the other CSS declarations in effect for the text. So, is there a way to specify a:visited { color: do-not-change; }? Hi Im new to css I will be probably be asking all sorts of questions. thanks peter |
|||||||