I'm having problems with a gradient in IE, it is not being displayed as I hoped it would.
I have created a grey gradient button which becomes slightly darker as you hover over it. There are no problems with the way it's displayed in firefox or chrome, it seems to only be an internet explorer problem.
html:
<input type="submit" value="Search" class="button1">
css:
.button1{
height:26px; font-family:verdana,arial, helvetica, sans-serif; font-size:12px; font-weight:bold;
cursor:pointer;
padding-left:10px; padding-right:10px; margin:2px;
border:1px solid #000; float:left;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color:#CCC;
background: rgb(254,255,232); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)),
color-stop(100%,rgba(214,219,191,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 ); /* IE6-9 */
}
.button1:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#E6E6E6), to(#fff));/*for webkit*/
background: -moz-linear-gradient(top, #E6E6E6, #fff);/*for firefox*/
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6E6E6', endColorstr='#fff',GradientType=0);/*for IE*/
}
jsFiddle:
http://jsfiddle.net/Wg65Y/
IE support for CSS is a nightmare for developers and perhaps worst in case of gradients.
What you need is CSS3 solutions for Internet Explorer
Related
Fiddle: http://jsfiddle.net/t4uujehb/1/
HTML:
<div style="overflow: hidden;">
<div class="theNum numOnly" style="float: left; cursor: pointer;">
45
</div>
<div class="theNum" style="float: left;">
<span>Provider(s) failed to update</span>
</div>
</div>
FireFox:
Chrome/IE 9/10:
How can I modify my CSS so styling is same in Chrome and IE (Or as close as possible for IE)
You must generate gradient also for other browsers (vendor prefixes) with tool such as ColorZilla. I tried and result is:
.theNum
{
background: #ededed; /* Old browsers */
background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ededed 0%,#dedede 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ededed 0%,#dedede 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ededed 0%,#dedede 100%); /* IE10+ */
background: linear-gradient(to bottom, #ededed 0%,#dedede 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 ); /* IE6-9 */
}
Is there an easier way of doing this. I just want the background color to fill the top width of the div, 70px high and the entire width of the div, in this case 400px. I was able to hack out a solution but it looks ugly. Sorry I'm using inline styles since I cannot easily add new CSS to a 6,500 page website.
<div style="border: 1px solid #bbb; padding:20px; width:400px; height:150px; float:left; margin-right:60px;">
<div style="background:#cccccc; width:440px; height:40px; padding:0; position:relative; margin-left:-20px; margin-top:-20px;"></div>
<div style="background:#cccccc; width:420px; height:30px; padding-left:20px; position:relative; margin-left:-20px; margin-top:-20px;">
<p><b>To learn more:</b></p>
</div>
<p>Contact a sales rep</p>
</div>
JS Fiddle
You can use linear-gradient.
background: #eeeeee; /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #eeeeee 70px, #ffffff 70px, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(70px,#eeeeee), color-stop(70px,#ffffff), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%,#eeeeee 70px,#ffffff 70px,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%,#eeeeee 70px,#ffffff 70px,#ffffff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%,#eeeeee 70px,#ffffff 70px,#ffffff 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%,#eeeeee 70px,#ffffff 70px,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
Codes generated by http://www.colorzilla.com/gradient-editor/
I have made a fiddle for my problem.
This is it
http://jsfiddle.net/8Kx8c/
This is the result of my code:
I need to do two things:
First, center all the content inside the div with the border. I mean this div <div id="agentsLegend">
Second, center the text to be in the center of the circle. the text exist in this code:
<span class="oneLegend">
<div class="breakLegend oneAgentLegent"></div>
Break
</span>
I tried:
text-align:center;
vertical-align:middle;
but the content is not centered.
you need to set vertical-align to .oneAgentLegent as well.
And eventually set a line-height to #agentsLegend.
DEMO
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:30px;/* tune baseline height here */
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
display:inline-block;
vertical-align:middle;/* make this to vertical-align:middle to text aside */
}
To center your inline-boxe: use text-align:center on parent.
DEMO 2
body {
text-align:center;/* parent of your box in fiddle demo */
}
edit , if you want to use display:table instead, add display:table-cell to span , so it easily vertical center content : http://jsfiddle.net/8Kx8c/9/
I've done a few changes to the css. These should help you fix your issue.
Reduced the height and added padding top to #agentsLegend element.
height:28px; padding-top:9px;
Changed vertical-align:middle; to vertical-align:top; in .oneLegend element.
Added line-height: 20px; to .oneLeged element.
FIDDLE
You can accomplish this by using a combination of vertical-align on the children with line-height set on the parent for the vertical aligning, and setting display:table; and margin:0 auto on the parent to center horizontally.
Demo Fiddle
CSS
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
line-height:38px;/* <-- vertical alignment */
padding-left:5px;
padding-right:5px;
display:table; /* <-- horizontal alignment */
margin:0 auto; /* <-- horizontal alignment */
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle;/* <-- vertical alignment */
}
.oneAgentLegent {
border-radius:50%;
width:20px;
height: 20px;
vertical-align:-10%;/* <-- vertical alignment */
display:inline-block;
}
.agent-table-wrap td.breakAgentClass, .breakLegend {
background: #6b4e30;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiNGUzMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5OTg5NzIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6b4e30), color-stop(100%, #998972));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6b4e30 0%, #998972 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6b4e30 0%, #998972 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b4e30', endColorstr='#998972', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.idelAgentClass, .idelLegent {
background: #fcda19;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZGExOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fcda19), color-stop(100%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcda19 0%, #ffffff 100%);
/* IE10+ */
background: linear-gradient(to bottom, #fcda19 0%, #ffffff 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcda19', endColorstr='#ffffff', GradientType=0);
/* IE6-8 */
color: #333;
}
.agent-table-wrap td.pauseAgentClass, .pauseLegend {
background: #1283b7;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzEyODNiNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiYWQxZTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1283b7), color-stop(100%, #bad1e2));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #1283b7 0%, #bad1e2 100%);
/* IE10+ */
background: linear-gradient(to bottom, #1283b7 0%, #bad1e2 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1283b7', endColorstr='#bad1e2', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.talkingAgentClass, .talkingLegend {
background: #4ea51c;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYTUxYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhYWU1NzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4ea51c), color-stop(100%, #aae579));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #4ea51c 0%, #aae579 100%);
/* IE10+ */
background: linear-gradient(to bottom, #4ea51c 0%, #aae579 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4ea51c', endColorstr='#aae579', GradientType=0);
/* IE6-8 */
color: #fff;
}
.agent-table-wrap td.voicemailAgentClass, .voiceMailLegend {
background: #8a38aa;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;
base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0JSIgc3RvcC1jb2xvcj0iIzhhMzhhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkYjk1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(4%, #8a38aa), color-stop(100%, #db95f4));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #8a38aa 4%, #db95f4 100%);
/* IE10+ */
background: linear-gradient(to bottom, #8a38aa 4%, #db95f4 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8a38aa', endColorstr='#db95f4', GradientType=0);
/* IE6-8 */
color: #fff;
}
You can change some properties like :
#agentsLegend {
display: table;
}
.oneLegend {
display:table-cell;
}
http://jsfiddle.net/8Kx8c/1
You need to add only line-height:38px; on #agentsLegend and vertical-align:middle; on class oneLegend
#agentsLegend {
border: 1px solid black;
border-radius:10px;
display:inline-block;
margin-top:5px;
height:38px;
line-height:38px; /*Addded line*/
padding-left:5px;
padding-right:5px;
}
.oneLegend {
display:inline-block;
text-align:center;
vertical-align:middle; /*Addded line*/
}
Here is the Fiddle link.
http://jsfiddle.net/DUgKb/19/
You cannot have a span wrapping a div. It was not working since a span is not a block element.
Add a wrapping div to center everything.
.center {
text-align: center;
}
vertical align the icons
#agentsLegend {
display: inline-block;
padding: 5px;
}
.oneAgentLegent, .oneLegend {
display: inline-block;
vertical-align: middle;
}
I am having an issue with a CSS gradient in IE9. I am about ready to just do it with an image... UGGHHH moving backwards i guess.
I used this site http://www.colorzilla.com/gradient-editor/ to create my gradient and it says that IE6-9 support uses this...
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
But it isnt showing up in IE9
Here is my entire CSS entry
.orangeButton {
width: 170px;
height: 20px;
padding: 3px 20px;
text-align: center;
color: #fff;
border-radius: 3px;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px #ff4e00;
text-decoration: none;
background: #ffa70f; /* Old browsers */
background: -moz-linear-gradient(top, #ffa70f 1%, #ff810f 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffa70f), color-stop(100%,#ff810f)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffa70f 1%,#ff810f 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffa70f 1%,#ff810f 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa70f', endColorstr='#ff810f',GradientType=0 ); /* IE6-9 */
}
Is there another way to do this that is missing from Color Zilla. I have read places that you can use background-image does this work better for IE9 and before?
Support for full multi-stop gradients with IE9 (using SVG).
Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support:
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
I was wondering if there was any way of defining two section id's to a piece of css code.
At the moment the code is exactly the same apart from the id, is there any way to have both id's in one piece of the code rather than duplicating the same code. e.g
slider#nav ul
#slider ul {
list-style-type:none;
height:80px;
width:620px;
background: rgb(206,220,231); /* Old browsers */
background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 1px 1px 3px 1px ;
box-shadow: inset 1px 1px 3px 1px ;
opacity:0.8;
}
#nav ul {
list-style-type:none;
height:80px;
width:620px;
background: rgb(206,220,231); /* Old browsers */
background: -moz-linear-gradient(top, rgba(206,220,231,1) 0%, rgba(89,106,114,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(206,220,231,1)), color-stop(100%,rgba(89,106,114,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: inset 1px 1px 3px 1px ;
box-shadow: inset 1px 1px 3px 1px ;
opacity:0.8;
}
Simply by adding a comma.
#nav ul, #slider ul {
//Code
}
You code will now be applied to both id's