I have the following html and css code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div class="wrapper">
<header>
<section class="top">
<div id="quote"><p>Request a quote</p></div>
<div class="arrow"><img src="icons/top-icon.png" alt=""></div>
</section>
</body>
</html>
a {
font-size: 1.6em;
color: #fff;
text-decoration: none;
}
.top {
height: 3.2em;
width: 100%;
background: rgb(255,214,94); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
position: fixed;
top: 0;
left :0;
z-index: 10;
text-align: center;
border-bottom: 1px solid #f9e555;
-webkit-box-shadow: 0px 0px 8px #555;
-moz-box-shadow: 0px 0px 8px #555;
box-shadow: 0px 0px 8px #555;
}
.top div#quote {
width: 20em;
background: rgb(254,252,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
margin: 0 auto;
}
.top div#quote p {
color: #f2572a;
height: 3.5em;
font-size: 1.5em;
padding: 0;
margin: 0;
}
.top div#quote a {
font-size: 1.1em;
}
.top div#quote p:hover {
color: #ed3419;
}
.arrow {
display: inline-block;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
There are 2 problems here: the first one is that the "Request a quote div" is larger than the 3.2em defined in the css and the second one is that if I delete the text-aling: center in .top styling the image underneath the quote div will not stay centered. I have tried to position relative the .arrow div and position absolute the img icon, but it does not work as the div disappears completely. Any other ideas?
Since the .arrow element has a default width of 100%, setting margin: 0 auto has no effect horizontally. And since img is an inline element, it won't work on that either. You need to either set an explicit width on the .arrow element, or set display: block and margin: 0 auto on the img element.
The "Request a quote" div is larger because its height is relative to its font size. em is based on the current width of the letter M (at least in classic typography). Since you change the font-size in your elements 3.2em in .top isn't the same as 3.2em in .top div#quote p.
Even if you won't change the font-size the values still differ (3.2em in .top, 3.5em in .top div#quote p).
You should get rid of all padding-tops, padding-bottoms, margin-tops and margin-bottoms instead and simply use height:100%.
HTML
<div class="wrapper">
<header>
<section class="top">
<p class="quote">Request a quote</p>
<img class="arrow" src="icons/top-icon.png" alt="Arrow"></div>
</section>
</header>
</div>
CSS
a {
color: #fff;
text-decoration: none;
}
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
height: 3.2em;
background: rgb(255,214,94); /* Old browsers */
background: linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* W3C */
text-align: center;
border-bottom: 1px solid #f9e555;
box-shadow: 0px 0px 8px #555;
}
.top p.quote {
width: 20em;
height:100%;
padding: 0;
margin: 0 auto;
color: #f2572a;
font-size: 1.6em;
line-height:2.1em;
background: rgb(254,252,234); /* Old browsers */
background: linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* W3C */
}
.top p.quote a{
color: #f2572a;
}
.top p.quote a:hover{
color: #ed3419;
}
.arrow {
display: inline-block;
margin: 0 auto;
border: 1px solid #000;
position: relative;
}
/* gradient and other vendor specific quirks */
.top{
/* background rules */
background: -moz-linear-gradient(top, rgba(255,214,94,1) 0%, rgba(254,191,4,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,214,94,1)), color-stop(100%,rgba(254,191,4,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(255,214,94,1) 0%,rgba(254,191,4,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffd65e', endColorstr='#febf04',GradientType=0 ); /* IE6-9 */
/* vendor specific box shadows */
-webkit-box-shadow: 0px 0px 8px #555;
-moz-box-shadow: 0px 0px 8px #555;
}
.top p.quote{
background: -moz-linear-gradient(top, rgba(254,252,234,1) 0%, rgba(241,218,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,252,234,1)), color-stop(100%,rgba(241,218,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(254,252,234,1) 0%,rgba(241,218,54,1) 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=0 ); /* IE6-9 */
}
JSFiddle Demo
Related
Hello I was making some buttons for a client and he needs IE8 support. The issue I'm facing is that when I click on the button (a tag) it works and the button shows as pushed / active but when I click on the child element (span) it doesn't.
Is this an IE8 issue or am I missing something? and is there any way around this without javascript?
Here is a jsfiddle and the source
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
html,
body {
padding: 100px;
margin: 0;
height: 100%;
font-family: arial;
}
div {
min-height: 80px;
}
/* BUTTONS */
.rebrand-btn {
display: table;
table-layout: fixed;
outline: none;
text-decoration: none;
padding: 17px 38px;
border-bottom: 2px solid #497b0d;
-mox-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: #509e2f;
/* Old browsers */
background: -moz-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #97d700), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #97d700 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #97d700 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#97d700', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
/*
-webkit-transition: border 100ms linear 0s;
-moz-transition: border 100ms linear 0s;
-o-transition: border 100ms linear 0s;
transition: border 100ms linear 0s;
*/
/* transitions */
}
.rebrand-btn,
.rebrand-btn > * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.rebrand-btn:hover {
background: -moz-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(1%, #d2d755), color-stop(100%, #509e2f));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #d2d755 1%, #509e2f 100%);
/* IE10+ */
background: linear-gradient(to right, #d2d755 1%, #509e2f 100%);
/* W3C */
filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='#d2d755', endColorstr='#509e2f', GradientType=1)";
/* IE6-9 */
}
.rebrand-btn:active {
border-top: 2px solid transparent !important;
border-bottom: 0px !important;
}
/*
.rebrand-btn[disabled=disabled] {
opacity: 0.5;
pointer-events: none !important;
}
*/
.rebrand-btn > span {
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 16px;
font-weight: bold;
line-height: 16px;
color: #fff;
}
.rebrand-btn.sm {
padding: 12px 19px;
}
.rebrand-btn.sm > span {
font-size: 14px;
}
.rebrand-btn.ico {
padding: 9px 20px;
}
.rebrand-btn.ico > span {
padding-right: 5px;
}
.rebrand-btn.ico > i {
display: table-cell;
width: 32px;
height: 32px;
background: blue;
}
</style>
</head>
<body>
<div>
<a class="rebrand-btn" href="#"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn" href="#" disabled="disabled"><span>This is a test button</span></a>
</div>
<br>
<div>
<a class="rebrand-btn ico" href="#"><span>This is a test button</span><i></i></a>
</div>
<br>
<div>
<a class="rebrand-btn sm" href="#"><span>This is a test button</span></a>
</div>
</body>
</html>
In Internet Explorer, the :active pseudoclass doesn't propagate upward through parent elements. You can see a reduced case here that better illustrates the problem: http://jsfiddle.net/zx7w346u/2/.
This issue has been fixed in Microsoft Edge, Internet Explorer's successor.
I have the following links :
<div class="links">
Home
About Me
Contacts<span></span>
Contact Author
<div class="link">
</div>
</div>
with this css file:
.links {
height: 50px;
display: inline;
text-align: center;
padding: 0px 0px 0px 170px;
margin-right: 0px;
margin-top: 7px;
border: none;
line-height: 25px;
}
.links a {
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f6f6f6 47%,#ededed 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */
color: black;
font-family: Calibri;
font-size: 13px;
text-decoration: none;
padding: 2px 10px;
border: 1px solid #ccc;
}
.links a span {
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 3px solid #555;
display: inline-block;
margin: 2px 7px;
}
I want the links to show in one line ie: [home] [contacts] [link3] etc
but currently its showing on seperate lines like:
[home][contacts]
[link3]
How can I get them on one line?
You've got display: block assigned to your <a> tags. That will put each one on their own line. Remove that, and they'll be on the same line.
I have the current set up:
CSS:
.song {
width: 100%;
border-top-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-color: #CCC;
border-right-color: #CCC;
border-bottom-color: #CCC;
border-left-color: #CCC;
background: #fcfff4; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZjZmZmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYWYxZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #fcfff4 0%, #eaf1f2 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#eaf1f2)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#eaf1f2 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#eaf1f2 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#eaf1f2',GradientType=0 ); /* IE6-8 */
}
.song :hover {
background: #9e9e9e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllOWU5ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkMWQxZDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #9e9e9e 0%, #d1d1d1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9e9e9e), color-stop(100%,#d1d1d1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #9e9e9e 0%,#d1d1d1 100%); /* IE10+ */
background: linear-gradient(to bottom, #9e9e9e 0%,#d1d1d1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9e9e9e', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-8 */
}
.song #title {
font-weight: bold;
padding-top: 3px;
padding-right: 3px;
padding-left: 10px;
}
.song #artist {
padding-right: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
HTML:
<div class="song">
<div id="title">Ghosts N Stuff</div>
<div id="artist">deadmau5</div>
</div>
<div class="song">
<div id="title">Atom (Original Mix)</div>
<div id="artist">Nari & Milani</div>
</div>
<div class="song"></div>
My goal is to have the whole background of the song div change backgrounds rather than the sub divs inside of it.
Any suggestions on the easiest way to achieve this?
Thanks
Working jsFiddle Demo
You wrote :hover selector with an extra space, change it to this:
/* there is no space before/after `:` */
.song:hover {
}
Also you shouldn't have multiple elements with the same id.
ID attributes must be unique on the page. Otherwise, use classes:
<div class="song">
<div class="title">Atom (Original Mix)</div>
<div class="artist">Nari & Milani</div>
</div>
And in your CSS:
.song .title {
font-weight: bold;
padding-top: 3px;
padding-right: 3px;
padding-left: 10px;
}
.song .artist {
padding-right: 3px;
padding-bottom: 3px;
padding-left: 10px;
}
i want to add a background color ON Mouser Over for a CSS3 menu, i've found something on stackoverflow but it's not working for me....i think i got to change something in the .menu a{ } but i don't know what....can someone help me?
Thanks
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
body{margin: 0 auto;}
.menu100percent {
background: #cce2ff; /* Old browsers */
background: -moz-linear-gradient(top, #cce2ff 1%, #75bdd1 26%, #002a6d 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#cce2ff), color-stop(26%,#75bdd1), color-stop(100%,#002a6d)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cce2ff 1%,#75bdd1 26%,#002a6d 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cce2ff 1%,#75bdd1 26%,#002a6d 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cce2ff 1%,#75bdd1 26%,#002a6d 100%); /* IE10+ */
background: linear-gradient(to bottom, #cce2ff 1%,#75bdd1 26%,#002a6d 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cce2ff', endColorstr='#002a6d',GradientType=0 ); /* IE6-9 */
color: white;
font-size: 16px;
height: 30px;
width:100%;
}
.menu{width:1000px; margin: 0 auto; }
.menu a{color:#fff; font-size:12px; line-height:370px; font-family:Arial; text-decoration:none; text-align: left;}
Use the :hover selector:
.menu:hover a {
background-color: gold;
}
Use the css code:
.menu a : hover {
background-color: gold;
}
Fiddle: http://jsfiddle.net/snP3Z/3/
I came across www.css3pie.com yesterday while looking for ways to get box shadow and border radius working in IE8. So far, it has helped out great but am racking my head trying to figure out why it won't work for the last part of the dev...the two tabs at the top. The gradient shows up in the non-active state, but is unchanged when the class 'current' is applied. The href is also changing how it's supposed to. Check out the following code:
<div class="nav1">
<ul>
<li <?php if ($thisPage=="Contact Us") echo "class=\"current\""; ?>>Contact Us</li>
<li <?php if ($thisPage=="Visit Us") echo "class=\"current\""; ?>>Visit Us</li>
</ul>
</div>
and it's being styled like so...
.nav1 ul {
margin:0px;
padding:0px;
list-style:none;
}
.nav1 ul li {
position: relative;
font-size:12px;
float:left;
margin-right:5px;
border: 1px solid #999999;
background-color: #fafafa;
border-radius: 5px 5px 0px 0px;
background: #f7f7f7; /* Old browsers */
background: -moz-linear-gradient(top, #f7f7f7 0%, #ccc9c9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#ccc9c9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* IE10+ */
background: linear-gradient(top, #f7f7f7 0%,#ccc9c9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#ccc9c9',GradientType=0 ); /* IE6-9 */
color:#868686;
text-shadow: 1px 1px #fafafa;
padding: 6px 30px;
behavior: url(inc/PIE.htc);
}
li.current{
position: relative;
border-radius: 5px 5px 0px 0px;
background: #e0e0e0; /* Old browsers */
background: -moz-linear-gradient(top, #e0e0e0 0%, #bab8b8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e0e0e0), color-stop(100%,#bab8b8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* IE10+ */
background: linear-gradient(top, #e0e0e0 0%,#bab8b8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#bab8b8',GradientType=0 ); /* IE6-9 */ text-shadow: 1px 1px #fafafa;
behavior: url(inc/PIE.htc);
}
.nav1 ul li a{
font-size:14px;
float:left;
color:#868686;
text-decoration:none;
}
.nav1 ul li a:hover{
color:#666666;
font-size:14px;
float:left;
color:#000000;
text-decoration:none;
}
.nav1 ul li.current a {
color: #000;
}
Since CSS PIE is going to handle the gradients for IE you can safely remove the filter: declaration. That may help.