I want to be able to link my image. Click on it. Go back to the page and see that it was visited.
I want my visited images to have a different color border when I go back.
My code:
a:link img{border-color:#FFF; border-style:solid; border-width:1px;}
a:hover img{border-color:#03F; border-style:solid; border-width:1px;}
a:visited img, a:active img{border-color:#036; border-style:solid; border-width:1px;}
Any ideas would be appreciated.
Link CSS can be hard to get right, because many browsers can be quirky about it. The best order to declare link CSS is
Link
Visited
Hover
Active
(Also remembered as the mnemonic LoVe/HAte).
Also, try declaring your css:
a:hover img {border: 1px solid #036;}
instead of specifying it in three different declarations.
It may help to tell us which browser isn't working, because they all handle anchor links that have embedded text differently.
Related
For some reason when I hover over the anchors in #navigationText, only the cursor changed to pointer, but the text-decoration:underline does not take effect.
Any idea why this is happening and how I can fix it?
My css says:
#navigationText a:hover{
cursor:pointer;
text-decoration:underline;
}
Here is a live link to the page where it is not happening: https://dl.dropbox.com/u/270523/help/initializr/index.html
I figured out that even though the underline is not appearing, the bottom-border is and on hover.
So if I change the on hover css to:
#navigationText a:hover{
border-bottom:1px solid #000;
}
This is not the same, but it is a similar effect.
Try setting the font-family to a more generic/default typeface. When I toggle font-family:'Trend'; on line 95 of main.css via Chrome Dev Tools, the underline shows up on hover.
I'm not sure WHY it's happening, but I think that'll fix the issue.
I started using bootstrap now and really like it but a problem came up now.
I made an adapted navbar and when a tab is selected, there is a spotted border that I dont like. How can I prevent this border (CSS)?
Can you add some code?
I think somewhere in your CSS you will find something like: border: 1px dotted #ccc; Change that to: border: none;
Depending on what class/id you have it will be something along the lines of:
border:none;
I am going to go out on a limb and assume the HTML for your tab is an . If so, make sure you are explicitly defining the border you want in all of its states (CSS psuedo-classes), specifically :active
a:link {border-width:0;} /* unvisited link */
a:visited {border-width:0;} /* visited link */
a:hover {border-width:0;} /* mouse over link */
a:active {border-width:0;} /* selected link */
http://www.w3schools.com/css/css_pseudo_classes.asp
I am developing my first website using html5boilerplate and I'm experiencing a strange thing. When doing an anchor and clicking it, it moves to the right. This it only happens on Firefox and not on Chrome, for example.
You can see an example of this with my exact CSS: http://jsfiddle.net/PuEzv/
How I can solve it?
Thank you in advance!
Its a bit late to answer, but still:
Remove or modify following code to avoid the "jumping" for all links:
#submenu a, a:active, a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
To keep it enabled for #submenu, I think you muste write your css selectors like this:
#submenu a,#submenu a:active,#submenu a:visited {color:#f1f1f0; margin-left:1px; margin-right: 1px;}
I hope that helped!
Here's a screenshot of the problem:
Notice that we're on the stalk page. The CSS I wrote is supposed to change the color of the active page. Here is the CSS:
#nav {
border-top:10px solid #A7C1D1;
height:45px;
padding-left:100px;
padding-top:20px;
margin-left:0;
color:#000;
}
#nav a {
color:#000;
text-decoration:none;
}
#nav a:visited {
color:#000;
}
#nav a:hover {
color:#93AFBF;
}
#nav .active {
color:#93AFBF;
}
Before, I had the CSS for #nav .active to create a border around the active page. This worked and I could see the border around the word "stalk" when I was on the /stalk page. But this time around, I decided to just change the color of the word. This is where I ran into the issue.
Here is the HTML rendered for the page:
<div id="nav">
home · stalk · link3 · link4
</div>
If I take away the CSS for #nav a:visited then the CSS for #nav .active works, but now the visited links are blue when I want them to stay black.
Use
#nav a.active {
color:#93AFBF;
}
The #nav a:visited has higher specificity w3 specs than #nav .active and thus gets applied.
Try
#nav a.active
{
color: #93afbf
}
That should do it.
try:
#nav a:link {color: #000;}
#nav a:visited {color: #000;}
#nav a:hover {color: #93afbf;}
#nav a:active {color: #93afbf;}
You are confusing the active pseudo class
Site Point Refrence
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Similar Problem
Border property is not inherited while color property it is. So you inherit the color property for your link from the #nav, while the border property was the one declared in the "active" class rules. You should declare the color property for the link with the "active" class as suggested by Gaby
Tonight I found an unusual one. (A link color that I couldn't change.) I went into the inspector and first found the text-decoration-color property set. But no, that would be too easy. I scroll down to color and find this :not selector, which a theme author created. In my specific case, the solution was to duplicate (overwrite) this weird selector with the color I wanted:
#the-post .entry-content a:not(.shortc-button) {
color: white !important;
}
My suggestion is to go into your inspector (F12) and find the "Computed" tab and look where the colors are coming from. Usually it's straightforward where the color is coming from, and the inspector will even tell you which file and which line number set the color. Then the decision is, do you have access/permission to that file? Or maybe you have access, but do you necessarily want access to that file?
If you want to avoid changing the source of the color, for whatever reason, you can just re-declare the color again further down the page, like in your footer, or immediately after the theme is loaded, whatever the case may be. Of course given the option, it's usually preferable to find the root of the problem and then you end up using less CSS code which loads faster and is easier to maintain.
I am trying to add an icon to all unvisited links on a particular Wordpress category page.
Here is the CSS code I'm using. I have put it at the bottom of my last CSS file.
.category-xyzzy .entry-title a:link {
background-image: url("/new-star.png");
background-repeat: no-repeat;
color: pink;
}
.category-xyzzy .entry-title a:visited {
background: none;
}
The weird thing is that the background image is being added to all links (visited or unvisited) but the pink colour is only being applied to the unvisited links.
This is happening in multiple browsers.
The fact that only the unvisited links are being coloured pink would seem to indicate that my first selector is working properly, but I can't understand why the background image, which appears in the same CSS rule and nowhere else is being applied to all links.
In fact I only added the second rule which matches against a:visited as an attempt to force the issue. The problem occurs whether the second rule is specified or not.
Are you viewing in Chrome? You will probably find that it DOES work in FF. But that will stop soon probably. More here: Google chrome a:visited background image not working
You could add important to your unvisited link.
.category-xyzzy .entry-title a:visited {
background: none !important;
}