On a a website I am currently working on, I have issues with underlining links on hover. Although declaring text-decoration: underline on hovering links, it doesn't work properly. I can't explain it myself.
Look at the website itself (it's the links on the bottom right corner): http://nils.zamaitat.de/#contact
It's the same with the dropdown menu "Projects" on the home section: The links that fade in can't handle the underlining properly as well: http://nils.zamaitat.de/#home
This is what I have in my CSS:
section.contact .links ul > li a:hover
{
text-decoration: underline;
}
nav ul li ul > li a:hover {
text-decoration: underline;
}
Thank you very much in advance!
You have text-decoration: none; in style.css. This CSS is telling the browser to render all hyperlinks with no text decoration. You'll need to override that CSS by supplying the !important declaration.
So for the links that you would like to be underlined, simply add the !important declaration to its corresponding CSS ID or Class.
Example
Change from:
a.exampleLinkClass{text-decoration:underline}
to this:
a.exampleLinkClass{text-decoration:underline !important}
Line 444 of style.css:
.contact div.links ul > li a
That's how the links in the bottom right are being initially styled. That means in order to override it, even when triggering it in an altered state, you need to call it by the same identifier inititially used with :hover appended to it, or you need to use text-decoration: underline !important; to force the rule to take place.
This situation is very common when css is overscoped and overcomplicated. It becomes easy to lose track of what identifier was targeted to which element.
.contact div.links ul > li a could be changed to just .contact .links a since you're using single level li elements and not a dropdown there.
Hope that helps.
Your CSS is just fine, no problems there.
Its the font - its not working properly in webkit browsers - It looks fine in firefox. Try changing the font to for example Helvetica and it works fine.
Now why its not working - pfff dunno ;D Never seen that font before.
EDIT: Ahhh its prolly your font-face, you have only supplied a eot file. From css3please.com:
#font-face {
font-family: 'WebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
So you need to supply a woff type also - you can generate it on fontsquirrel.com
Related
I have been struggling to get consistent and nice looking fonts across all browsers with the QuickSand Google font. Chrome and IE show very jagged and pixelated edges, especially at smaller font sizes. Zooming the browser will often make the artifacts disappear.
Here is a screenshot comparison of the issue with Firefox, Chrome, & Internet Explorer:
https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png
Here is a jsfiddle reproducing the issue for experimentation:
http://jsfiddle.net/vXd2F/
#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active {
color: white;
display: inline-block;
padding: 19px 10px;
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif;
text-transform: uppercase;}
The problem was due to Google Fonts not implementing all of the font file types. The solution was to use font squirrel web font generator to generate the missing file types and host them myself.
You can't do too much with the font rendering on the browsers. You can try with font-face if that can make it better, but otherwise it can't be changed.
For webkit (Chrome,Safari) you can add:
-webkit-text-stroke: 1px black;
In order to mask the problem a little but the text will become ticker.
background-color doesn't work on a:visited but it works if i add any background color to a {background:#fff}, Is it a bug?
See this example http://jsfiddle.net/jitendravyas/CMWWm/1/ green background on a:visited will not work. But
Now if i add a {background:#fff} at top then green background on a:visited will start to work. http://jsfiddle.net/jitendravyas/D6vGX/1/
Check it, Firefox doing something privacy-related changes to :visited , Its looking strange,
We’re limiting the CSS properties that can be used to style visited
links to color, background-color, border-*-color, and outline-color
and the color parts of the fill and stroke properties. For any other
parts of the style for visited links, the style for unvisited links is
used instead.
--from mozilla
http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
hm, works if you add background-color: white to your a:link.
a:link {
color: red;
font-size: 3em;
background-color: white;
}
i'm not sure if this is relly a bug or something else.
I was able to get the navigation dropdown to show the letters in a different color from the background (white in this case) in Chrome browser. But when I view the same page in IE or FF, the whole background is just all green.
Here is an example of such a page:
http://www.comehike.com/hikes/hikes_and_groups.php
And here is the CSS code that makes the color show up white in Chrome
#navigation li li a {
color: #white;
text-decoration:none;
}
To see the difference, just mouse over the top right where it says "community" or "hikes"
Thanks,
Alex
take out the hash symbol from color: #white. "white" is a keyword, the hash signifies it's a color coded in hexadecimal, such as #fff.
#navigation li li a {
color: white;
}
I seem to be having a problem with styling my links for chrome, yet it works in safari.
I have my normal styling like this:
a:link {
color:#000;
text-decoration:none;
}
a:hover {
color:#c40000;
} etc....
Now this works on some of the links but it doesn't work on them all, i can only get it to work on the other ones by drilling down in to the div.. example:
.col a:hover {
color:#c40000;
}
I have searched but haven't found any solutions apart from setting styles for every div that has a link in it... which seems stupid.
Thanks a lot.
UPDATE - Just checked on my laptop and this is an OSX issue, works fine on chrome on my vista laptop just not on my iMac ;/
Try using:
a:hover {
color:#c40000 !important;
}
The !important keyword will override any previous styles.
This is the site which has a problem
http://www.clubforeducation.com/
Top menu will change its color at mouse over. All browsers except chrome and Safari. Is it a Webkit bug. If that how can i solve this?
I find setting display:block on the <a> works. I don't recommend li:hover because it doesn't work in IE6
Seems like a webkit hover behavior thingy.
Check this out:
CSS Hover + Element crashing in webkit (Chrome, Safari)
Changing/ the selector from
.menu_center ul li a:hover
to
.menu_center ul li:hover a
Or combining both:
.menu_center ul li a:hover,
.menu_center ul li:hover a
{ .... }
works for me.
I found that adding href="#" works as a temporary fix. Seems like this is a pretty recent development.
Usually the best fix is to add -webkit-transform: translate3d(0,0,0)on the elements that have the transition in Safari. I've got the same problem and fix it Hover bugs with :before On Safari