I have used the CSS below to make speech bubble for my website, Yep Website
It looks okay in google chrome and safari. It does not show up in firefox giving me, '-moz-transform' depricated? I am not good in designing. I want to seek help how to correct this problem. Thanks in advance.
/*SPEECH BUBBLES*/
.wiget_bottom_all li h3 {
position:relative;
padding:15px;
margin:1em 0 3em;
color:#fff;
background:#00B9B7;
/* css3 */
background:-webkit-gradient(linear, 0 0, 0 100%, from(#f04349), to(#c81e2b));
background:-moz-linear-gradient(#f04349, #c81e2b);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#00B9B7, #00B9B7);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/* THE TRIANGLE
------------------------------------------------------------------------------------------------------------------------------- */
/* creates the wider right-angled triangle */
.wiget_bottom_all li h3:before {
content:"";
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:105px; /* controls horizontal position */
border:0;
border-right-width:30px; /* vary this value to change the angle of the vertex */
border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :after */
border-style:solid;
border-color:transparent #00B9B7;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
Firefox has probably stopped to support the vendor prefixed css rule.
Do you have a not vendored prefixed css rule: transform: ... that will probably do the trick.
According to http://caniuse.com/#search=transform the not vendored prefixed transform rule has been supported in firefox since firefox 19.
edit: You do not use -moz-transform in your example code on s.t. you probably use it somewhere else in your css otherwise the error message really should not be there
Seems to have issues with cross browser codes. You can refer to css tricks for cross browser compatible codes. Perhaps, read this.
Related
the CSS code below firefox and internet explorer does not work. How do I fix it ?
thanks.
body {
background:white;
}
.slider-text {
color:#999;
font-size:24px;
font-weight:normal;
font-family:"Helvetica Neue", Helvetica, sans-serif;
letter-spacing:-1px;
width:360px;
background: -webkit-gradient(linear, left top, right top, color-stop(0, #999), color-stop(0.750, #999), color-stop(0.875, red), color-stop(1, #999));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: glint 5.5s infinite;
}
#-webkit-keyframes glint {
0% {
background-position: 0 0;
}
100% {
background-position: 360px 0;
}
}
<div class="slider-text">Continue the Tour</div>
You're using 1 value and 3 properties with the vendor prefix -webkit-:
-webkit-gradient, -webkit-background-clip, -webkit-text-fill-color and -webkit-animation
used by the WebKit rendering engine used by Apple Safari, Google Chrome and Opera 15+ for some properties and some values.
First, check about each property on MDN (Mozilla Developer Network), it has a very good documentation. Just search "mdn gradient" on DuckDuckGo or Google or another search engine (without the dash and forget about the prefix too).
There, you'll learn about its use, its allowed values and there's a compatibility table at the end of each page. If a property needed -moz- prefix till Firefox 4, well forget it, it's useless now. If it's -ms- on IE9, well you probably still need it, etc
Double check with this great resource: caniuse (there's a "Show all versions" button that is often useful)
You must know which browsers you want to be compatible with (IE8 or not, etc) and by browsers I mean version numbers ;) and how it should degrade on others…
Now that you know which prefix are needed, you can write down something like:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; /* protip: always write the unprefixed one in last position */
}
.rounded {
border-radius: 4px; /* no prefix, webkit and Firefox haven't needed them for ages. Used to but not nowadays */
}
Once you've understood what is needed and practiced for a few weeks, you can use tools like Autoprefixer (node plugin, grunt, gulp, in other tools like CSS postprocessor Pleeease, etc)
You're using -webkit which is a Chrome attribute, try finding the Firefox and IE Equivelants of those attributes.
I have a CSS3 transition that resizes/positions an image inside a div on hover.
FIDDLE
This works as desired but my concern is about browsers that don't support CSS3 transitions like IE9-. Would it be possible to write this CSS code so that these browsers have a fallback?
Idealy, the fallback should display the image so it fits the div and isn't zommed (fiddle example) and with no animation on hover.
I would prefer a CSS only solution and to not to alter the markup.
Full code example :
HTML :
<div><img src="http://lorempixel.com/output/people-q-c-1000-500-7.jpg" />
CSS :
div{
overflow:hidden;
width:500px;
height:250px;
position:relative;
}
img{
display:block;
position:absolute;
height:auto;
width:200%;
left:-30%;
top:-60%;
-webkit-transition-property: width, left, top;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-out;
transition-property: width, left, top;
transition-duration: .8s;
transition-timing-function: ease-out;
}
div:hover img{
width:100%;
top:0;
left:0;
}
You could use Modernizr or go through the javascript feature detection route.
Both ways are detailed here:
Detect support for transition with JavaScript
Generally speaking, CSS transitions (and most of CSS, really) were designed with progressive enhancement in mind. The intended fallback in browsers that don't understand transitions is quite simply to ignore the transition properties themselves. This allows the style changes to still take place, only immediately and not in a smooth transition (as implied by the name), and obviates the need for complex workarounds.
What you're looking to do however is to not have any change in state occur at all; you want your image to be fixed in the unzoomed state. That will take a bit more work.
If #supports had been implemented in the beginning, you could easily get away with
img{
display:block;
position:absolute;
height:auto;
width:100%;
top:0;
left:0;
-webkit-transition-property: width, left, top;
-webkit-transition-duration: .8s;
-webkit-transition-timing-function: ease-out;
transition-property: width, left, top;
transition-duration: .8s;
transition-timing-function: ease-out;
}
#supports (-webkit-transition-property: all) or (transition-property: all) {
div:not(:hover) img{
width:200%;
left:-30%;
top:-60%;
}
}
But of course, not everything works that way. It's a real shame that #supports was proposed so late and implementations still haven't caught on. But I digress.
Looking at the support tables at caniuse.com, it looks like Gecko- and WebKit/Blink-based browsers are extremely well covered (except maybe Firefox 3.6 and older), which is a relief because I can't think of any pure CSS-based solution to cater to those engines (other than ugly hacks).
For other browsers, I can see some other workarounds:
It may be worth including the -o- prefix if you care about Presto Opera.
Likewise with -moz- if you care about Firefox < 16.
For IE, simply hiding the div:not(:hover) img rules in conditional comments is enough, since the first version of IE to support transitions and ignore conditional statements happens to be the same — version 10:
<!--[if !IE]><!-->
<style>
div:not(:hover) img{
width:200%;
left:-30%;
top:-60%;
}
</style>
<!--<![endif]-->
Note the use of div:not(:hover) here, analogous to the hypothetical #supports example above. You will need to swap the declarations with your img rule accordingly.
Lets not lie ourselves, the only browser we are talking about is IE9, so just go add:
width: 200%\9;
left: -30%\9;
top: -60%\9;
and IE9 will use it. We can just hope in 2017 there will be no more need for CSS hacks.
I have a question regarding the implementation of nth-child(2) in the following code. the code works well in Chrome/Firefox, and first child matrix transformations perform well in IE. However, I have run into an issue with the second child selector. While I'm aware that IE8 and below does not support nth child, I have attempted to utilize selectizr and jQuery to enable, however I believe it may not work in my situation (as these are server side jsp files and the targeted div is computed dynamically via Javascript).
I am searching for a workaround for this...i need only the second child targeted.
I did a search and came across this post: IE8 :nth-child and :before
Is there a way to apply this method of first child+ li a in my situation?
If not, does anybody have any suggestions for a method to target this div?
If it helps, this is being used to target the floating aggregates above the StackedArea Chart modified from the InfoVis toolkit.
thanks
.fte-chart-container .node > div > :first-child {
font-family: Arial;
color: black;
font-size: 11px;
width: 35px !important;
transform:rotate(-80deg);
-ms-transform:rotate(-80deg); /* IE 9 */
-moz-transform:rotate(-80deg); /* Firefox */
-webkit-transform:rotate(-80deg); /* Safari and Chrome */
-o-transform:rotate(-80deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.17364817766693044,
M12=0.984807753012208, M21=-0.984807753012208, M22=0.17364817766693044,
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.17364817766693044,
M12=0.984807753012208,
M21=-0.984807753012208,
M22=0.17364817766693044,
SizingMethod='auto expand'); /* IE 6 and 7 */
}
.fte-chart-container .node > div > :nth-child(2) {
font-family: Arial;
color: black;
font-size: 10px;
transform:rotate(-60deg);
-ms-transform:rotate(-60deg); /* IE 9 */
-moz-transform:rotate(-60deg); /* Firefox */
-webkit-transform:rotate(-60deg); /* Safari and Chrome */
-o-transform:rotate(-60deg); /* Opera */
-ms-filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.4999999999999997,
M12=0.8660254037844388, M21=-0.8660254037844388, M22=0.4999999999999997,
SizingMethod='auto expand'); /* For IE8 */
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.4999999999999997,
M12=0.8660254037844388,
M21=-0.8660254037844388,
M22=0.4999999999999997,
SizingMethod='auto expand'); /* IE 6 and 7 */
}
You can replace :nth-child(2) with :first-child + * in CSS if you don't know what exactly the second child is going to be:
.fte-chart-container .node > div > :first-child + *
But having * at the end of a complex selector may have poor performance in older browsers, so you should try and identify the element you want to select and replace * with whatever type/class/etc that element is.
I have code that works in Chrome and Firefox, but not in IE8.
<a href="javascript:void();" class="shareActionLink" id="comment">
<img src="comment.gif" class="shareActionImage" />Comment
</a>
The CSS for this is:
.shareActionLink:link, .shareActionLink:visited
{
margin-right:8px;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /*IE8*/
background-color: #fff;
}
#shareActionsBox .shareActionLink:hover
{
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* internet explorer */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; /*IE8*/
}
Based on other StackOverflow posts, I added the IE filters, which helped to adjust the text opacity, however, the image opacity still doesn't change in IE. It works fine in other browsers.
I suspect that this is happening because the img is nested within the link. How do I get the image to change opacity in IE??
Thanks
MS filters only work in IE7 if the hasLayout property is set to true, they only work in IE8 on block elements, or if you set the display property to block or inline-block.. as you're trying to use this on an inline element, the a, then setting display: inline-block; should solve it for all IE's as it works to set hasLayout for IE7 and also keeps IE8 happy
.shareActionLink {
display: inline-block; /* IE needs but shouldn't hurt anyone else */
}
.shareActionLink:link, .shareActionLink:visited {
margin-right:8px;
background: #fff;
color:#999;
opacity:0.6;
filter: alpha(opacity=60); /* IE */
}
.shareActionLink:hover {
color:#333;
text-decoration:none;
opacity:1.0;
filter: alpha(opacity=100); /* IE */
}
Off the top of my head, setting opacity on a parent element means it's children elements get, erm, opacitied? as well.
To target the image specifically, add img after each of the css selectors; e.g.:
#shareActionsBox .shareActionLink:hover img
to target the image whenever the parent link is something (in this case when hovered).
I could not get this to work in IE6 without targeting the <img> element. I've not got IE8 installed so cannot be sure this demo will work in that browser. However, it does work in IE6, Chrome11 and Firefox4.
Also, it is worth noting that if your comment.gif has transparency then you may have further problems with the transparent part unless you set a background-color or use JavaScript to handle the hover. See another answer I wrote on this.
I used rounded corner and gradient. it's working good on firefox but rounded corner not working on IE. IE rounded corner only working when I remove gradient css. Please help me.
<h2 id="user_comments">9. User Comments and Notes</h2>
h2 {
-webkit-border-radius: 8px;
-moz-border-radius:8px;
background:-moz-linear-gradient(center top , #A0ABBF, #DEDEDE, #A0ABBF) repeat scroll 0 0 #A0ABBF;
filter: progid:DXImageTransform.Microsoft.gradient(StartColorStr='#DEDEDE', EndColorStr='#A0ABBF'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#DEDEDE', EndColorStr='#A0ABBF')"; /* IE8 */
border:2px solid #A0ABBF;
font-size:16px;
letter-spacing:1px;
margin-top:36px;
padding:0 1em;
position:relative;
}
Firefox:
IE:
IE7 and IE8 don't support border-radius.
IE9 will.
There are JavaScript hacks, most involve a heap of 1px elements absolutely positioned or use SVG.
You can also images.
I'd just leave it as is, and consider > IE8 and other browsers are getting the progressive enhancement.