Foundation CSS not working with Internet Explorer 9 only? - html

I just implemented the Foundation CSS framework which works great in all browsers except IE 9. In IE 10+ it works great, but not in IE 9. I have tried a variety of fixes, the latest adding and tags surrounding my code, but still no luck. I can't seem to find out any issues with compatibility so I'm hoping there is a fix.

Related

How important it is to get website to also work with Internet Explorer?

I have been using HTML, CSS, JS and jQuery in my web development and it is my first time. I have been testing my design on Chrome, Firefox and Microsoft Edge, and it works perfectly.
But when it comes to Internet Explorer, things just don't work well. Squeezed images, animation not working, margin/padding issues, flickering image when scrolling etc...
So my question is, are there any merits in getting any websites to work flawlessly with IE? IE is like the least popular browser now that Microsoft Edge is here (from what I read sometime ago). Just wondering if I should invest my time in getting my website to work with Internet Explorer.
#zaraku27
I think you should make a website which is compatible on every browser although Internet Explorer is not commonly used by everyone because of some other modern browsers but some of the application are optimized only for IE and some websites can only be used on IE whereas it is faster with windows computer because it is integrated. It is also simpler to use then other modern browser like Chrome, FireFox, Opera and etc and it is highly compatible with almost all the Operating System.
The versions 9 and above of Internet Explorer use HTML5 which enhances browsing experience, This lets the user to stream videos and audios excluding any type requirements of installing additional plugins IE being one of the oldest and conventional web browsers support many of the applications which some modern web browsers may not support .

is there a html5shiv for IE9?

Im using a jQuery horizontal Accordion plugin which relies heavily on HTML5 & CSS3 - in Firefox and Chrome (latest) it works as advertised however, suprisingly IE9 does not begin to render it correctly, a problem i expected with ie versions 8 and below. The code includes an 'if' condition to check for pre version 9 to load a html5 shiv but it still renders IE9 badly (see images). Is there a pollyfill or shiv?? I despise IE with a vengeance, always have, and today i think ill cease developing for it altogether.

List of IE Specific html and CSS Tags/attributes

Can i have a list of html/css tags which works only for Internet explorer.And these tags/attributes should not work in other browsers especially for chrome and safari.
Thanks,
Shyam
As you didn't mention the version of IE, I am Going with the IE10
this link describes IE 10 Specific Styles
I think the only HTML (non-standard) tag supported by IE and not other browsers is <bgsound> for background sound. Some sites will also mention <marquee> too, but although it is non-standard, it has worked on Chrome and Firefox for a while.
About CSS, I don't know if there are any specific rules/attributes that only work on IE (but I know there are many standard rules/attributes that do NOT work on older versions of IE :P)

Website looks weird in internet explorer 7, but fine in IE 6 and 8

I used many different browsers while I was coding for a new site (Firefox, Chrome, IE8, Opera, Safari, Mobile devices, etc...). It looked the same across all browsers.
I recently uploaded the site onto the server and got to look at it from work, using Internet Explorer 7 and It looks horrible. Elements are floating wild all over the place, but I cant figure out why.
The weird thing is I just looked at it from IE6, and it looks fine, with the exception of unsupported transparencies in PNG's.
If anybody has IE7, or can tell just by the html whats wrong, you can view the site here.
Thanks
Try adding a zoom: 1 to your clearfix style.
Also check out this answer for other options of doing clearfix. What methods of ‘clearfix’ can I use?
There are multiple CSS differences, features that are supported by some version and not by others and so. The following link lists the differences, bugs and so. It might help you for detecting and preventing new "bugs"
CSS Differences in Internet Explorer 6, 7 and 8
You have 15 HTML errors and 8 CSS errors.
IE8 does not act like IE7 in compatibility mode which doesn't act like IE7 which doesn't act like IE6 and none of them act like the other far more modern browsers. Actually, there are 5 rendering modes in IE8 alone.

Is there any possibility of rendering differences betweeen firefox 3 and 3.5 and IE 7 and 8, even if we are not using any new css 3 property/selector?

I'm making a site for European client and he said Firefox 3 and IE 7 and 8 has more user than others browser for desktop in Europe http://gs.statcounter.com/#browser_version-eu-monthly-200812-201001-bar
I've only IE 7 and Firefox 3.5.7 installed in my PC.
Should I download portable Firefox 3.0 and test in it too even if I'm not using any new css property/selector which only has support in Firefox 3.5 or testing in 3.5.7 would be enough?
And for IE testing in IE 7 would be enough or should i check my site in IE8 (downloading VPC image of IE8 and testing in VM) even if I'm not using any new css property/selector which only has support in IE8?
Or is it necessary to use <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> in <head> ?
But what will happen when user will switch compatibility mode to IE 8 default rendering mode?
Can we make site compatible in IE 7 and 8 both without using <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />? If yes, then what special we need to do.care/consider in css to make site identical in both?
It's worth testing the site in all browser to ensure that it is working correctly. Another way to test is to use the browser sandbox here: http://spoon.net/browsers/
IE8 is alot more standards compliant then previous versions of IE so if you are designing for FF 3.5 then you shouldn't have too many problems with IE8. It's worth using conditional comments as Dough mentioned to target IE7 or IE6 - http://www.quirksmode.org/css/condcom.html
Consider using this website checklist - http://www.xs4all.nl/~sbpoley/webmatters/checklist.html as once you have validated your html and css and gone through most of the other points then you will be well on your way to having the site display properly across all browsers
You don't necessarily need to download all the copies, but yes, there is a larger possibility of a difference between IE7 and IE8, though they should be minimized if not eliminated by your meta tag. I highly recommend you don't use that meta tag and just check for differences that might be able to be easily fixed. Since IE8 has come out, I have never had to use the meta tag to fix any problems or differences. I still use IE conditional comments to add rules for fixing differences in IE6 + IE7.
There is much less of a concern between Firefox 3 and 3.5 if you are not using CSS3 or -moz specific selectors.
Either download IETester (IE only) or used Adobe Browser Labs (both) to check IE8 and Firefox 3 as a precaution before launch.
I do dev testing using IEtester, been using it for about a year and it's been 100% correct in rendering CSS when compared to the stand alone versions of IE6,7,8. It's also very good for tweaking CSS and quickly seeing the impact.
From a general perspective I normally have alot more issues between IE6 and other browsers, while IE7 and IE8 are very similar in most regards.