In the latest version of chrome(version:83), it is getting a black border in the select option. Is there any ways to fix it? I fixed the out-line issues of text box and buttons using the following styles
*,*:focus,*:hover{
outline:none !important;
}
I checked the issue How do I remove the select option black border in Chrome? and it says the issue was due to the chrome update. Can we fix it using css?
I've tried my hardest in fixing the problem. The newest Chrome update has "upgraded" form handling in the browser. My suggestion was to add outline: none;, but that only works on <input />, <textarea> and <button> elements. As seen everywhere, there is something about disabling a flag, but if you want your site to go out to the public (webserver), this won't work, as disabling that flag only disables it on your computer. I really hope that Google fixes this issue, but they don't seem to notice the number of people complaining about this.
Related
As my site http://newwebsite.outfit24.com.au (still being built) is heavily image-based, I want the header text colour to change so that it stands out from the background (both dark and light images). I have used Elementor for the bulk building of my site and I’m using the "Custom CSS and JS" plugin to write my CSS and change the header colour. In elementor, I set the header CSS class to “custom-header”.
I have tried using “mixed-blend-mode: difference;” but mixed-blend-mode is highlighted red and doesn’t seem to be working. Here is a screenshot of mix-blend-mode not working: https://ibb.co/MNbf84z
.custom-header a{
color:#fff!important;
}
.custom-header {
mix-blend-mode:difference!important;
}
I expect for the CSS to work, changing the colour of the header allowing it to be visible whether it's in front of #fff, #000, and any image on the site but for some reason, mix-blend-mode is highlighted red and isn't working. Does anyone know why this is happening?
Thanks for your help:)
Blend mode does not work when you have any z-index value for the section or its parent section.
For anyone who might still need that. I tried using mix-blend-mode in wordpress for a while, being hit by that "unknown property mix-blend-mode" error. As far as I noticed, the css editors provided by wordpress have that error, but if I make my own html section (as many themes support, I guess all of them) and make a <style>.blahblah {mix-blend-mode: difference;}</style>, that makes it work. Worth trying.
Conclusion: Don't use wordpress css editors. Use an html section and write styles in it.
we have a page having span tags with different widths. Initially in ie11 the widths weren't properly set. Hence we added the following css change to orient it correctly and it worked
span{
display: inline-block;
}
but the same css change is not working properly for ie9 . We followed some SO suggestions and tried adding doctype but it didnt work out.
Can you please suggest?
have you tried using a resetcss file before applying your own styles?
because every browser would have its on setting, the resetcss will basically reset all the default browser setting and then apply your setting, you can get this file online for free here is one on this link below:
http://meyerweb.com/eric/tools/css/reset/
hope this helps, gud luck
I tried debugging more and found out the issue. Width in span was set in span without unit.
<span style='width:100'></span>
it was causing the error. After changing it to
<span style='width:100px'></span>
it worked in ie9 and ie11 .
Thanks
In IE10, border is not getting displayed on page load, it displays only after I hover over that particular section. Its looking fine in IE9 and Firefox, the issue persists only in IE10.
Unfortunately I couldn't share code as its a restricted internal dev environment.
If anyone of you came across such scenario, please share the solution. Thanks in advance!
If you are familiar css then you might also know that the issue you have mentioned "displays only after I hover" will occur only when you have put something like the following in css
#a : hover
{
border:5px solid white;
}
If you haven't mentioned such thing in your Stylesheet or inside html tags then what #MarioErmando said would be the issue. Try using F12 Developer tools in IE to check.
Recently published project in beta stage. Was testing it with new browsers for a while.
I fixed all bugs including background-size, some main css3 properties on IE8.
The only issue on IE8 is following:
To quickly recreate the situation please enter to the website http://goo.gl/rlmelu and click on, for example, birthday. Then enter number of participiants, for example 30 and select some date. Then click "next".
That's how Firefox 26.0, Chrome shows result:
http://joxi.ru/3w7gUv3JTJDfEIXmJqM
And thats how IE8:
http://joxi.ru/Eg_gUv3JTJB-EJupfnA
Please don't tell me to not to use IE8.
What am I doing wrong? How to fix it?
First Problem : The Choose Button
The Problem is CSS PIE. Two possibilities:
Disable PIE
In iefixes.css, disable PIE for .btn
Set to important
Set the Background to important (But think about: Is !important bad for performance?):
.btn-warning{
background-color: #f0ad4e !important;
}
I know, it's pathetic, but IT just got around to installing IE8 on my machine this morning. Right off the bat I came across a glaring issue and I've messed around with it for too long even though I KNOW the answer is staring me right in the face.
First off, here's the website: www.mchenry.edu
View it in IE8 and hover over the top banner image - see everything shift down? It's some type of text-decoration or border issue but I can't figure out which. In our test environment, I even tried to get real specific with
#banner p#img a:hover {text-decoration: none};
But that doesn't do anything. And what's even more annoying is that I can't get it to show up in IE6, 7, or FF, or Safari, or Opera, etc. Beating. Head. Against. Desk.
Thanks for any insight you guys may have.
Okay, let's see. This is where the developer tools come in handy.
Using the developer tools, I hovered over the image, and activated the "click to select" feature, as this maintains the "error". I clicked on this small area, and it highlighted the <p id="img">, which now had a height of 128.
Something is expanding the p by two pixels, and editing the source to remove the <a> removes the problem, so clearly, something in there is disturbing it. I'm not seeing what, and it doesn't help that I can't seem to affect the color of that small box.
However, we can do more: we can yank out parts of the CSS. I removed the CSS rules from Records.css one by one, and when a:hover was removed, the problem went away. Going deeper, removing the background-color from there, it stopped!
So, a simple fix is to assign the <a> element a new attribute: style="background-color: transparent".
Note that I didn't test this with any other browsers or versions, but I can't see that rule having affecting other browsers (in a bad way).
try this:
#img a:hover {text-decoration: none!important;}
I have just encountered this same bug under IE8 (version 8.0.6001.18702).
I also traced the problem using the IE8 Developer tools by turning off css statements until I found the one responsible. I an verify that having a background-color on a:hover causes the problem and overriding this with "transparent" does solve the problem.
Unfortunately if you do want a hover background color on your links there isn't a generalised solution - the best you can do is to create a class for "imagelink" which you apply to all your anchor tags which surround an img tag:
<img src="test.gif" alt="test"/>
Then you can use the CSS:
a.imagelink:hover { background-color: transparent; }
This should work around the IE8 bug for your image links whilst allowing you to keep your hover background color on other hyperlinks.
Not very elegant, but I didn't want to follow Jan's suggestion of using a meta tag to force IE8 to render as IE7 (there are lots of things IE8 does better than IE7 and I don't want to revert all the rendering to IE7 over this one issue).
I find it astounding that despite all the hype about IE8 being so much better than older versions we still find bugs of this nature: a colour choice causing a layout issue. Unbelievable. And yet this thread was started back in July last year - and the bug remains unfixed, with more and more developers having to waste their time identifying the problem and dirtying their code with workaround hacks to solve an IE-only issue. It's like IE6 all over again.. Hopefully the EU's imposition of a browser-choice screen into new Windows installs will help open people's eyes to all the proper web browsers out there.
Michael's analysis of the background style of the anchor tag being what triggers this bug in IE8 is spot on. But instead of working around it by adding a style attribute to all the anchor tags, you can tell IE8 to display your page the way IE7 does by adding this meta tag as the first tag inside the head tag:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
or by adding this line to .htaccess:
Header set X-UA-Compatible IE=EmulateIE7
to force IE8 into IE7 compatibility mode.