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;
}
Related
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.
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.
I have an issue here, I'm working on a project which is properly working in firefox and chrome.
Now I'm testing in IE. I thought with all the advertising about IE9, it would look great, or at least not break anything.
I have several problems though :
I use some png images. And even if the images are showing, I have a little red cross above it. And I really don't understand why ... you can see it here : http://www.hostingpics.net/viewer.php?id=173809Sanstitre.png
In the same pic, you can see that the property background-repeat : repeat-x is not working. The funny thing about this, is that at the beginning it is working, and when the page finishes to load, it screw everything : http://hpics.li/feebab4
Does anyone have an idea what can be the cause of that ?
Thanks
EDIT : Oh also, sometimes IE9 is adding some stuff in the inline of my images like :
style="width: 171px; height: 52px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://localhost/Sites/promenadeSteCatherine/wp-content/themes/promenadeSteCatherine/img/menuGauche/titre_projet1.png', sizingMethod='scale');" alt="projet" src="x.gif"
It might be a problem with a plugin I'm using in wordpress, but I don't see which one, here is the plugins I'm using :
Advanced Custom Fields
Contact form
tinyMCE
user role editor
wp-slidinglogindashboardpanel
Both properties are fully supported by IE9+. Are you using any png 'fixes' for IE6, like JavaScript replacement or DX filters? They could be interefering.
.idioma_es #logosFooter, .idioma_es #logosFooter li a {
background: url(../nImg/microsites/logos/logos_footer.png) no-repeat scroll left top transparent;
behavior: url(../../nJs/iepngfix.htc);
}
Result in Firefox:
Result in Internet Explorer 6 (Based on IE Tester for Windows):
the path of the .htc file is correct !
Any idea what i'm missing?
Don't test this with IETester. It's not completely reliable.
You should use a virtual machine, but you can quickly test a page with http://ipinfo.info/netrenderer/.
After Googling a little, I might have been a little unfair to IETester (though I still don't trust it).
http://www.my-debugbar.com/wiki/IETester/HomePage
Known problems and limitations :
CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
You can try PIE - http://css3pie.com, that is working in IE6 too.
IE6 does not support the alpha channel for background images apart from in specific circumstances. There is no general fix, as there is for foreground images.
Look here: http://24ways.org/2007/supersleight-transparent-png-in-ie6
Check the first bit of text under 'The pitfalls' heading
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.