I just had a client tell me that CSS3 styles and effects are not working on some Internet Explorers and in some they work fine. They are all IE 10 which is why I am at a loss. How could this work in some IE 10 and not others? The machines I am on they all work fine but I used teamviewer to see the problem and it is in fact not working on this particular IE 10.
The main problem is the main nav links "products", "support" and "community" all have drop downs. These drop downs work fine in every browser except for some machines my client tested in IE 10. This page here is what I am attaching screen shots of
Here in this screen shot (taken using teamviewer) you can see how the down arrows are missing after the text (the arrows are a webfont), and the drop downs do not appear.
Here is a screen shot of how it should look : You see the webfont icons (down arrows) and the drop down appear on rollover.
The css files are HERE and HERE
Any help would be greatly appreciated, I just cannot figure this out.
Thank You!
Related
Edit: I found out that the issue is exclusive to iPhones. I tested with an android device and it worked fine when I tried viewing the page on two different iPhones it broke on both.
This issue is mobile related, since when I shrink my browser window to the size of a mobile screen, everything looks fine. However, when I view the site on my actual mobile device, the drop shadow "breaks" at seemingly random places. If I zoom in and out these breaks will change their locations.
The current effect being used is
filter: drop-shadow(20px 10px 4px #707070);
After further research into this, I found that the issue was not specific to my website. If you go onto the Mozilla MDN Docs on a recent iPhone device, you'll notice that it gives you the exact same effect when zoomed in. I'm going to post this as an issue on Github as suggested in the docs. Here is what my mobile phone showed when viewing the Firefox Logo drop shadow effect.
As suggested in a comment, changing to a simple box-shadow fixed the issue, although the edges are more hard-lined and slightly less faded (using the same parameters). It's not enough to break this specific project and I know there are CSS features available that enhance this, so all is good!
I tested Nvidea css drop down menu on a site with XML Flash rotating banner , it works find on opera but doent work on internet explorer and google chrome, it actually goes behind.
menu from : http://www.lwis.net/free-css-drop-down-menu/
see link here: http://sonymax.co.uk
thx
Seems there is a problem with the menu actually, I removed the banner in IE and the drop-down menu still doesn't show up. Also note, that if you change your compatibility mode from IE7 to IE8 or 9 the menu and banner are way off. You should revise your code a bit.
It works in my Chrome, not sure why it doesn't in yours, only IE has the problem as far as I tested.
I'm hoping someone can help me with a little glitch in IE8 and IE9 with a graphic background not lining up.
If you view this link in IE8 or IE9, you'll notice the "step" in the background. http://sager.hiringhook.com/
I'm working with a custom theme created specifically for this site. Everything looks good in Chrome and Firefox, IE is just being a thorn in my side.
If anyone has a simple fix, please share..before I lose my hair.
I looked for the step you mentioned but didn't see any difference in the site from Chrome to IE8. The logo shifts down along with the featured photo in compatibility mode but nothing else seems to change across browsers. Do you have a screenshot of what you see in IE? I would love to replicate and help you solve the issue.
I've got this problem while doing the scroll bar for both iPad and browsers. The style is working fine with Opera, Safari, Firefox and Chrome. However the style doesn't show in Internet Explorer and it appears the wired horizontal scroll bar on the page too.
You can find a link to the page here.
Does anybody know how to fix this issue?
Looking at the iScroll website and demos it looks like IE isn't supported. Go ahead and try it in IE http://cubiq.org/dropbox/iscroll4/examples/simple/. You may want to try another library such as this one http://www.hesido.com/web.php?page=customscrollbar which seems to work just fine in IE.
I've updated my IE to IE9 and I've noticed the borders everywhere are not been rendered as well. I don't really not how to explain it.
Using Chrome, Firefox, Opera or Safari on this page - http://www.w3schools.com/css/css_border.asp - I can see the borders very well, but on IE9 I see those as the image.
http://i.stack.imgur.com/Tr24r.png
I've been researching a little about it, but seems no one else has a similar problem :( Any idea why this could be happening? On other PC's (friends, office) I don't see this problem on IE9, may be something wrong in my settings?
Window 7
Internet Explorer 9.0.8112.16421
Thanks in advance,
Regards.
Go to Settings (Gear icon) -> Internet Options -> Advanced tab. The first item in the list will be the checkbox entitled Use software rendering. Check (or un-check, if it is already checked) it, restart IE and see if there is any difference.
If it helps, try updating your graphics card driver and re-enabling hardware acceleration in IE.