We've been having this very weird Cufón issue in IE which cause we haven't been able to adress. I think it's something to do with text that's hidden and cuffóned.
The problem is that both the cuffoned and normal text are shown (and I noticed that the tag that is normally used by Cufón is replaced by <:cufon>). Anyway, this happens in native IE8 (not the "IE8 mode" of IE9).
A jsfiddle is worth more than a thousand words: http://jsfiddle.net/Osoascam/vqnh3/1/
To test, click on the red circle so that the text moves left 4 times (for some weird reason this only works on FF and IE, but it reproduces the IE8 error, so I can live with that).
Any help would be very appreciated. Here's a screenshot:
Check your js plugins, disable them one by one and see which one is causing the problem.
The same thing happened for me while using cufon 0.9 & modernizr 2.5.3, which includes html5shiv script, and this one breaks cufon.
Solved my problem replacing production version of html5shiv inside modernizr script with a release candidate(RC1) version of html5shiv from github.
Good luck!
Related
I have an online test which includes 24 questions, each with 4 possible answers. I have set up the CSS so that these answers are radio buttons with labels and a hover effect.
Here's a picture of how it looks in Chrome, Firefox, IE 10, Opera, iPad, Android - everything except IE 9:
Yet in IE 9 it looks like this for question 1:
By the time the user gets to question 13 it looks like this, where the CSS starts working on the 51st element that the styling is applied to:
And then every question after that looks correct.
Here's a link to the test where you can see the code embedded in an iframe:
http://improvedemployees.com/softskills/soft-skills-test/
Here's a link to the raw test code (it behaves the same):
http://api.improvedemployees.com/soft-skills/softskills-test2.aspx?v=4&companyid=10812&testid=1&campaign=
To see this problem in action, enter a couple of characters for the name it asks and click next a couple of times to get to question 1.
Why is Internet Explorer 9 refusing to display the CSS for the first 50 elements? Note: there are fewer than 200 elements on this test so I don't believe there should be any limit problem.
The reason was to do with the following command being applied to the .radiolabel class:
behavior: url(/css/border-radius.htc);
I'd added that to make the rounded border effect backwards compatible.
Removing that line, now all the effects are there as expected.
This also explains why it was working in my development environment but not my production environment - it was referring to /css/border-radius.htc whereas to pick up the file in my dev environment I should have been using a relative path or /web/css/...
Thanks to #Zeta for pointing out about the transparency effect. Took me a while to find this, but the code in that .htc file was the culprit. I'd appreciate knowing what tool you used to discover that?
This has also removed the SCRIPT87 errors - they were being caused by some dodgy code inside the .htc file too.
You can see it working finally here:
http://api.improvedemployees.com/soft-skills/softskills-test2.aspx?v=4&companyid=10812&testid=1&campaign=
Thanks to all who helped.
For me its working fine in IE 10
i press f12 and set the Browser Mode to IE 9
then it was not working and as i turn off the compatibility by selecting Browser Mode = E10 and its works fine as shown in figure.
so check at your end make css compatible with IE9 or change your JS
i have observed that some inline css is overriding the css so kindly check that too
It's bizarre.
This site works perfectly in all browsers but IE7. In ie7 NOTHING works. Most of the css just doesn't even render. IE8? Fine. Ie9 Perfect. Firefox and Chrome, of course.
Want to hear something weirder? this is a template site i have worked with before. Other sites built on essentially the same template DO work in ie7.
This is why i think whatever it is is simple.
I don't want to paste the code here - it's massive. But i'll give you a link to the site and to the css
site: http://canadianrecovery.ca
css http://canadianrecovery.ca/css/screen.css
Thing is, i have document standard set to ie9 It works fine in ie7 mode with doc standards set to ie9
But i have noticed that most IE browsers don't display default doc standards... this is obviously some sort of issue with IE itself. But it's frustrating.. most end users have no clue how to fix this.
Thanks in advance.
ella
I think I may have found the reason. In your body-style (line 13), you have the following:
font-family: "Times New Roman;
See that unclosed quote? Seems like Chrome, FF, IE9 etc can fix that error, whereas earlier versions of IE read the rest of the CSS as your font-family declaration.
Try Modernizr, it makes a lot of things possible in older/less compatible browsers without a lot of trouble. Try the development version to see if it can help you and compose your own production version targeting your specific needs to minimize the size (and speed) of the javascript library.
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
Thanks everyone. I actually found a solution. Look for a js script called ie7.js and include it with conditional comments.. it solves a LOT of ie7 issues
Trying to test my theme on IE8 locally gives a bad result. But on the testing server it looks much better (not yet the same as FF or Chrome).
What do i need to do so my local IE8 behaves the same as IE8 on the server??
I am trying to get the full-screen background in IE8 to work with transparent div's
Bit clueless here.
regards
oh i use xampp for windows
Without a link or code, all I can say is be sure your code is W3C valid. Missing and out of place tags are leading causes of bad IE display in Wordpress. Use the W3C Validator either live at http://validator.w3.org/ or as a local standalone http://habilis.net/validator-sac/
I've encountered odd problems with rounded corners in IE8. .htc file was used and http://wpdev.net78.net/ looks OK in IE8, however there's a problem with 2 of the corners - 1st is under TEST link and second at the bottom. I've applied the same rules as to the other elements, however this one don't wants to cooperate... Any ideas?
You should switch to PIE.htc (see http://css3pie.com/). It's a newer and much improved alternative to the old HTMLRemix HTC file you're using. It uses the same basic technologies, but more features and better performance. Plus it's under active development, and if there are issues with it, the author is very responsive about dealing with them.
There's a very good change that CSS3Pie will resolve the problems you're having.
If you do still have problems, there are some common issues when dealing with IE with this sort of thing. The biggest one is that in IE elements need to have the "addLayout" flag triggered in order for these HTC programs to work properly. This is an IE-specific glitch; try adding position:relative; or zoom:1; styles to the affected elements, and see if that helps. The CSS3Pie site has a 'common issues' page which discusses these points in more detail; why the happen and how to deal with them.
Hope that helps. :)
I have a webpage which I have made entirely as svg (apart from the html to load the svg). So far, so good, and you can see it here (not yet complete): http://kitandmarcin.us/svgcontainer.html (it's for my own wedding, so "the client" doesn't care that not all users are getting the same experience).
This works just great in Firefox, Safari, and Chrome. It basically doesn't work in IE (including IE9), or Opera. I haven't tested anything else.
My question is, what is the best way to handle giving IE (and, I suppose Opera) users either (a) a redirection to a different page, or (b) show them something else (probably a screenshot).
I would prefer not to use javascript, because I suspect if they are already having trouble viewing the page, problems on their end with javascript are quite possible.
It works fine in Opera 11 / Windows.
You should consider just making it in good old HTML/CSS - it's not a particularly complex layout.
Alternatively, use javascript on your parent page to redirect users of IE to a static PNG version of your SVG.
IE8 simply does not support SVG without a plugin - javascript will work just fine on the page. However, SVG is supposed to work in IE9, so I'm not sure why yours doesn't. I don't yet have IE9 here, so I can't test.
ForeignObject is probably the answer why it doesn't work. Given that your svg is quite simple, I'd suggest removing the foreignObjects and using svg text and tspan elements instead. That should make it work in all browsers. And seeing how you used inkscape to create the svg it could have done all the linewrapping etc for you anyway.
From other answer about flow-elements in inkscape:
Inkscape can generate <text> and <tspan> for
you quite easily, just don't click and
drag an area but instead just click
where you want the text and start
writing, then press return where you want a
new line.
I'm not sure if IE9 supports foreignObject.
There's a way to do automatic linewrapping in svg tiny 1.2, which is supported in Opera, a workaround solution could look something like this. But to get IE9 compat too, you'll probably have to go with text+tspan.