In my website, it looks great on any browser but Internet Explorer. I know that older versions Internet Explorer doesn't support CSS3, so I was wondering if there were equivalents in HTML to these methods: max-width:, border-radius:, box-shadow:, and transition:.
Any help would be appreciated.
For border-radius and box-shadow there is http://css3pie.com/ but that requires Javascript in IE. For a HTML only solution you have to use images, i guess.
You are asking for a way to get some of the newer features of CSS rendered in a browser that doesn't support CSS (or let's hope you are ignoring browsers that old and instead working with a browser version that do some CSS, but not enough for your tastes). Those browsers are outdated and you are not going to get it work just by avoiding css.
If you go far enough back, you may actually end up at a point in time when there were things that were possible in html weren't in css. However, it has been quite a while now that CSS is your best shot at getting things like that to work. If it doesn't work, it usually means that the browser doesn't support it at all, not that it doesn't support it through CSS.
Of course, you can work some magic and try to fake things with javascript, but it just isn't the same.
I recommend using modernizr. It detects if a browser supports different css3 (and html5) features and, if it doesn't, you can conditionally load javascript as a fallback solution.
Internet Explorer 9 supports max-width, border-radius and box-shadow, but not transition.
Personally I don't think CSS should have transition (or animation) as styles should affect how content is displayed, not how it behaves (I am also against the behaviour IE extension for this reason).
Overall, these styles you are asking for are aesthetical, and shouldn't really be a major issue if they aren't supported by the browser your user is on.
Related
I work for a client who has masses of <a> elements on their site which use the same styling and reference the same class name.
The problem I have is the developer who worked on this project before me used CSS3 to style the element and completely ignored the fact IE7 and IE8, even though it was in the scope of the browser model and this issue is now apparent on hundreds of pages.
What I want to ask is what do you feel the best approach is to putting a suitable fix in place without effecting the markup? such as scripts which support border-radius, box-shadow, gradients etc.
Please don't come back answering about graceful degradation as this is not going to happen, I have already spoken to the client and they don't want to take that approach.
You can use a script to perform that "support" for you on clients using old IE versions!
Download script here.
This script allows CSS3 support for Internet Explorer 6, 7, and 8.
The web site link!
My favourite solution to this problem is CSS3 PIE. It's an HTC which brings
a nice selection of CSS3 features to IE 6-9.
Note: PIE uses absolutely positioned VML elements (in IE6-8) to support a variety of CSS3 features. This can cause issues like disappearing backgrounds/borders/etc. The fix is usually to use position: relative; on the affected element or it's parent. See the known-issues for more information (and other fixes).
I think there is no one solution but you can combine more than one solution, for example to border-radius you can use jquery corner:
http://jquery.malsup.com/corner/
modernizr can be a good tool too!
Making websites that appear correctly in IE is a big problem. Is there any java script library to fix all CSS and other issues associated with Internet Explorer (7, 8, 9) and make it work like Google Chrome, Firefox?
use a doctype to make the page render in standards mode instead of quirksmode
Check out what properties in CSS you can use and what browser supports them
If you plan to use HTML5/CSS3 tech, then you should check the property and what browser is currently implementing these new tech
You can reset the CSS using a CSS reset to start off from scratch in your styles
If you need a stable ground to build on for your page, consider using a "base" style framework like Blueprint CSS's typography and forms CSS.
Use a toolkit like jQuery, Mootools, Dojo etc. This will speed up your JS development. But NEVER let JS do styling and style fixes. That's the work of CSS.
Ofcourse, never assume your design works at all. You must test on all available browsers, on the current version, 2 versions back, and on betas.
One important thing to remember is that different browsers respond differently to errors. So make sure your HTML and your CSS pass the W3C validator error free. That will go a long way in ensuring your site will look the same on different browsers.
Also, don't use quirks mode. Different browsers have different quirks!
If you are referring to some of the CSS3 styles, then I would suggest you look into CSS3 PIE.
Short answer is no but you can check which properties are not supported in IE with caniuse.com
http://selectivizr.com/ or http://css3pie.com/ will help you but they both won't work if js is disabled.
Read this if you're using html5 http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/
And what Joseph said.
You could always check the results with http://browsershots.org/ but it's just a screenshot so it won't give you an idea for example of how things behave when you click/hover on them etc.
The short and simple answer is yes, you can target the older versions of IE using a combination of Modernizr and HTML5 Boilerplate. Modernizr is now included in the HTML5Boilerplate package.
For more details of an HTML5Boilerplate approach to this:
HTML5 Boilerplate, IE7 & 8
I'm looking for the best solution out there for round corners on boxes, which have to work in all browsers (including IE 7-9)
I've been looking on CSS3 PIE, which seemed promising until I saw the list of "Known Issues". Relative paths and z-index problems made me look for other solutions. I noticed they have a "JS Solution" for CSS3 PIE as well, but this has some big disadvantages as well..
Are there any other good solutions out there for round corners crossbrowser-wise?
There is NO pure CSS solution for all browsers, you will have to create this using images, either using a Javascript solution or CSS code that includes the rounded images.
Blame IE7-9 for the non CSS3 solutions...
here you have a guide to create round borders for all browsers
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
The best i can suggest is
border-radius: 5px;
I know it doesn't work in all browsers, but it's a CSS3 feature, so sooner or later it will work in all browsers.
here you can see it works for all major browsers
http://www.deepbluesky.com/blog/-/browser-support-for-css3-and-html5_72/
and it works in IE9 too
It's not exactly the answer you're looking for (honestly, if you really want IE7-8 support, CSSPIE is pretty decent).
I've been using prefix-free on my sites as of late so I don't have to worry about vendor support. Just use what CSS3 you want and the js takes care of adding all the pre-fixes where necessary. If/when vendors all support CSS3 properties, just remove the JS file instead of combing through your css and removing all the prefixed parts.
Since you have incuded IE7 above, so I would say there is no pure CSS solution to acheive this. Modern browsers support border-radius to achieve rounded corners and you need to specify the -moz and -webkit for mozilla and webkit based browsers.
To achieve rounded corners, I would suggest you put all your rounded cornners in one image and make an sprite of this. then use background-position to get it working across all the range of browsers out there, including our good old friend IE6.
As of this writing, I don't think that there are any other "good" solutions for cross-browser rounded corners. I have searched high and low and CSSPIE is the best solution I have found. The "known issues" are not nearly as bad as the alternative of having crummy looking pages in IE or resorting to images for everything.
The path issues you are experiencing probably have to do with the fact that the PIE.htc path is relative to the document you are viewing, and not the CSS file that calls it. Just be sure to check that and you should be in good shape.
z-index issues are probably related to children of a PIE border-radius parent not having a -pie-watch-ancestors value set. Alternately, you could just call the PIE behavior again separately on the children.
CSS3PIE takes a little getting used to, particularly if you are trying to get it working with .less files, or on shived html5 elements, or if you're running IE in Parallels on a Mac. There are a lot of things that can go wrong in these scenarios. I honestly believe, though, that PIE is your best bet. If at first you don't succeed, don't give up. You CAN get border-radius working in older versions of IE, along with other essential enhancements like gradients, box-shadows and the like.
I believe the link below works in most browsers and that Facebook did something like this for a week to add a rounded style to their site, and then they realized it takes awhile to load up the corners for IE people.
http://jquery.malsup.com/corner/
Is there any problem If i use position:absolue property in HTML 5 ?
position:absolute;left:somepx;top:somepx;
Will it work on all browsers or does the syntax go upside down ? Im using the
<!doctype HTML>
and developing the html using images and with some text, Just placing them in a good looking way using the position:absolute.And im developing using my internet explorer probably its version 7 I think so.But im worried will it work on other browsers like mozilla and google chrome with no error.Will it remain the same way on all browsers? becuase the stackoveflow or google any webpage looks in the same way in all browsers.I just wanted to know what standards they follow that makes them look same on every browser.
Please just let me know is there any harm or pitfall using the position:absolute.Thank you in advance
It seems you make some mistakes when you build your websites.
using absolute positioning where you shouldn't. It is not appropriate to use position: absolute to make a complex layout. Consider looking for some tutorials to learn how to build a layout using especially float, clear, margin and padding CSS properties. Use absolute positioning only where it is explicitly required.
using non standards-compliant browser during website development. IE7 is quite old browser with buggy support for web technologies. This may cause that your website will display fine only in IE7 and messy in every other browser. What you have to do is to develop website in standards-compliant browser (no matter what browser, just make sure you use the latest version available) and then check the website in older browsers (and possibly fix bugs that appear). Don't forget to check the website in all browsers used by your visitors. Compatibility tables like those at QuirksMode are often useful.
Back to original question, browsers don't distinguish between versions of HTML (there is just standards and quirks mode, but you don't need to care about them because you're using doctype that triggers standards mode in all browsers); so there's nothing more to be aware of. Absolute positioning should (and in most cases, will) work well in IE8+ and all widely used versions of Firefox, Chrome, Safari and Opera. Once again, you're supposed to test your website in all widely used browsers; you'll discover possible browser bugs and incompatibilites then.
Another interesting thing to look at is this:
http://ie.microsoft.com/testdrive/HTML5/PositionedFloats/Default.html
It may very well be available soon and will probably be a lot better for what you want. For now, do not JUST use Position:absolute, as people have said, it is a really bad way of positioning things and should only be used under very specific circumstances.
Well it has nothing to do with HTML5, it is basic positioning.
And it is not a straightforward process to get your site to display the same in all browsers, you should take a look at resetting style sheets or just test your site in a lot of browsers.
Especially older browsers have a way of changing your design.
absolute positioning is part of css3. html5 is just a combination of javascript+html+css
with unique features. so.it should work with all the browsers. but how all the browser will display, you need to chek it in chrome,mozila,safari,opera...etc in recent versions.
browser compatibility may be issue some time.so,don't worry ,it's better to chek and fix the variations.
I have a site, here, that I'm working on which uses some html5 and css3 elements which obviously do not load correctly on certain browsers and i have a few questions about what I can do and I don't have much experience with any codes like php or javascript. these questions are kind of a mess as well - I've been searching all over not really sure of what I should be looking for.
How would I go about creating a popup based on which browser is being used, if possible?
I understand that I can use conditional comments for IE but IE is not the only unsupported browser. Is there a way to activate certain elements, or div's depending on the browser?
How would I go about creating a version of the site that would be shown instead of the unsupported version?
Is there a better way to do this?
These questions may not be the right ones - if not and you know an answer to the question I'm looking for, please, go for it! Thanks!
There are a few tools I would recommend:
Modernizr
Feature detection, allowing you to target features in CSS and JS. It doesn't add features, just lets you test for them.
Includes HTML5shiv functionality Also does a lot more – if you don't use the other features, then don't use it, it does slow down page loads, but is worth it if you need it!
HTML5shiv
Very small, allows you to use html5 elements in IE, nothing else.
CSS3PIE
Lets you use border-radius, gradients and box shadow in older versions of IE. Also can allow PNGs in IE 6. Adds a noticeable delay to page load.
ie7.js (and ie9.js)
Gives you many CSS3 selectors, min and max width, multiple classes and fixed positioning. Also can have a png fix if you like. Doesn't seem to slow things down much.
You can use the moderizer script to bridge the gap for html markup.
I wouldn't really worry about CSS3 working or not in IE. If you have a supported browser you get an enhanced user experience and if you don't you would just get a normal one.