I am assigned a task and will create a pure css menu that works on all browsers including IE6 and 7. I have to use :hover pseudo class. As these classes are not supported in IE6 still is there are workaround for this using css? If yes please how to do it?
There are a number of tools available on the web for IE6 ~ IE7 pesky fallback.
Check this out:
http://selectivizr.com/
Or if you just want something smaller, look here:
IE6 ~ IE7 great css3 pseudo elements fallback
Good luck,
George!
Related
I have switched from IE8 to IE11, but still I am not able to use CSS3 properties. IE11 not recognising the CSS3 specific porperties like border-radius and box-shadow.
In the developer tools they are without a check box and are red underlined.
A possible reason which I have found is that the doctype html is always commented out and I assume that because of that IE is not recognising the properties.
Try this website: http://caniuse.com/
It will show a guide as to what CSS and general web design rules work with which browsers with and without plugin support.
Border radius: http://caniuse.com/#feat=border-radius
Boxshadow : http://caniuse.com/#feat=css-boxshadow
The graphs output on these links show that both these CSS rules work in IE above IE8.
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!
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.
I am a newbie in web development. I made a CSS drop-down menu using CSS3 and CSS3PIE (css3pie.com), but the drop-down doesn't work in IE6 and Firefox.
Usually this technique works in both browsers, without using CSS3 and PIE.
Does PIE have problems with CSS drop-down technique? How to fix this problem?
Here is my code (I use "if lte IE 6" hack in the code):
http://jsfiddle.net/NjQGt/
And this is where you can get CSS3PIE (PIE.htc): http://css3pie.com/download-latest
Thanks in advance. :)
Have you made sure that the elements that PIE is used with are have position:relative set for them?
If not, make sure you've read everything here: http://css3pie.com. You might end up deciding that for such an old browser it's not worth having rounded corners and shadows – it's not exactly vital, and users of older browsers probably would prefer things to be quick rather than pretty.
I am using moz-boder-radius(-webkit-border-top-left-radius) to add rounded divs to my website.
these work fine in Mozilla, chrome and safari but as usual Internet explorer have to have some problem.
Is there any such property to add rounded divs in Internet explorer.
This (jQuery plugin) works cross-browser:
http://jrc.rctonline.nl/
This is a standalone version, also works cross-browser:
http://www.dillerdesign.com/experiment/DD_roundies/
There's no way to get rounded corners with pure CSS in IE.
The -moz and -webkit properties are experimental, and not an official part of the CSS2. They are really meant to work for just Mozilla (Gecko) browsers, and may be phased out of those browsers too after a time.
I used this, it requires no images or javascript,just css:
http://blog.benogle.com/2009/04/29/css-round-corners/
With pure CSS there is no way to do that for IE!
But you can add a conditional comment (<!--[if IE]><![endif]-->) with some extra CSS which apply four rounded corner images to a "top" div and a "bottom" div contained in a main div!
I guess you are trying to use IE version lesser than 9.0.
The border-radius CSS property is supported only from IE 9.0 which brings the nice rounded rectangle.
https://developer.mozilla.org/en/CSS/border-radius
If you need to use rounded rectangle below IE 9.0, you may need to use images to achieve this.