I'm looking for a way to get text-shadow that looks like css3 text-shadow, but that works with IE, Firefox, Opera, Safari , etc... The solutions I found either looked messed up or did not look consistent in IE. Thanks
http://www.workingwith.me.uk/articles/css/cross-browser-drop-shadows
.shadow {
height: 1em;
filter: Shadow(Color=#666666,
Direction=135,
Strength=5);
}
This doesnt work for me... in IE
ul.dropdown a.selected-l {
background-image: url('Images/Navigation/Left_round/hoverL.png');
height: 50px;
width: 130px;
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size: large;
color: #FFFFFF;
text-align: center;
text-decoration: none;
line-height: 50px;
vertical-align: middle;
/* pretty browsers*/
text-shadow:#000 0px 0px 5px;
/* ugly ie */
zoom:1;/*force hasLayout*/
position:relative;/*for absolute position of child element*/
;
}
ul.dropdown a.selected-l span {
position:absolute;
left:-7px;top:-7px; /* strength + pixelradius */
z-index:-1;/* force under the normal text */
/* the magic: filters */
filter:
progid:DXImageTransform.Microsoft.Glow(Color=#eeeeee,Strength=2)
progid:DXImageTransform.Microsoft.blur(pixelradius=5, enabled='true')
;
zoom:1;/*force hasLayout*/
}
My suggestion will be to use CSS3 text-shadow (for Webkit-based browsers, FF3.5, Opera 9.5).
For IE, use IE conditional comments to implement one of the followings:
sIFR
cufon
FLIR (not too sure about shadow effect)
IE-DXImageTransform
Some related articles:
Cufon vs sIFR vs FLIR
SO - sIFR or FLIR?
SO - SIFR vs Cufon vs Typeface.js
Check out this post i wrote about this problem:
Crossbrowser Text Shadow with Jquery
Maybe that's more up your alley? It IS using jQuery though and isn't a really über efficient way.. but anyway it's something. :)
Related
Chrome and Opera render my page properly without issue, however IE11 and Edge do not.
I am using pure CSS to expand/collapse 3 section headings. It was my understanding IE 11 had more support for CSS3/webkit and I definitely thought Edge would of stepped up it's game.
https://jsfiddle.net/x0c5fsqh/
CSS Snippet
summary::-webkit-details-marker {
background: url(/images/toggle-expand.png) center no-repeat;
color: transparent;
font-size: 125%;
margin-right: 2px;
}
details[open] summary::-webkit-details-marker {
background: url(/images/toggle.png) center no-repeat;
color: transparent;
}
summary:focus {
outline-style: none;
}
article > details > summary {
font-size: 28px;
margin-top: 16px;
}
details > p {
margin-left: 24px;
}
details details {
margin-left: 36px;
}
details details summary {
font-size: 16px;
}
Rendered Properly
How IE/Edge renders it
All of the headings overlap in to the content of the previous sections that should be hidden and the toggle images do not appear at all. Just looks like the above CSS is completely ignored.
Any ideas?
From what I can see the <details> and <summary> elements are not supported in IE and Edge. It has nothing to do with supporting CSS3 features. It looks like those elements are part of the HTML5.1 spec.
Reference: MDN, WebPlatform, caniuse.com.
Take a look at the Resources tab on caniuse.com. There's a few links pointing to some polyfills.
As others have noted, CSS properties prefixed with -webkit- won't work in IE/Edge. Just as -o- or -ms- wouldn't work in Chrome.
I'd like to use the IE9 hack in my CSS, instead of having a separate conditional stylesheet.
These don't seem to work though.
.cover-header .cover-intro {
text-align: center \9;
font: 0/0 a \9;
}
.cover-header .cover-intro:before {
content: ' ' \9;
display: inline-block \9;
vertical-align: middle \9;
height: 100% \9;
}
.cover-header .cover-intro .cover-heading {
width: 100% \9;
display: inline-block \9;
vertical-align: middle \9;
font: 16px/1 'Lato', Helvetica, sans-serif \9;
}
I wanted to know what properties are supported with this hack, and if the above are, why aren't they being applied to the IE9 browser?
Any help is appreciated. Thanks in advance!
The \9 hack should work with all properties. The problem here is that you have a space preceding the \9, which breaks the hack.
Removing the space should fix it. Doing so might make your CSS a little less readable, but unfortunately it's absolutely necessary in this case. In properties with space-separated values, such as the font shorthand, only the space directly preceding the \9 should be removed; the rest should be kept as they are part of the property value.
.cover-header .cover-intro {
text-align: center\9;
font: 0/0 a\9;
}
.cover-header .cover-intro:before {
content: ' '\9;
display: inline-block\9;
vertical-align: middle\9;
height: 100%\9;
}
.cover-header .cover-intro .cover-heading {
width: 100%\9;
display: inline-block\9;
vertical-align: middle\9;
font: 16px/1 'Lato', Helvetica, sans-serif\9;
}
Chekout following List of CSS hacks for different versions of IE
CSS
#hack{
color:red; /* All browsers */
color:red !important;/* All browsers but IE6 */
_color:red; /* Only works in IE6 */
*color:red; /* IE6, IE7 */
+color:red;/* Only works in IE7*/
*+color:red; /* Only works in IE7 */
color:red\9; /* IE6, IE7, IE8, IE9 */
color:red\0; /* IE8, IE9 */
color:red\9\0;/*Only works in IE9*/
}
Make sure you write hacked css property after the normal css property for eg
.div {
color: #f00;
color: #000\9\0; /*Only works in IE9*/
}
I have built a webpage, it works fine in chrome, ff, but not in IE.
http://www.magyarregeszet.hu/
I have found many specific bugs about tables and layout, however I can't seem to figure out the font and text-transform type bugs.
Can someone help me? E.g. the menu entryes on the top left should be uppercase in IE too. This entry is:
.menu-item:not(.menu-item-77) {
color: white;
text-transform: uppercase;
font-weight:normal;
margin-bottom: 4px;
border-bottom: 1px solid white;
text-decoration: none;
}
I use wordpress, and the constructor theme.
You cannot use the :not pseudo-class in IE8, check http://caniuse.com/#search=:not for support. Internet Explorer 9+ supports this advanced selector.
If you require IE8 support, I would encourage you to provide your basic styles:
.menu-item {
color: #FFF
}
And then your specific styles afterward:
.menu-item-77 {
color: #CCC
}
Fiddle: http://jsfiddle.net/jonathansampson/w39a7/
:not is not compatible with IE8 http://www.quirksmode.org/css/contents.html
I have the following CSS class defined:
.box .login {
border: 0;
float: right;
clear: both;
height: 48px;
background: url(../images/submitr.gif) no-repeat right;
line-height: 20px;
padding: 12px 42px 16px 23px;
margin: 8px 22px;
color: #FFF;
font-weight: bold;
}
The multiple background are working perfectly on Chrome, Firefox, Opera, Safari, and IE9. However, they're not working on IE8. Does anyone know why that is?
(if I only have one background, it DOES work on IE8. It's when I start introducing those other backgrounds that it starts to flip out.)
Thanks for the help! I really appreciate it :)
Multiple Backgrounds is a CSS3 specification. IE8 DOES NOT understand CSS3, and IE9 for that matter doesn't understand it all. To get it to work in older browsers you'll have to combine the images into one, or overlay multiple elements to get them all to display on top of one another. z-index: is your friend :-)
Well, I'm a tad late I guess, but there are ways to have multipe backgrounds with CSS2.1 which work in IE8:
http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
Internet Explorer 8 doesn't support CSS 3 multiple backgrounds.
i am using FF as the main testing platform and Chrome (for Mac) as the secondary.
I just noticed that Chrome is showing ~20px off positioning for CSS. (just to be clear Chrome is showing the TEXTAREA ~20px down as compared to FF)
Also Chrome is not obeying the width CSS property for TEXTAREA.
Is it just me or everyone is having this problem? I thought IE was crazy.
TEXTAREA {
background-color: white;
border: #ccc 2px solid;
color: black;
font-family: calibri, helvetica, arial, verdana, ms sans serif;
padding: 10px;
font-size: 16pt;
font-weight: normal
min-width:320px;
min-height:138px;
max-height:138px;
resize: none;
}
Is there a solution??
I think it would help if you could show us your 'troublesome' page. Maybe make a copy and upload it to the web so we can give it a check?
Whatever the case, I'm sure it has something to do with more than just the textarea itself. Perhaps its one of the containing elements, a rule on a parent div or table td or who knows. Since it's a textarea, I'm pretty sure there's a form or submit of some type involved so yeah, please show us more of your code ;)
You might find this useful anyway so that you can edit your code individually for moz or chrome:
Gecko browsers (FIREFOX):
#-moz-document url-prefix() {
/* Gecko-specific CSS here */
}
WebKit browsers (CHROME, SAFARI):
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here */
}
Cheers
Different browsers have different defaults. Add the following to the top of your CSS file:
* {
margin: 0;
padding: 0;
}
Also, what doctype are you using? If XHTML then "TEXTAREA" needs to be lowercase.