|
CSS - Newbie Help: Hover Not Working On Visited Links
Good day,
I am a newbie, both to CSS and to these forums. I recently undertook a job to update a website for a charity and am dealing with the previous webmasters coding, both html and css. I am trying to modernize the site a bit, it is very 1997. I am running into a bit of trouble with the hover class on one of my pages. When a link has been visited, it no longer changes color and highlights on hover. I read on multiple forums, this one included that it is because you must define hover last, after visited, active, etc. I did this, but still does not work. I am using Firefox 2. Here is the code I am working with, sorry that is is a bit lengthy, I don't know what parts are important or not because when I just change the hover, link, visted part it doesn't work. The page I am working with is at beverlyfoundation . org / library / index . html /* THE BASICS */ body { font-family: Verdana, Helvetica, Arial, sans-serif; color: #eaf5ff; margin: 0px; padding: 0px; background-color: #c2d8ec; } p { margin-top: 0px; margin-right: 0px; margin-bottom: 14px; margin-left: 0px; } img { border: none; } a:link, a:visited { text-decoration: none; color: #EAF5FF; } a:active, a:hover { text-decoration: underline; color: #E51322; } /* HEADERS */ h1, h2, h3 { font-family: Helvetica, Arial, Verdana, sans-serif; margin: 0px 0px 14px; } h1 { font-size: 220%; text-align: right; font-style: italic; } h2 { font-size: 140%; } ul { list-style-position: outside; list-style-type: square; } /* TOP COLORED LINKS */ .navcells { text-align: center; vertical-align: middle; padding: 2px; font-weight: bold; font-size: 11px; } #navlinks a:link, a:visited { text-decoration: none; color: #EAF5FF; } #navlinks a:hover, a:active { text-decoration: underline; color: #EAF5FF; } /* LAYOUT */ #header { margin: 0px; padding: 0px; background-attachment: fixed; background-image: url(../images/header_gradient01_bg.jpg); background-repeat: repeat-x; background-position: left top; } #content { padding: 10px 20px 10px 10px; background-color: #0060BE; text-align: left; vertical-align: top; font-size: 12px; } #rightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #splashrightcolumn { background-color: #0060BE; padding: 10px; width: 220px; font-size: 11px; } #rightcolumn img { margin-top: 0px; margin-right: 0px; margin-bottom: 10px; margin-left: 0px; } #rightcolumn p { margin-top: 0px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; } #rightcolumn h1 { font-size: 180%; text-align: center; font-style: italic; } #rightcolumn h2 { margin-top: 21px; margin-right: 0px; margin-bottom: 7px; margin-left: 0px; text-align: center; } #rightcolumn a:link, a:visited { text-decoration: none; color: #EAF5FF; } #rightcolumn a:hover, a:active { text-decoration: underline; color: #EAF5FF; } #threecolumn { padding: 10px; width: 220px; text-align: left; vertical-align: top; font-size: 12px; } #threecolumn a:link, a:visited { color: #EAF5FF; text-decoration: none; } #threecolumn a:hover, a:active { color: #EAF5FF; text-decoration: underline; } #footer { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; line-height: 14px; } #footer a { color: #EAF5FF; text-decoration: none; } #address { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; border-left-width: 1px; border-top-color: #EAF5FF; border-right-color: #EAF5FF; border-bottom-color: #EAF5FF; border-left-color: #EAF5FF; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; } #address a { color: #EAF5FF; text-decoration: underline; } #address h2 { margin: 0px; } .threecolumns { color: #EAF5FF; padding: 10px; font-size: 11px; text-align: left; vertical-align: top; } .resourcestore p { margin-top: 0px; margin-right: 0px; margin-bottom: 4px; margin-left: 0px; } .gradientrow { background-image: url(../images/footer_bg01.jpg); } .copyright { font-size: 10px; } .resourcestore { padding: 10px; } Similar TutorialsI 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 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 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 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? 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 */
Hi. 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? 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; }? 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 That title is probably a little confusing but it is what's happening. I have an inline list (<li>) that will shift to the right when I hover over links that have been visited. The links that have never been visited do not cause this problem. It's very strange and I'm not sure what's up. The page... http://www.vaska.com/a/ The css... http://www.vaska.com/a/css/c.css To get the menu to appear, hover over the "menu/options" and it will appear. I know for a fact that these issues are not becaused by the javascript in this file...somehow it's a CSS issue. I'm having the problem in Safari and Firefox...I'm not sure about IE/PC and such, but I'm betting the problem is there as well. Thanks for any help...v Hi, I'm looking for some help with CSS, specifically "a:visitied". I want the hover over behaviour to remain the same on html links regardless of whether or not they're already in your history. Is there a way i can do this? Many Thanks. I have a drop down menu located at http://www.fieldspianos.com/new/index.php If you hover over the menu items they turn black and white when you are right on the text but not if you are in the area surrounding it which is what I also need to occur. You can view the source on the page for the html but I will include the css below. This is the basic layout of the menu: Code:
<ul>
<li>About Us</li>
<ul>
<li><a href="#">Locations</a></li>
etc..etc..etc.. Here is the css: Code:
/*Begin Content of drop down menu*/
a {
outline:none;
}
* html div#dropdownmenu ul {
float: left;
}
* {
margin: 0;
padding: 0;
}
div#dropdownmenu {
float: left;
background-color: #C8C6C6;
font-size:11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
div#dropdownmenu ul li {
list-style-type: none;
float: left;
background-color: #000000;
position: relative;
}
div#dropdownmenu ul li:hover {
list-style-type: none;
background-color: #000000;
}
/*Hides drop downs when not overed over and reveals them when they are hovered over.*/
body div#dropdownmenu ul li ul {
display: none;
}
body div#dropdownmenu ul li:hover ul {
display: block;
}
div#dropdownmenu ul li ul {
margin: 0;
width: 13em;
position: absolute;
left: -1px;
}
div#dropdownmenu ul li ul li {
width: 100%;
background-color:#bdb35e;
color: #660000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
padding: 3px;
}
div#dropdownmenu ul li ul li:first-child {
border-top: 1px solid #000;
}
div#dropdownmenu ul li ul li:hover {
color: #FFFFFF;
background-color: #000000;
}
div#dropdownmenu ul li ul li a {
color: #660000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li ul li a:hover {
color: #FFFFFF;
background-color: #000000;
text-decoration:none;
outline: none;
}
div#dropdownmenu ul li:hover ul, div#dropdownmenu ul li ul:hover {
display: block;
}
Any help is greatly appreciated, this seems like it would be a simple fix but I can't figure it out. Maybe I am overlooking some small detail. Thanks! Hi. I created this test page and right now if you mouse over the link it will have a pop up details but that box is not on the right position. How can I make that red box show up right below the link? Also is it possible to have the pop up box show up near the mouse pointer? Let's it the link is very long and when it's mouse over but moving to the left. Can I have that box follow the mouse pointer? Hope you know what I mean? Also if my links are at the end of the line in the browser(near the scroll-up-down bar) and my data inside the box contains multiple lines how can I make the content appearance won't change? Sorry if I didn't explain that clear but I really appreciate if anyone can help me on this. Thank you!!! Here's the link: http://yourbestproduct.com/test2.html Please view the source code on that link!!! Hey, Just making a site for a friend and I have run into a block with the Hover tag. It works fine in IE but for some reason other browsers aren't working properly... Any ideas? I have put my source underneath, sorry its squashed up. I have also loaded the site to the domain but won't put the link - not sure if I'm allowed. 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" lang="en" xml:lang="en"> <head> <title>Innovate Photography - Home</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="StyleSheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="wrap"> <div id="header"> <img src="images/logo2.png" alt="logo - Innovate photography" width="780" height="62" /> </div> <ul id="nav_bar"> <li><b href="index.html">Home</b></li> <li><a href="about.html">About Us</a></li> <li><a href="gallery.html">Gallery</a></li> <li><a href="disability.html">Disability</a></li> </ul> <div id="slideshow"> <img src="images/index_page/1.jpg" alt="Slideshow Image 1" class="active" /> <img src="Images/index_page/2.jpg" alt="Slideshow Image 2"/> <img src="Images/index_page/3.jpg" alt="Slideshow Image 3"/> <img src="Images/index_page/4.jpg" alt="Slideshow Image 3"/> </div> <!--Java image gallery - Index Page --> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript"> /*** Simple jQuery Slideshow Script Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :) ***/ function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); var $sibs = $active.siblings(); var rndNum = Math.floor(Math.random() * $sibs.length ); var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); }); </script> <div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut et mi magna, non sodales augue. Aliquam porta, risus id euismod egestas, lacus velit tincidunt quam, in sodales enim urna et dui. Duis interdum libero at dolor aliquet nec ultricies lacus interdum. Proin non consequat erat. Sed varius, libero id bibendum aliquam, arcu augue ultrices dui, placerat laoreet dolor nibh et nunc. Ut dui magna, semper quis sagittis sed, faucibus ac ante. Nulla imperdiet tempor orci vel varius. Aliquam porta placerat tortor, non dignissim libero elementum ac. Mauris in magna in ligula tincidunt viverra non vestibulum elit. Etiam hendrerit leo non mauris consectetur nec blandit orci auctor. Sed felis felis, facilisis nec posuere ac, accumsan nec est. Aenean sapien magna, commodo ut sagittis gravida, varius eget magna. Etiam ligula sem, faucibus eget tristique quis, hendrerit vitae justo. Maecenas fermentum sollicitudin sodales. Ut non aliquet neque. Mauris sagittis gravida purus nec consequat. Sed in quam leo.</p> <p>Phasellus quis orci ligula. Curabitur quis neque ultricies ante adipiscing vehicula. Morbi blandit, purus dictum pharetra feugiat, magna ipsum lobortis velit, eu blandit turpis ipsum at arcu. Vestibulum non mauris felis. Curabitur viverra arcu eget tortor pellentesque a laoreet mauris mattis. Sed et ligula tortor, eget laoreet mauris. Integer nunc enim, tristique eu tempus at, vehicula non enim. Maecenas sed porttitor lorem. Nam ultricies, nisl rutrum vulputate facilisis, enim purus commodo elit, sed pretium tortor ligula quis lectus. Aliquam erat volutpat. Duis euismod placerat nisi ac adipiscing. Fusce varius pellentesque sapien, eu placerat neque mattis pharetra. Aenean mollis neque sed mi pretium sodales. Aenean fringilla rhoncus tincidunt. Sed vel odio et sem condimentum iaculis.</p> <p>In mollis posuere tortor, at euismod sem fermentum nec. Aenean euismod, neque sit amet tincidunt mattis, risus nunc bibendum mi, non malesuada purus eros ut urna. Donec accumsan sagittis nibh, auctor ultricies massa tincidunt et. Phasellus quam nunc, pretium eu dictum at, porttitor a dolor. Etiam nec odio felis, nec aliquam nibh. Sed eleifend, odio faucibus venenatis vulputate, orci neque mattis augue, sed consectetur tellus lorem a lacus. Aliquam diam ipsum, consectetur et tempus non, suscipit nec orci. Donec dignissim lobortis gravida. Integer ornare diam vitae elit tristique a auctor lorem condimentum. Sed sapien nisi, ullamcorper at gravida vitae, mollis vel mauris. In non tortor ante, nec scelerisque elit. Etiam tristique, magna quis tristique ultrices, nunc tellus tempus lorem, a suscipit tortor magna at dui.</p> </div> </div> </body> </html>
Code: /* Index Markup */ * { padding: 0px; margin: 0px; } body { background-color: #ffffff; margin:0; padding:0; border:0; min-width:700px; font-size:100%; } #wrap { width:750px; margin:0 auto; padding-top: 20px; } #header {width: 200px; padding-left: 0px;} #nav { margin:0 auto; font:Palatino; } #nav_bar { width: 100%; float: left; margin: 0 0 3em 0; padding: 0; list-style: none; font:Palatino; padding-left: 190px; } #nav_bar li { float: left;} #nav_bar li a { display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; } #nav_bar li b {display: block; padding: 8px 15px; text-decoration: none; font-weight: bold; color: #069; border-right: 1px dotted #000; font:Palatino; border-left: 1px dotted #000; } #nav_bar a:hover {color: #000;} #nav_bar b:hover {color: #000;} #nav_bar:hover {color: #000;} h2 { font:Palatino; font-size:15px; text-decoration: none; } /*** Slideshow positioning **/ #slideshow { position:relative; width: 570px; height: 400px; padding-bottom: 10px; } #slideshow IMG { position:absolute; top:55px; right: -40px; z-index:10; } #slideshow IMG.active { z-index:10; opacity:1.0; } #slideshow IMG.last-active { z-index:9; } #content { position: relative; width: 670px; padding-top: 20px; font:Palatino; font-size:12px; color: #1e54ef; padding-bottom: 20px; padding-left: 30px; } #photo { } #index_style { position:absolute; left:50px; top:150px;} #index_button { position:absolute; left:750px; top:400px; } #index_button a { font-size: 30px; font:Palatino; } #index_button a:hover {color: #1e54ef} #index_button a:link {text-decoration: none; font-family:Georgia,serif;}
Hi everybody I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around. I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other. I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant. I was wondering if someone out there has a better solution to this? Thanks in advance. Hello, I'm having a problem getting my drop-down to appear in IE7. Works in IE8. Any suggestions? http://www.mo-pca.org Thanks, -Jamie why won't this work on internet explorer a:hover img { }. This is exactly what i'm using, it works on firefox but doesn't work on IE. You can see it in action here. Code:
a:hover img { border: 2px solid #fff; }
A few people seem to have had the problem of the a:hover not working right in ie when applied to images. Mine is just applied to a standard bit of text. In my menu (CSS only, no javascript) the descriptions are "display:none" in the initial "a" state and then "display:block" in the a:hover state. Works in Firefox, but not ie. Any ideas? My page is at www.prioritypie.f2s.com/KSA/about.htm You can see the CSS by clicking on the first link on the left hand side of the page. Thanks to anyone who can take away the pain and swearing of the last couple of hours. i am having trouble with a hover button. it works fine in just an HTML page but when i put it on a CSS & php page nothing happens when i hover over it can anyone advise me on how to resolve this please.....thank you here is the code i am using for the button.... Code:
<a href="productinfo.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Add Button','','images/buttons/infoover.jpg',1)"><img src="images/buttons/info.jpg" name="Add Button" width="32" height="31" border="0"></a>
Thanks in advanced to any replies RF Hi all, I have this piece of coding (which I'm pretty new at) that allows a "display:none;" span to appear on a link:hover. It works great in Firefox, but I can't for the life of me find why it isn't working in IE. I did this once with an Unordered List and it worked in IE, but now that I have used a table to structure the menu, it isn't working. here is the site: magicbeanz.blogsome.com I've attached the style sheet and html to this post. The relavent coding should be near the bottom. See #catmenu and the #books, #movies, #other, #hobbies, #games, divs. I really hope someone can help. Thanks in advance!! Oh, and I wouldn't mind some feedback on the coding and design. I'm back to working on my skills after a long break >< |
|||||||