Im building a website and I cant get this text color to change.
(link to full size image of text im trying to change)
https://i.stack.imgur.com/e5FQ1.png
Ive tried using
color: gold;
and ive also tried using the !important tag as well.
Ive spend hours just sitting and staring but no ideas have come to me.
The link to the webiste is https://luxtent.by/ and when you are inspecting element make sure to set the view type to iPhone 6/7/8.
Also another issue that I cant figure out is that the icons are white on screen but, when if you look in inspect element, they are gold.
If you have any ideas feel free to try them out in inspect element and let me know if you have any questions.
Your color change is not working because you are using the grayscale filter on the parent element
.w-iconbox {
filter: grayscale(1) contrast(5) !important;
transition: 0.1s;
}
Remove this code and you'll be able to set any color
I'm close to giving up.
I'm in an investigation for about 4 hours. And I can't find what is the problem of this page.
I have this page in staging http://www-s.trueaussiebeefandlamb.com/proteins/grassfed-beef/ and this in pre-production http://www-p.trueaussiebeefandlamb.com/proteins/grassfed-beef/
In staging works fine in all browsers. In Pre, in Chrome the mouse hover of the beef not change the image. The idea is when the user mouse over the animal the cut highlighted. This works fine in IE.
In my investigation, if I change the background: url("../lamb-sprite.png"); to background: red url("../lamb-sprite.png"); in Chrome-devtools the bahaviour works.
I don't want to add any kind of Jquery to change the CSS of this page. I don't think this is the best solution.
I think the image is hidden behind some value of z-index. Try:
.protein-cut .image-map img {
display: block;
z-index: 10;
position: relative;
}
I have really simple HTML code
<img class='star' src='' alt='★'/>
With really simple style
.star {
position: absolute;
cursor: pointer;
font-size: 40px;
color: black;
}
.star:hover {
color:red;
}
My idia is this. If there is no image on server, I show unicode star symbol ( or if user will switch off all images ). And if a user
It works perfectly in FF ( tested on FF25 ) but fails really hard on WebKit browsers. Hover state dosn't trigger or triggers ones and then stay in that state forever.
I have only one question.. WTF is that? o_O Where am I wrong, or it's just a WebKit bug?
It would be nice if someone told me how to fix this. But mostly i want to understand what is going on here.
PS: Example http://jsbin.com/UMIrAJI/3/edit
UPD:
This example is working http://jsbin.com/UMIrAJI/5/edit but the only difference is 'background' color changed on hover. As soon as we remove 'background' - hover stops working. LOL.
So my question is still valid. What is going on here?
UPD2:
I found another workaround. If we add border: 0px solid white; (but only on hover) example will also start to work http://jsbin.com/UMIrAJI/6/edit . So it's something about repainting.
UPD3:
It looks like a bug to me so I reported it. I'll wait for some comments from developers.
https://code.google.com/p/chromium/issues/detail?id=323545&thanks=323545&ts=1385479799
Instead of alt, which should describe the content of the image, for browsers without image support and for accessibility tools, use the title property
<img class='star' src='' title='★'/>
I'm styling a print css file to nicely print out a web page with several input elements. All looks good when printed from PC browsers but when I look at chrome on Mac a select element prints out with the rounded corners and select arrows in black (see img)
(source: onexamination.com)
css on this is
input, select {
border: none;
overflow: visible;
background: none;
}
How do you get rid of the background things - dont even know what to call them, are they images !?
Managed to find a solution to this...
-webkit-appearance: none;
This seems to remove all rendering on the element and leave it just as the selected text when printed out.
I have this image map
http://corfro.com/projects/charlie-faye-tour-map/
And when you click on the different cities a black border shows up on the area but only happening in Chrome. (you might need to click a few times on different cities but the border will show up - once the bus arrives at the city the borders start showing up)
I've tried the following but to no avail.
a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }
Do you guys have any suggestions? Any help is much appreciated as this is driving me crazy!
Old trick <area onfocus="blur(); (...) />"
Good luck;
I had a similar problem on IE9 and this worked:
#MyImageMap, #MyImage {
outline: none;
}
Original source of the idea: "One note about image maps is that you'll want to disable the border on the img, map, and area tags using CSS." http://forums.macrumors.com/showthread.php?t=1342928
(the area is a child of the map)
In the <IMG> tag add
hidefocus="true"
Try this, it worked for me ;)
a{
outline:none !important;
border: none !important;
}
This fixes it on IE
img {
outline:none;
}
Using jquery based on #boru solution:
$("area").focus(function(){
$(this).blur();
})
Have you tried adding the attribute "border: none !important" ?
just found a fix to get rid of that border in firefox 4 as the .blur does not seem to fix it.
#someWrappingElement *:active { overflow-x:hidden }
if you don't get specific to the div or element it's in it can reek havoc with your page and cause things clicked on to disappear while the mouse is held down. Use in conjuction with .blur() to fix for firefox and chrome.
Go to sharePoint Designer and locate your page/image
Highlight the image that has the randomized border
Find the following tags in the code:
<Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">
</Content>
Between them Add:
style="border:none"
*may have to add them after the following: alt="" style="margin: 5px"
I'm experiencing exactly the same thing with Chrome on OS X (v 8.0.552.224). I just restarted Chrome and got an automatic upgrade on my Mac for this to start appearing, so must be something in the new release.
I have noted though that the colour of the outline can be changed by altering the "outline-color" attribute of the image, but have been unable to hide it completely even though "outline" is set to "none".
I just faced a similar problem. I couldn't get rid of the outline but was able to effectively hide it by setting the color property of the div to the background color. But I had areas of flat color. If I set color to transparent it came out black. That should be the right track to figure out a fix, though. I used it on a US map seen here: map
A really old question, but I found another solution that might help others.
I'm using the React package react-google-maps to show my Google Maps instance and markers
and used the following CSS to overwrite the user agent styles to fix this problem.
:focus {
outline: none !important;
}