The site I am working on: http://www.GreenvilleOsaka.com/
I am trying to highlight the current page the user is on, but my rule as seen below only seems to disable highlight color causing the link to retain its normal color:
.current-menu-item a:link {color:#FFFFFF;}
Oddly enough, when I inspect it with Google Chrome, it changes to the hover color (grey) but the inspector matched CSS rules shows white (the correct color), and even weirder, the computed styles shows the original link color (gold).
If I open inspector some other way then walk to the current menu item, it stays the wrong color (normal, gold) but the inspector shows the correct color (white) in both computed and matched CSS rules.
Any help would be appreciated!!!
(Inspecting in FF with FireBug shows correct colors while the is gold)
Change your css from
.current-menu-item a:link {color:#FFFFFF;}
to
.current-menu-item a {color:#FFFFFF;}
Related
bring this up and admin is purple, then will correctly do gray and lightgray. Can not determine where the purple comes from. Tried in 3 major browser, never happened before and can not determine where this purple color comes from. Have whittled code down to these few lines but still no success.
<HTML>
<a href="#" onmouseover="this.style.color='GRAY'"
onmouseout="this.style.color='LIGHTGRAY'">admin</a>
</BODY>
</HTML>
In most browsers, the default color for visited links is purple*. It's initially showing up as purple because 1) it's a link you've clicked on before and 2) you don't have any styles overriding the browser's default color for visited links.
If you want the text to always be light gray when the mouse isn't hovering over it, you should use CSS to set that as the default color for links, like this:
a:link, a:visited {
color: #333333;
}
a:hover {
color:#CCCCCC;
}
<p>Example Link #1</p>
<p>Example Link #2</p>
<p>Example Link #3</p>
*You can check this in:
Firefox by going to Tools > Options > Content > Colors
In IE by going to Settings > Options > General Tab > Appearance > Colors
In Opera by going to Settings > Preferences > Webpages
(Chrome is different)
NOTE: You might annoy site visitors by making visited links the exact same color as unvisited links. You may want to consider letting those be a different color, even if you don't want them purple.
<HTML>
<BODY>
admin
</BODY>
</HTML>
Just add the style="color: LIGHTGRAY;",
works for me: http://jsfiddle.net/e4yzL8bz/1/
I've been at this for over an hour. Chrome on Android seems to put a bluish color over active links or the parent of the active links. See the screenshot for what I am talking about. That is a nav with a ul, and an li and a tag for the "HOME" link there. I'm trying to make it look like the one below it all of the time. I've tried everything, a:active, li:active overriding the background color, but it always has that blue.
Anybody know which style it is in the user agent stylesheet that does that so I can override it? Or is it not possible to override?
OK figured it out. It was -webkit-tap-highlight-color, very much hidden in the dev tools.
I'm having trouble with a -webkit-transition effect in a HTML page. The page is here:
http://www.newerawrestling.co.uk/new/
Basically, the colour of the links within the main sections (marked up in a <section> tag respectively) seem to be broken. They should be an off-white (#F5F5F5) and transition to a gold (#FFCC00) on hover, but they display as grey and flicker between both white and gold on hover but don't act as they should.
I've validated both the HTML and the CSS; the HTML passed with the CSS failed for containing CSS3 selectors and declarations (as far as could see) and I've inspected the links using Chrome's Web Inspector, but couldn't see any conflicting rules.
Has any one had this problem, or able to see where I've gone wrong?
Crap. As if by sod's law, I've just spotted the mistake after posting this question: I had a rule:
footer a:link, a:visited {
color: #999;
}
D'oh!
I have created a site and it looks great in every browser except IE8, there it appears that the links, when visited shift right and the clickable area migrates away from the text. Is there any easy way to fix this?
Site is online here:
http://serif.cz/clients/bikram/
It appears this CSS rule #fade A:link, A:visited is causing the problem because the 2nd part is applying the rule to all anchor tags.
Change it to...
#fade A:link, #fade A:visited
I have a navigation bar with some nodes that have a drop down menu to show more options, everything works wonderfully in IE/Firefox but in Chrome on :hover the links go transparent instead of having a nice background color like in IE and Firefox.
Here is a JSFiddle, if you run it in Chrome and hover over the Admin option you will see the drop down and extended options, when hovering over those they should display similar to the top level items but they do not.
http://jsfiddle.net/6jX5J/
Anyone see any problems in the HTML or CSS?
Thanks!
Try changing you CSS selector from descendant to a child selector in:
#nav li:hover
Change to
#nav>li:hover