I worked on some website and I get this in firefox:
http://i.imgur.com/BRIBTwF.png
and in Chrome, Opera and even IE10 I get as it should be:
http://i.imgur.com/75wXr1c.png
This is my css:
.carousel-bottom{
background: -webkit-gradient(radial, rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png'); /* Saf4+, Chrome */
background: -webkit-radial-gradient(rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png');
background: -moz-radial-gradient(rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png'); /* FF3.6+ */
background: -ms-radial-gradient(rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png'); /* IE10 */
background: -o-radial-gradient(rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png'); /* Opera 11.10+ */
background: radial-gradient(rgba(255,255,255,1) 48%,rgba(168,168,183,1) 90%), url('../img/texture.png'); /* W3C */
height:15px;
box-shadow: 1px -1px 2px grey inset;
overflow:none !important;
z-index: 1000;
}
Anyone know what could be the problem?
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
Here you can find what you need
Related
figure figcaption {
position:absolute;
top: -65px;
background: rgba(0, 0, 0, 0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
opacity: 0.7;
zoom: 1;
width: 195px;
height: 65px;
}
for some reason the background is not appearing on IE 8. Rest of the browsers are working fine.
Initial Considerations:
http://css-tricks.com/snippets/css/cross-browser-opacity/
-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);
References:
Opacity CSS not working in IE8
Internet Explorer Dev Center
http://social.msdn.microsoft.com/Forums/ie/en-US/616b7ee2-fdd3-48d9-9485-28608517afc1/ie-8-progiddximagetransformmicrosoftalphaopacity90-with-rollovers-does-not-work?forum=iewebdevelopment
http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85).aspx
Alternative Considerations:
You might want to try and experiment with the online ColorZilla app. I've found it to be incredibly helpful when trying to deal with browser versions and compatibility issues regarding not just gradients but backgrounds and their sometimes hard to remember properties.
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjciLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.7) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.7)), color-stop(100%,rgba(0,0,0,0.7))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.7) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 ); /* IE6-8 */
All Code Taken From ColorZilla: http://www.colorzilla.com/gradient-editor/#000000+0,000000+100&0.7+0,0.7+100;Custom
Firefox 26.0 and IE 8 are giving me issues. Works fine in chrome. Been stuck for a long time now, anyone can help me out?
.sectionBoxTitle {
height: 40px;
margin: 0px 0 60px 0;
padding: 0;
color: white;
background: -moz-linear-gradient(100% 100% 90deg, ##0b4bbb, #007fe4);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0b4bbb), to(#007fe4))
}
Here is a cross-browser solution that should help you out. I think it covers most scenarios:
.sectionBoxTitle {
height: 40px;
margin: 0 0 60px 0;
padding: 0;
color: white;
/* For Browsers that do not support gradients */
background-color: #0b4bbb;
/* Safari 4+, Chrome 1-9 */
background: -webkit-gradient(linear,0% 0,0% 100%,from(#0b4bbb),to(#007fe4));
/* Safari 5.1+, Mobile Safari, Chrome 10+ */
background: -webkit-linear-gradient(top,#0b4bbb,#007fe4);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top,#0b4bbb,#007fe4);
/* For IE 6,7,8,9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0b4bbb',endColorstr='#007fe4');
/* IE 10+ */
background: -ms-linear-gradient(top,#0b4bbb,#007fe4);
/* Opera 11.10+ */
background: -o-linear-gradient(top,#0b4bbb,#007fe4);
/* CSS 3 Support */
background: linear-gradient(to bottom,#0b4bbb 0,#007fe4 100%);
}
FIDDLE
Documentation: CSS Tricks
What you'll need is the following:
.sectionBoxTitle {
height: 40px;
margin: 0px 0 60px 0;
padding: 0;
color: white;
background: #0B4BBB; /* Old browsers */
background: -moz-linear-gradient(top, #0B4BBB 0%, #007FE4 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #0B4BBB), color-stop(100%, #007FE4)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0B4BBB 0%,#007FE4 100%); /* IE10+ */
background: linear-gradient(to bottom, #0B4BBB 0%,#007FE4 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0b4bbb', endColorstr='#007fe4',GradientType=0 ); /* IE6-9 */
}
Demo.
You'll need all these browser-specific prefixes for it to work in every browser. Just specifying -moz- and the old syntax for -webkit- probably used to cover all browsers that would support gradients back in 2010, but nowadays there are more browsers that support it, so more browsers to add prefixes for.
This code was taken directly from http://www.colorzilla.com/gradient-editor/. I only changed the color format from rgba() to #HEX.
I am developing a website using html , css and javascript . The buttons display differently in every browser . Here are the screenshots for different browser of the same page :
Internet Explorer :
Firefox :
I actually intend it to display as it displays in firefox . Here Some of the css code i am using :
#button{
float: left;
width: 500px;
height: 50px;
line-height: 50px;
background-color: #06C;
padding-left: 20px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
-moz-box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
box-shadow: 0px 1px 1px 0px rgba(255,255,255, .2), inset 0px 1px 1px 0px rgb(0,0,0);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #60B842),
color-stop(0.85, #7FD13D)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these to change the button colors */
#B58515 0%,
#DC9E1F 85%
);
/* change this to change the text color and font type */
color:#fff;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
text-shadow:1px 1px 1px #4c9434;
}
#button:hover{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, #6DD14B),
color-stop(0.85, #85DB40)
);
background-image: -moz-linear-gradient(
center bottom,
/* change these colors to change the mouse hover colors */
#E17100 0%,
#FF9326 85%
);
box-shadow:0 2px 0 #5EA839;
}
There maybe some issues with using the gradient . Can someone suggest me any changes or another ways to code so that the webpage looks the same in different browsers ?
I usually use Colorzilla's Ultimate CSS Gradient Generator to generate cross browser CSS gradient code.
Apart from -webkit-gradient() and -moz-gradient() you also need to use the prefixes for IE and other browsers.
Example:
#linearBg2 {
/* fallback */
background-color: #1a82f7;
background: url(images/linear_bg_2.png);
background-repeat: repeat-x;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #2F2727, #1a82f7);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #2F2727, #1a82f7);
/* IE 10 */
background: -ms-linear-gradient(top, #2F2727, #1a82f7);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #2F2727, #1a82f7);
}
Source
Read more here
Note that IE 9 and earlier do not support gradient.
What's happening is that IE ignores your gradient css completely. You have to add a 'filter' in order for the gradient to appear in IE.
This page will help you create a cross-browser gradient.
All browser Support gradient property
use this
background: -moz-linear-gradient(top, white, #1a82f7);/*Mozila*/
background: -o-linear-gradient(top, white, #1a82f7); /*opera*/
background: -webkit-linear-gradient(top, white, #1a82f7);/*Chrome and safari*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='white', EndColorStr='#1a82f7'); /*IE*/
Here is a set of CSS gradients that will be useful for you for cross-browser compatibility:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Opera */
background-image: -o-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #00A3EF 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom right, #FFFFFF 0%, #00A3EF 100%);
My button is Chrome is appearing like this.
This is what I want.
In Firefox, however, it appears like this.
.mainButton_grey {
border: 1px solid BFBFBF;
background: -webkit-linear-gradient(top,#DBDBDB,#D1D1D1);
padding-top:7px;
text-align:center;
cursor:pointer;
width:200px;
height:22px;
border-radius:3 3;
background-color:#0972BD;
font-size:11px;
font-weight:bold;
font-family:Arial;
color:#404040;
}
Jsfiddle here.
Just a word of advice for gradients - if you want as much browser compatibility as possible, add the following (just change the values).
background: -moz-linear-gradient(black, white); /* FF 3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #ffffff)); /* Safari 4+, Chrome 2+ */
background: -webkit-linear-gradient(black, white); /* Safari 5.1+, Chrome 10+ */
background: -o-linear-gradient(black, white); /* Opera 11.10 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6 & IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background: linear-gradient(black, white); /* the standard fallback for old browsers */
Syntax explanation here: http://www.impressivewebs.com/css3-linear-gradient-syntax/
And there's an awesome gradient generator here: http://www.colorzilla.com/gradient-editor/
The reason is because you haven't defined the linear gradient with:
-moz-linear-gradient(top, #DBDBDB, #D1D1D1);
The syntax may be a little different; but each browser has a different way to interpret the gradient.
Here is an example of a gradient with each browser:
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,246,246,1) 0%, rgba(219,220,226,1) 21%, rgba(184,186,198,1) 49%, rgba(221,223,227,1) 80%, rgba(245,246,246,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,246,246,1)), color-stop(21%,rgba(219,220,226,1)), color-stop(49%,rgba(184,186,198,1)), color-stop(80%,rgba(221,223,227,1)), color-stop(100%,rgba(245,246,246,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(245,246,246,1) 0%,rgba(219,220,226,1) 21%,rgba(184,186,198,1) 49%,rgba(221,223,227,1) 80%,rgba(245,246,246,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
Hopefully that helps.
Three things:
Get your gradient CSS from this site: http://www.colorzilla.com/gradient-editor/
Update your border-radius to specify the units: border-radius: 3px 3px;
Add # to your border-color declaration: border: 1px solid #BFBFBF;
What I want to do is that the background color will remain the same no matter how big the screen resolution is for the reader. I created a div where its height is set to auto.
.news-box{
margin-top:5%;
border-radius:6px;
background-color: #EEE;
border: 1px solid #EEE;
margin-left: 24%;
height:auto;
width:620px;
}
This how it looks like
And this my CSS rule for the whole html
I am using this body css rule. for my gradient
CSS RULE FOR THE WHOLE PAGE
html
{
height:100%;
}
THIS COMES BEFORE THE .news-box class
body
{
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 39%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
This how the page looks like without the Div
Any way to fix this?
Demo.....................................
Hey now used to min height 100% in you html and body as like this
html, body{
min-height:100%;
}
Demo