I have a web site that looks OK in browsers chrome, firefox and IE above 8.
in IE8 down it doesn't look good. Is there a tool out there to check if my css file is valid for IE8 ?
I would prefer one that will indicate me which lines in my CSS file not valid for IE8 and how to fix them.
Use IE Tester Application.
You can render to different IE Versions. if its not supporting create separate Css for version and target to that version.
http://ietester.en.softonic.com/
Related
I tried with everything like proper style tags and all. but still site is not working in Firefox and IE
Link: http://webkurn.com/chrysler/index.html
Thanks a lot in advance
As per your CSS Statements they apply only on webkit-based browsers (Chrome, Safari, etc.). If you are pointing to a specific browser then you have to use webkit. Here you are making your queries to run on specific browser chrome or safari.
Try removing the webkit -webkit-min-device-pixel and check. Hope this help you
Most of the time, the problem is with the cache only if all the stylesheet tags are perfectly written. First try to remove your cache from your browsers of your website.Also, there are great tools like firebug(firefox) and inspect element tools(almost all browsers) which can be used to check the stylesheet file if it is updated or not.
Is there anyway to check if a given CSS property is supported? For example, I want to do an animation on a page using perspective-origin, but if not available I would just alter the size instead.
there are many css-hacks for browsers but for that you need to handle yourself each css property for all browsers
CSS Hacks
but if you want automatically handled all the browser for CSS3 and html5 then use Modernizr
Supported browsers
It support IE6+, Firefox 3.5+, Opera 9.6+, Safari 2+, Chrome. On mobile, support iOS's mobile Safari, Android's WebKit browser, Opera Mobile, Firefox Mobile.
Use http://caniuse.com/ website to check how your property is supported by different versions of web-browsers. You can load different styles according to client's browser version.
Also, you can emulate not-supported properties in old browsers by using CSS3PIE (http://css3pie.com/).
you can include modernizr.js which will be helpful for your issue.
you may visit the following link which was helpful when i was learning about it.
http://css-tricks.com/video-screencasts/126-using-modernizr/
If my site works fines in IE9, and I've included the HTML5 SHIV code, but the CSS still breaks in IE8,7, are there some obvious things I should troubleshoot first?
Here is my site, works fine in IE9, breaks(the top nav loses formatting, positoning)in IE 8-7.
http://bitstream.ca/beta3/#
I've also included
header,nav,article,footer,section,aside,figure,figcaption{display:block}
in my page CSS
And ALSO included the shiv script AFTER my CSS but still within my head tag as per this suggestion
Can't style HTML5 elements in IE (despite shiv and display:block)
These types of CSS -IE bugs are pretty difficult to troubleshoot for anyone who hasn't come across them before,
When using the Developer Tools in IE you need to make sure you change both the Document Mode as well as the Browser Mode e.g.
Settings for testing IE7 -
Browser Mode: IE7
Document Mode: IE7 Standards
Settings for testing IE8 -
Browser Mode: IE8
Document Mode: IE8 Standards.
etc.
in a css file of a project I see this below code:
{
behavior: url(Mylink.htc)
}
I dont Know what that means,it didnt work on Firefox,could you help me to know what is this,after that maybe i could find the replace statement in firefox?!
The behavior property is for Internet Explorer version 5+. behaviorlets you attach a script using CSS in order to implement DHTML (Dynamic HTML) components.
It's only supportet by IE (up to version 9) but no other browsers.
http://reference.sitepoint.com/css/behavior
You can use it to fix things for IE that are not supportet by default, for example transparent PNG files in (very) old IE versions:
http://www.twinhelix.com/css/iepngfix/
MS official website: "Support for element behaviors and HTML components (HTCs) has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5."
A HTC file is usually used to patch support for specific CSS rules on older browsers. For example, CSS3 Pie (http://css3pie.com/about/) is used to add support to basic CSS3 declarations such as border-radius, gradients, rgba, etc...
I believe behavior is supported by IE only.
I'm working with a custom app that doesn't allow classes to be applied to the tag and the original CSS we were working with uses this methodology. Instead, the app requires an individual CSS file for each browser (lame, I know).
Our company has a sample page that has the working code applied with browser specific overrides placed on the HTML tag. So, what I'd like to do is load up the page in each version of IE and see what specific CSS is actually applied, then just upload each CSS file to the app. Does anyone know a tool that will do that?
Note, I did find this: How can I see which styles in my stylesheet are actually being applied to the current page?
But the answers were for firefox. :(
If you press F12 in Internet Explorer it will bring up Developer Tools.
From here you can inspect the HTML/CSS and see the specific CSS rules applied.
With these tools you can then change the browser mode Internet Explorer runs in e.g. If you are using IE9 you can set it to run in IE9 Compatibility Mode, IE9, IE8, IE7.
You can also change the document mode IE9 Standards, IE8 Standards, IE7 Standards and Quirks mode.
EDIT : You could try http://unused-css.com/