I'm trying to add text-shadows to elements in IE - I know it doesn't support the property but using the filter: property I can get it pretty close.
BUT when the text I use is not black there is a black outline around the text.
How can I remove this outline?
Here's an example... (Please open using Internet Explorer)
http://jsfiddle.net/mossman/mLRYG/
Appreciate any help guys, thanks
/* UPDATE */
Think i'll just have to live with it. Thanks for the direction guys
I went through and started testing all the combinations or your color choices and then I realized. It might not be you color as the issue. I looked up the correct call for the filter: and found this on the Microsoft site.
Shadow Filter
which gave me this:
filter:progid:DXImageTransform.Microsoft.Shadow
I used that in your example and altered a fiew of the values (because with the correct call you have to use the correct values) and guess what... something looks pretty good.
filter:progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=225, Strength=8)
I tested this in IE8. Worked great. I added on to your jsFiddle example. Here is the new link with a working view.
You will also notice that with the official call it doesn't clip the left most shadow on the first letter of the word.
UPDATE:
You can try and use the following in conjunction with the .Shadow
progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
Your call would look like this...
filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
progid:DXImageTransform.Microsoft.Shadow(color='#CC0000', Direction=225, Strength=8)
You might have to play around with the Chroma Color, but it should work. I can't test it on this machine (I don't have IE9 on it).
I referenced this post.
It seems to be an issue with the rendering engine.
With a large enough font-size, I get no black outline.
Since there are no extra parameters for this filter (except one to disabled it), I guess you gotta live with it.
Related
I have a website and i need to implement border radius for text box and Selet box.
Text-boxes are working fine on IE6 with the Support of HTC File.
But Unfortunately Select box not working. its taking the default value.
Check out this link:
http://i40.tinypic.com/qyzs0p.jpg
Please Help me to fix this issues.
Thanks in Advance.
I think it is not possible to achive what you are looking for. The level of customization allowed using CSS styles applied to dropdown elements is very basic as far as I know, even more in old-IEs.
If you really need that border, check for dropdown replacement plugins such as :
http://v2.easy-designs.net/articles/replaceSelect/
However Im not fully sure about its compatibility with IE6.
If I were you, I wouldnt bother too much with IE6 styles... it is really and old browser, the web must go on. As far as you app is working fine, a border is not a big deal.
Good luck! :-)
I have just included css3 pie to show shadows and gradients which seems to work great however as a result of using this my png's now do not display they just show a red 'x' in the place of the image see the link below:
http://www.floodgateone.com/lavender-blue/weddings.html
has anyone ever come across this issue before or could anyone point me in the right direction?
Try deleting the background:#666; on photo-one. See if that makes a difference.
You can also try to do this
#photo-one img { background: none }
Kind of hard to test since i use firebug for testing but the problem is not in firefox.
Besides that you got more issues. You cannot see the nav in IE9
I'm trying to create a pure css Venn diagram like this
Where the circle gets highlighted on mouse hover. But the problem is: using the border-radius property if I mouse over the corner of the circle (outside the circle) , it triggers hover as well.
for a demo see this jsfiddle link and hover over the red area
is there any CSS solution to avoid this or am I ganna have to calculate it using javascript?
EDIT: Thanks to all for the responses.
I should have posted the browser information as well. I'm using Chrome 12
So far it seems this bug exists in chrome. I will update this page with any further findings.
UPDATE Aug 2013: Just tested this again on Chrome 28 and the issue no longer exists.
I know it's possible to draw circles with border-radius:50%, but it really is a bit of a hack. And it doesn't work in IE8 or lower, without using even more hacks, like CSS3Pie.
So while I accept that you've produced a good-looking Venn diagram in your fiddle example, I don't think it's the best way to do this.
A much better solution would be to use a proper graphics library to draw the diagram using either Canvas or SVG.
For Canvas, you could try this library: http://www.canvasxpress.org/venn.html
For SVG, I would recommend Raphael, which will produce hover-able Venn diagrams in about four lines of code.
I know that neither Canvas nor SVG are supported by IE8, but then neither is border-radius, so I assume that isn't a criteria for you.
In any case, Raphael does actually work in all versions of IE, as it detects the browser and renders VML instead of SVG if it's running in IE. Canvas support can also be hacked into older IEs if you really need it.
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
I am using the following code:
-moz-linear-gradient(top , rgba(255,255,255,1), rgba(255,255,255,0));
But I would like to implement a similar gradient in the `other browsers. My problem is that I don't know if I can use the alpha channel and I don't want to use images I would just like to do it with code only.
Can someone tell me if it's possible.
Hope you can help
you'd have to create partially transparent pngs or look at using the filters MS provide (though they are much maligned I should add...)
'cross' browser gradients
Personally these are decoration facets that IMO don't destroy the exerpince of a site - to that end when possible I wouldn't even bother - IE9 will take up significant market share within 12 months and all the work you are about to do won't be needed anymore
Check out CSS3 PIE, it handles this fairly well for IE, although it requires position to be set, and can break on elements that get hidden, and there's a short delay when rendering the gradient...
Webkit has a different approach to linear-gradient, you can see an example on the link.