I'm having a really really weird issue...
I have a header with some background which has the background-size as cover. For IE8 I do have this filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myawesomefile.jpg', sizingMethod='scale');
Which loads fine and it's shown well. However, everything inside the header, becomes un-clickable. hover doesn't work and they don't fire any events...
I've prepared some JSBIN to show this behaviour.
On of the problems with the old IE filter styles is that they do have some nasty glitches, which can result in weird things like this.
This specific issue is a new one on me, but it's just the kind of thing that I'm used to seeing with filter.
I've just spent a bit of time fiddling with your code to see if I could work around it, and I haven't got anywhere. So my suggestion would be to give up on the filter.
Fortunately, there is an alternative: Version 2 of the CSS3Pie library includes a polyfill for background-size, which means that it can be supported in all IE versions.
There are some caveats with CSS3Pie as well; obviously it's a Javascript library, so will fail if your users don't have JS enabled. And it requires you to use the shorthand background syntax rather than a separate background-size property. But the point is that it does work, whereas clearly your current solution doesn't, so I'd say it's worth a try.
Hope that helps.
Related
I have this example : http://jsfiddle.net/ruchan/8efhk9f5/
I want to make the background(only) of the blocks blurred.
using
filter: blur(5px); makes whole content around it blurred.
Tried using it inside :beforebut still doesn't works
How do i only blur the background, and leave the content un-blurred.
There is a proposed CSS mechanism to do this in the draft version of the filters spec, but it's not implemented in any browsers yet (that I'm aware of) (edit: implemented in WebKit nightlies now, and supposedly is in Mobile Safari iOS 9). For future readers of this answer, this may be a viable solution.
It looks like this:
.thing {
background-image: filter(url('myimage.png'), blur(10px));
}
So, basically it's a functional notation that lets you apply a filter to an image as you load it.
Again, this is not supported anywhere as of right now.
The example from CSS Tricks mentioned in another answer uses a pseudo-element to basically create a duplicate of an element using the same background, and then blurs that with a filter. That should work as a realistic solution today (at least for browsers that support CSS filters - don't forget the -webkit- prefix as well as the unprefixed version!), otherwise you'll have to fall back to a manually created blurred image.
I've got a fancy css neon effect on a navigation. This works perfectly on any major browser except on IE < version 10.
The problem is that there is no text shown on IE 8+9.
I have no Idea where to start with a fix so I would be very grateful for every tip.
It doesn't need to be working with IE8, IE9+ would be fine.
The effect can be found on the page http://www.arch-on.ch/team/philosophie/
Many thanks in advance for any helpful input
CSS property text-shadow is not supported by either browser (IE8, IE9) and box-shadow is only supported by IE9
You best solution is just not to have the glow effect in those early browsers and give users of those browsers a warning that the site looks better in a modern updated browser.
To achieve what you want in those browsers you would have to create transparent png images and swap them out on :hover. But this because real messy (especially when you have to keep adding new text or change text) and is not efficient.
Do not create more work for yourself with something that just applies to aesthetics.
Try Quirksmode for before: and after: content: http://quirksmode.org/css/user-interface/content.html
There is also a plugin called CSS3Pie that "makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features". Maybe implementing this is okay for you. http://css3pie.com/
Otherwise you have to avoid using CSS3 if you want to go down to IE8. Check this chart for browser compatibility of CSS3 statements:
http://www.normansblog.de/demos/browser-support-checklist-css3/
Cheers
Frank
I used PIE.htc and it looks perfect in IE7, but there's a difference in IE8, so I need the best .htc file to support css3 in IE.
CSS3Pie is the best in its class. There are a number of other hacks that do similar things for IE8, but they all work in much the same way, so they'll likely have the same bug.
The solution to your problem is documented in the CSS3Pie Known Issues page.
If you get this kind of problem, you need to make sure that the parent elements are position:relative; rather than the default (position:static). This solves most of the weird layout issues that crop up with Pie.
Setting zoom:1 in the element also fixes a number of issues that might crop up (see the 'hasLayout' notes in the page linked above), although Pie does set this itself, so you shouldn't need to.
These issues are all caused by bugs in IE, not bugs in Pie -- Pie works hard to work around the various IE issues, but at the end of the day, it is a hack to force modern features into an old browser, so don't be surprised if you have to mess around with it a bit.
If you continue having issues, it would be worth posting the details on the forum on the the CSS3Pie site, as the author is very responsive.
Hope that helps.
I am getting this display in IE 7
I am getting this display in Firefox:
for the following code
Could anybody point me, What I should do to make the IE Display simalar to Firefox and also, How Do I make the Size should be same for all the headings?
Internet Explorer does not support gradients, shadows, nor border-radius properties. border-radius is supported in IE9, but this won't be of much help!
You can look into CSS3 Pie, which uses IE-specific .htc files to achieve almost the same effect.
For now, if you really need to be fully compatible with all IE's (and other browsers for that matter) I'd use an image. It's not very nice but at least you can rest assured that it will always work ;-)
Rounded corners and drop shadow aren't going to work in IE7 without a lot of clever image tricks. You can't fix it through CSS alone.
Alternatively you could probably find a JavaScript plugin which would create these effects for you if you don't mind taking that route (see curvy corners for example).
My webpage is suffering from two IE6 rendering bugs. Each of them have workarounds, but unfortunately said workarounds are incompatible with each other.
Here's a minimized test case. The behavior in Firefox/Safari is the desired/correct one. IE7 is unknown, since I don't have access to it right now.
First bug: #content has overflow: auto and contains a relatively-positioned div. IE6 incorrectly gives the relatively-positioned div a 'fixed' appearance. Workaround: Set position: relative on #content.
Second bug: The page sometimes shows a modal popup. The z-index on the popup and background are set really high to stop anything behind them from being interacted with. This works fine until I set position:relative on #content, which makes IE6 treat the z-index property completely wrong.
How can I make these bugs play nicely with each other? (Note: Remotely formatting the hard drives of users still running IE6 is not an option, much to my dismay.)
Edit: Here's a second test case that shows what happens when I apply position: relative to content. The first bug ('fixed' appearance of #content-header) is solved, but it causes the z-index bug to kick in and mess up the modal background.
There are a myriad of implementation as to how to avoid the massive issues with ie6 (and below) conformity. The only one that has actually worked for me (to a great extent even) is Dean Edward's solution.
Try to insert the following line in your main header:
<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js" type="text/javascript"></script><![endif]-->
-- and see how it goes from there (and what you still need to handle, since it probably won't fix everything).
The script size is a mere 30kb, and will only be loaded in ie6 and ie7.
The google code url is (obviously) http://code.google.com/p/ie7-js/
Implement something like we've done at Ra-Ajax.org (hint, visit the site with IE ;)
Seriously, even prototype.js and 37signals have STOPPED supporting IE6 now, I think it's time to move on...
I don't think using a library is too bad of a penalty to minimize my time working around ridiculous IE bugs.
We ended up using the bgiframe jquery plugin (http://plugins.jquery.com/project/bgiframe). It implements the iframe "shield" technique in a library. I figure that making IE6 users have to have a bit more of a library download penalty (which isn't really all that much) so that I don't have to go crazy about IE6 bleedthru is worth it.
P.S. I think the web developers of the world should start a class action lawsuit to force Microsoft ether to offer the equivilant of firebug for IE6 and IE7, make sure all IE6 and IE7 instances are upgraded to standards, or remove all versions of IE6 and IE7 from all computers on the Internet, or bail-out all web developers with a payment of $1M each for their pain and suffering!
While it may be the wrong solution, and probably way overkill, jQuery can do modal popups similar to this and works on IE6. I'll probably get downvoted for such a simple answer, but it is still worth considering, or at least looking at, other solutions before reinventing the wheel.