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.
Related
How can I remove the drop down arrow normally displayed by FireFox? I have uploaded an image of what I am working with below:
I am using this css:
#-moz-document url-prefix(){
.class select { width: 110%; }
}
.class > select {
-moz-appearance: none !important;
text-indent: 0.01px !important;
text-overflow: "" !important;
}
Please help me to solve this issue.
It is not possible that way. Best way is to fake it and create your own customized <select>.
Have a look at this fiddle I created http://jsfiddle.net/JayKandari/FWLRw/5/
This trick stopped working as of Firefox 30 realeased in 2014-06-10.
You can upvote the bug on Bugzilla for a definitive fix.
Option 1:
Remove the custom styles on Firefox only through a url-prefix media query, like:
#-moz-document url-prefix() {
select {
background-image: none;
}
Option 2:
Here is a solution
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
My website is http://proustscookies.blogspot.com/. I'm working on styling the buttons attached to the Search form using CSS.
Here is the CSS:
input.gsc-search-button {
margin-left: 10px;
height: 24px;
width: 60px;
border-style: none;
background-color: #666666;
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
color: #FFFFFF;
}
The margin-left command is working great in Firefox and Chrome, but not at all in Safari.
All other CSS rules (above and throughout the site, data not shown) are working in all three browsers (and last time I checked also in IE).
I found the object name (input.gsc-search-button) using the Chrome Extension Stylebot. Unfortunately I can't find the underlying html anywhere (This is a blogger-sponsered widget. Could Google be hiding the code somewhere? I don't know.)
If anybody could help me figure out why the margin isn't showing in Safari, or how to find the html for the Search box, I would appreciate it very much.
It's overridden by google.
If you do:
margin-left: 10px!important;
You can override that.
Or you could make your selector more specific (and hence give it precedence) by doing something like
td.gsc-search-button input.gsc-search-button {
margin-left: 10px;
}
Hint: you can right click on an element (in firefox or chrome) and click "inspect element" to see the css associated with that element.
I had a similar issue where all styles were applied correctly except on mobile safari, very strange. It even worked on desktop safari!
In the end, I fixed it with more exact targeting. I had this before:
.phone{
background-color:gray;
}
This change fixed it.
div.phone {
background-color:gray;
}
By the way, I figured it out with using inspector on mobile safari. http://webdesign.tutsplus.com/articles/quick-tip-using-web-inspector-to-debug-mobile-safari--webdesign-8787
i am developing a site and getting black outline in ie8
its looking great in all other major browser but not in ie-8
please help me this is my live link
http://www.cadellfoods.com.au/food-service-products.html
(the section in circular shape)
please help me
the code for all images is as following
#Section1
{
background:transparent url('Images/Chilled.png') no-repeat;
background-repeat:no-repeat;
border:none; outline:none; outline:0;
border-width: 0;
}
Seems OK in IE 8 too here. maybe you have issues in IE 8 on windows XP
as a good practice, you should not start your ID's or classes with capital letters.
Might not be it, but I have noticed IE puts borders on linked images. You need to undo those defaults.
#Section1 a:link img {
border:none;
}
Don't forget the :hover and :visited pseudos.
Just in case try these too
#Section1 img {
border:none;
}
#Section1 a:link {
border:none;
}
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