I'm working with WP website now and stuck with one problem.
The website is working fine in Chrome, Firefox, Safari, Opera and IE10, but in older IE versions (like IE9) it looks very strange. It seems that my custom CSS doesn't loaded properly. The interesting thing is that CSS styles partly applied to the website (icon font) but not styles which overrrides Foundation framework styles.
Maybe someone can explain me what I'm doing wrong and put me into right direction?
P.S. I'm not sure that it's important, but I based my WP theme on Foundation WP theme.
Thank you in advance!
Alex
have you tried adding this to the top of the head tag above the title tag to make sure IE uses the highest version in IE
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
also when viewing in IE are you checking the in the inspector (F12) making sure the Document Mode matches the Browser Mode so if your checking IE9.. you would
Browser Mode: IE9
Document Mode: IE9 Standards
The class .dl-menu is using the code:
opacity: 0;
Which is not very cross browser. You need to use a few versions for better support of opacity.
This is only the one point, and it looks like there may be others to me, but see if changing this helps you.
This page will explain the cross browser opacity properties well: http://css-tricks.com/snippets/css/cross-browser-opacity/
The problem appeared because the main CSS file was too large for IE8 and lower, and it just croped my CSS styles. I've broke it into 2 files and this fixed the problem :)
Thank you everyone who tried to help, and especially Spudley for pointing into right direction!
Related
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
I'm having an issue with a WordPress theme project I'm working on (the theme is based on the Roots Theme for WordPress).
I'm having trouble controlling the font color of the main navigation sub-menus: but only in IE8. The font appears to be the same color as the background for the submenu, making it invisible to the user. Oddly, this issue only happens in IE8, and doesn't happen in chrome, firefox, IE7 or IE9.
The site is http://precisionmfgmn.com, to see the error try hovering over the "companies" link on the main navigation.
Here are some details that may be relevant:
I am using cufon font replacement.
Any ideas?
It looks like cufon is using canvas with IE8 and not IE7. IE8 doesn't seem to support it but IE9 does. Here is 2 possible solutions :
- modify the source code of the module, if the browser is IE8 then it should not use canvas
- force the IE7 compatibility view, you can do that by adding
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
in your template file
The first solution is probably the best but the second is easier.
hmm very odd, Cufon is usually pretty universal with the way it displays, I have used it before and not had a problem. Do you have any style sheets on Wordpress that are browser specific ?, I know they have them on Joomla, but not sure if they have them on Wordpress or not. If there is, one of those may be applying a slightly different style to IE8 that is breaking Cufon somehow, if there is a IE specific stylesheet try renaming it to temp remove it, to see if it makes any difference.
I have just taken a look at it with IE9 in IE8 compatibility mode and cant see a problem with it ?, have you tried clearing your browser cache and reloading the page ?, it might have cached previous changes you have made, so the text is showing an old version.
curved css corners for some reason dont seem to work in IE9. I know it supports it however i have looked all over the web for a solution and cant find one that works for me. I tried putting <meta http-equiv="X-UA-Compatible" content="IE=9" /> but that did'nt work. I used the .htc file and behavior: url(border-radius.htc); however that only works sometimes when switching to compatibility mode. I even tried declairing all 4 values, and didnt make a diffrence. Work beautifuly in firefox, chrome, and safari but not in IE. Any help? Check it out: my web page If you have some debugging tool might help you help me.
I found if your using the CSS style filter for IE8 and below browsers it will interfere with IE9 styles causing border-radius to not work and possible other ill effects.
To fix it add this to your html head:
<!--[if gte IE 9]>
<style type="text/css">.elementClass { filter: none !important; }</style>
<![endif]-->'
Looks like the page is firing Quirks Mode, try moving those script & css includes down inside the tag... nothing should ever come between a doctype and it's html tag.
Detail explanation here Investigating Document Mode Issues
Use the vendor extensions, -moz-border-radius:15px; -ms-border-radius:15px; -o-border-radius:15px; -webkit-border-radius:15px; border-radius:15px;
You really only need the -ms version for what you want, but if you include them all you provide a broader spectrum of coverage.
I found that my border radius in ie9 is working on localhost but not on a server. Im using css3PIE to acomidate ie8 and below, would this be interfering with ie9?
IE9 don't need any prefix for border-radius (for sure you don't need -ms- prefix at least for this property!). Your browser probably have a problem. Maybe you're running beta or something like that.
Please test this demo in another IE9 running computer or have your IE restarted and try it to see IE9 renders border-radius just fine.
Quirks mode is where IE9 switches back to IE5 functionality
(added following link to #seanmetzgar post also)
Detail explanation here Investigating Document Mode Issues
With a site I look after, which had ASP code right at the top of page, I added
<!DOCTYPE html>
just in front of the tag, below the code, and IE9 stopped going into Quirks Mode.
Ive seen a lot of talk about box-shadow in IE9 - but when i try it out it does not work! (of course im not suprised ... sigh). Am i mistaken that these thing are supposed to work in ie9 or is mys css wrong or is there a mode in ie9? Heres the CSS code im using:
.jW{position:absolute;border-radius:8px;box-shadow:4px 4px 24px 4px #000000}
Same goes for border-radius. Ive even opened up CSS3 sites that have these attributes like http://css3please.com/ and they dont work in IE9 either. Actually: bugger IE!
OK - found the problem. Firstly thanks to sandeep for refering me to part of the problem. IE9 does not require any doctype for these styles to work. Whats causing the problem is "border-collapse:collapse" on tables - use cellspacing=0 then it works - still: bugger IE
It should work (as far as I know - will run some simulations later). In the meantime your can check out CSS3 PIE (http://css3pie.com) that enhances IE rendering of CSS3 properties (not really IE's rendering, but close enough).
According to CanIUse.com, IE9 does support box-shadow and border-radius.
I haven't tried it with box-shadow, but I can definitely vouch for it working with border-radius
The most likely reason for it not working is that you're actually running in IE8 compatibility mode (or even IE7 compat). This will make IE9 drop all the new features and pretend to be the older version.
The quickest way to check if this is the problem is to hit F12 to open the IE developer tools window. This will show the rendering mode in the top right hand corner.
If it is rendering in compatibility mode, then you can change it here. You can also add a meta tag to the top of your code to force your site to use the latest IE mode. If it's happening for every site then you may need to change your browser settings.
Hope that helps.
Ooops - im sorry but i wasnt entirely correct in my testing - it seems that doctype is essential for these things to work. But then everything else breaks down. I think next time ill write for IE first then the others - hey mabe thats microsofts strategy all along!
I also was experiencing the problem where the box shadow was not being displayed in IE9. In my case, IE9 was rendering the document in compatibility mode, even though I had a valid DOCTYPE. I was debugging locally, and IE has a setting "Display intranet sites in Compatibility View" which was enabled, apparently by default. After disabling this, everything works as expected. This can be found under Tools -> Compatibility View settings.
The reason box shadow does not work is that IE automatically runs in quirks mode which does not support this.
If you set internet explorer to run in standards mode it will display box-shadow correctly
you can force ie to run in standards mode by following this post: How do I force Internet Explorer to render in Standards Mode and NOT in Quirks?
If you can't edit http headers then use: <meta http-equiv="X-UA-Compatible" content="IE=edge">
(or <meta http-equiv="X-UA-Compatible" content="IE=edge" /> if you're using XHTML)
It should work fine if you do this
I've been running into the age-old problem of cross-browser compatibility ever since I began making websites, but this time I'm stumped.
I have a pure-CSS and HTML menu that I used from CSSPlay. It works flawlessly in Firefox but not in Internet Explorer. Can somebody help me figure out why? It works fine in IE9 Compatibility Mode, ironically.
Edit: Forgot the link. http://jsfiddle.net/Xh9Kz/
Also, I've been running into a lot of trouble with percentage differences between webkit and Internet Explorer browsers in general. While Webkit browsers also percentages to add up to 100%, IE seems to not do so. Does anyone have a resource for this so I can code to avoid it?
Thanks in advance. Merry Christmas everyone!
Nothing is wrong with your code, it's just something common with the examples from CSSPlay, check the last question in the FAQ:
10.The demonstration/menu does not work in IE8
IE8 is very temperamental when it comes to multi-level demonstrations
and menus (not just mine). I will be
going through my demonstrations over
the coming months to get them to work
in IE8 but in the mean time the
easiest way is to switch IE8 into IE7
emulation mode which will cures all
problems.
To do this add the following meta tag immediately afer the tag:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
here's the same exact code but with the meta tag added :)