I have a question about IE8 with css. I pasted code in my css from msdn
.shadow {-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";}
I used the problem code like this
<div class="shadow"> <p>Bla Bla</p> </div>
And i have a problem about that. I want only DIV has shadow but "Bla Bla" has shadow too.
Can anyone suggest a method to fix this issue?
Thanks...
You need to specify a background color for your element:
http://jsfiddle.net/UNKAc/14/
.shadow {
background:#fff;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
}
Don't quote me on this but: i think this is because IE tries to cast a light that need a solid to drop a shadow. And since your div is transparent atm the only thing that can cast a shadow is the text itself.
You could apply background-color: #fff to your div, then you won't be able to see the shadow drawn by the text.
However, the filter doesn't look as good as box-shadow from CSS3.
IE8 does not support box-shadow, but you can emulate it with CSS3 PIE.
I know this is a couple weeks old, but if you're still tweaking at all you should really look at CSS3 PIE. One of my friends here at work showed it to me and it's pretty great if you can rely on JS for these types of enhancements for IE.
http://css3pie.com/documentation/pie-js/
Related
I'm trying to make gradient text in webkit browsers using this CSS code:
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
it works perfectly in Chrome, but in Safari (both 8 and 9) it doesn't render gradient text unless you select it via mouse click+drag over it.
HTML is as follows:
<p class = "text">Hello world.</p>
Spent 2 evening on that. Found a lot of recommendations to use this method with couple issues similar to mine and no solutions at all. Would appreciate a lot if someone would help.
IMPORTANT UPDATE:
I've found out, that this code works great when applied to single <p> element, but fails to render in Safari (not in chrome) when applied to div wrapper to single or multiple <p> elements like this:
<div class = "text">
<p>First line.</p>
<p>Second, way longeeeeeeer line. </p>
<p>Third line, just to see gradient span over multiple lines. </p>
</div>
Any thoughts why this could be the case or how to overcome this?
I found a simple fix for this
.text, span {
display: block;
}
I know it's an old question but in case someone still needs it: I had the same problem and what worked for me was to add a text-shadow to it and make the shadow transparent.
.text {
background: -webkit-linear-gradient(blue, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0px 0px #00000000; <--
}
Note that I added '00' to the end of the HEXA code which leads to transparency if someone doesn't know!
If you code like this <h1>Discover <span>Something</span></h1> then text gradient won't appear in Safari but does appear fine in Chrome and Firefox.
If you do like this <h1>Discover Something</h1> without span tag then it does work properly. I don't think Safari liked tags inside the tag. Nasty bug. It works on other browsers like Chrome and Safari.
If you have a two lines text and in Safari does not works, try:
-webkit-box-decoration-break: clone;
flex or inline-flex are the problems if you are using it.
block or inline-block are fixing the problem
This remains a Safari bug as of May 2018. The gradient properly appears if the text is first highlighted, and then unhighlighted.
I was able to use the following alternative:
.text {
-webkit-mask-image: linear-gradient(blue, green);
}
This is working in Safari 11, iOS Safari 11, Chrome 66, and Firefox 60.
Inspired by https://stackoverflow.com/a/45136579/9772439
I had the same problem with b tag, and solve it with property
display: inline-block;
I had the same issue and it looks like it's a Safari bug.
I noticed that the issue only happens when your cascading elements are block types.
My hack for this went like this
<div class = "text">
<span>First line.</span>
<p></p>
<span>Second, way longeeeeeeer line. </span>
<p></p>
<span>Third line, just to see gradient span over multiple lines.</span>
<p></p>
</div>
The only reason I have the paragraph tags is for spacing since adding a display block on the spans will trigger the bug again.
For me, the easiest way to archive this is drawing text as image, contain shadow... And put it in background css.
If you have tried all of the above and none are working, check to see if you have a Pseudo element on the tag.
Safari doesn't like it if these are static so you'll need to position them absolute.
I have the same issue, for fix it use attribute display with the property "inline" or "inline-block" to the main element, in your case p.text
I'm thinking of creating a custom made rounded corners block using only divs, and I was curious to know what you guys think, if that's a good enough approach, or is there an easier way to get a cross browser support (While also supporting older browsers such as IE6)
I'll write a little simple explanation code for you guys to understand easily:
<div class="Block" style="position:relative">
<div>
Content will go here or something
</div>
<div name="TopLeft" style="position:absolute;top:0;left:0;"></div>
<div name="TopRight" style="position:absolute;top:0;right:0;"></div>
<div name="BottomLeft" style="position:absolute;bottom:0;left:0;"></div>
<div name="BottomRight" style="position:absolute;bottom:0;right:0;"></div>
</div>
In the real code, I'll give each one of them a background, and of course put it in a css file instead of writing it inline like that.
Use CSS3Pie.
This is a Javascript hack for IE that implements the border-radius CSS in old versions of IE.
If you need rounded corners in IE6-9 browsers you only need to use CSS3 border-radius and one PIE.htc file
Progressive Internet Explorer
div{ border-radius: 6px; -moz-border-radius: 6px; behavior: url(PIE.htc); }
This works best in all IE browsers
Yes, that will work fine.
You can also add the elements using script, that will make the markup cleaner. I use that approach here: bytbil.com
Doubt it will work in IE6, but you can use the following:
-moz-border-radius: 15px;
border-radius: 15px;
Put that in your CSS for a DIV and it will support most browsers, but again, not sure about IE6... It does definitely work on IE9, Safari (5+), FireFox(1.0+), Chrome(5+) and Opera(10.5+)...
I guess this would work, and it's as good as anything to support IE6.
Any solution that covers IE6 is bound to be an awful hack. I think it's really worth it to wonder if you really need it. I would prefer just using css rounded corners and let the chips fall where they may.
I found a Stackoverflow article on creating text shadows in IE: StackQuestion
Now I tried all of the 'filter' solutions in there, and in IE9, the text renders horrible(although the shadow shadow shows, the text pixelates heavily...).
Does anyone know of a proper text-shadow technique for IE? Even if it is just for IE9...
Thank You
Check this site out: http://css3pie.com/
It's a plugin that enables you to use CSS3 in IE6-9
You can get text-shadow effects in Internet Explorer, taming IE's crunky filter shadow effects, forcing them to look okay and stop pixelating the text. Use the IE Chroma filter:
Set a background colour that is close to, but not the same as, your shadow colour - e.g. for black shadows, a dark grey, for white glows, a light grey
(set the background colour in a stylesheet or style rule inside an IE-only class or conditional comment, to not wreck your design in every other browser!)
Precede your IE filter CSS rule with a Chroma filter set to the same colour as the background fill
It looks (almost) quite good!
jsfiddle examples (load in IE8, IE9)
...or if you don't have easy access to IE8/9, here's a screenshot from that fiddle in IE9 IE8 mode. Notice the difference between the horrible, artifact-ridden, pixelated mess that is IE's default filter, against the quite crisp, normal-looking Chroma filter equivalents.
CSS code examples. Note how you've got a Chroma filter then another filter, all on one line, in quotes against one -ms-filter - and how the Chroma colour matches the background colour precisely, and how the Chroma colour compliments (but doesn't match) the main effect colour:
.chroma-glow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Glow(color=ffffff,strength=4)";
}
.chroma-shadow {
background-color: #dfdfdf;
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(Color=#dfdfdf)progid:DXImageTransform.Microsoft.Shadow(direction=135,strength=2,color=ffffff)";
}
Some requirements (learned the hard way...)
Elements must be block or inline-block, can't be inline.
Filters fail to apply to any children that are position: relative; or position: absolute;
(they work if applied directly to position: absolute; or `position: relative; elements)
If you're adding the filters dynamically, e.g. with jQuery like $elem.css('filter','progid...');, it seems like the background colour must be applied directly to the element with the filter for the chroma to work. A couple of tips:
Have the effect colour, applied background colour, and chroma colour all identical
Since you'll want this background colour only in IE, use feature detection or IE detection.
#element {
filter: glow(color=black,strength=5);
}
I'm interested in learning how to create a css3 box-shadow inset with a transparency.
See the input in the fiddle here: http://jsfiddle.net/TeGkt/4/
For the input's background image. How can you create that effect without needing an image?
Thanks
Yes, using CSS3 styles:
http://jsfiddle.net/arnorhs/Nz7KG/
Will not work in IE pre ie9
And I didn't add any of -moz or -webkit- prefixes for compatibility..
I also didn't do it 100% the same. Your question seemed to be towards if it's possible or not...
rgba(255,255,255,0.75)
where rgba(r,g,b,a) is red green blue alpha
Little background information here: I have narrowed down the problem, but can't determine what the fix is. In IE6 the input box won't allow me to use my mouse to select it.
Please go here to see the problem: http://www.malahatautoparts.com/business-application/
The problems stems from an IE6 fix for the CSS background.
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
}
If I remove that from my IE6 css file, input box all of a sudden works.
Any ideas on what I can use to fix this?
The conditional comment you have there for "less than IE 7" isn't even working right for the PNG transparency it's supposed to fix in IE6: I'm seeing grey background around the transparent corner areas. In IE7 the transparency works natively without loading that stylesheet.
The method you're using in the IE stylesheet relies on the alphaImageLoader filter, which I suspect is blocking over top of the HTML form controls on the page.
There's an alternate method that uses VML instead: check out DD_BelatedPNG. I'm not 100% sure if it will solve your problem, but I have a hunch it will, and it's a cleaner solution than what you're using now.
<textarea> and <input> selections: selectionStart and selectionEnd are not implemented in IE, and there's a proprietary "ranges" system in its place, see also Caret position in textarea, in characters from the start.
Also see What are the typical reasons Javascript developed on Firefox fails on IE for common reasons of failure of Javascript/CSS in IE which work in Firefox & other browsers (or vice versa).
Some excellent tips so you can get a uniform look & usage in all browsers.
use css with
#main{
background-position:-9999px -9999px;
filter: progid:dximagetransform.microsoft.alphaimageloader( src='http://www.malahatautoparts.com/wp-content/themes/malahat/images/bg-main.png', sizingmethod='crop');
position: relative;
}