CSS3 Menu how to change background color

CSS3 Menu how to change background color - css

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/

Related

Datatables pagination buttons - Remove unwanted space

Currently my pagination looks as such:
I'm trying to work out how to remove the space between the buttons, but have been unsuccessful. In the css files the only references I can find to pagination are:
jquery.dataTables.css (319 - 394):
}
.dataTables_wrapper .dataTables_paginate {
float: right;
text-align: right;
padding-top: 0.25em;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333333 !important;
border: 1px solid transparent;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
color: #333333 !important;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
/* IE10+ */
background: -o-linear-gradient(top, white 0%, gainsboro 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, white 0%, gainsboro 100%);
/* W3C */
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
cursor: default;
color: #666 !important;
border: 1px solid transparent;
background: transparent;
box-shadow: none;
}
/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: white !important;
border: 1px solid white;
background-color: white;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
/* IE10+ */
background: -o-linear-gradient(top, #585858 0%, #111111 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #585858 0%, #111111 100%);
/* W3C */
} */
.dataTables_wrapper .dataTables_paginate .paginate_button:active {
outline: none;
background-color: #2b2b2b;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Chrome10+,Safari5.1+ */
background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* FF3.6+ */
background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* IE10+ */
background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
/* Opera 11.10+ */
background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
/* W3C */
box-shadow: inset 0 0 3px #111;
}
dataTables.bootstrap.css (32 - 50):
div.dataTables_paginate {
margin: 0;
white-space: nowrap;
text-align: right;
}
div.dataTables_paginate ul.pagination {
margin: 2px 0;
white-space: nowrap;
}
#media screen and (max-width: 767px) {
div.dataTables_length,
div.dataTables_filter,
div.dataTables_info,
div.dataTables_paginate {
text-align: center;
}
}
However, I can't seem to find a reference to any large margins or padding. Although CSS isn't exactly my strong suit.
Does anyone know if there are other references to the paginate buttons that might be related? Or have to fix the problem outright?

This issue has already been noted in their bug database.
You do not need to hack the css.
bootstrap pagination looks bad #39
No need to include DataTables' own stylesheet (jquery.dataTables.css) since Bootstrap and the integration file provide everything that is needed.
So just delete jquery.dataTables.css, and keep dataTables.bootstrap.min.css in your html style sheets.

Oh yes. Easy to reproduce the error. To solve it, add this CSS after other CSS references :
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding : 0px;
margin-left: 0px;
display: inline;
border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
border: 0px;
}
demo -> http://jsfiddle.net/s6c35ogt/
Try to comment out the added CSS in the top right corner, and you will see the exact same behaviour as you describe.

.paginate_button { padding: 0!important; margin-left: 0!important; }
For not a single space

As Bae pointed out, including 'jquery.dataTables.css' does cause this bug.
But, if you are using the DataTables' 'select' functionality, the visual aspects will be lost by removing this .css file.
So, it really is a decision you make of removing the .css file if you do not use 'select', if you do, you'll have to pinch the css styling for selected items.
Or, keep the .css and overwrite the css so that the pagination is not messy.
This CSS will remove all of the messy spacing around pagination.
.dataTables_paginate ul li {
padding: 0px !important;
margin: 0px !important;
border: 0px !important;
}

Make border-right full height of div

I had a problem concerning border-right in my menu. This is what it looks like:link I would like to have the border take up the whole blue bar, not extending below
it, but touching the edge at the top. how could I do this? my code is this:
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color- stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:inline-block;
padding:8px 25px 10px 10px;
margin:10px 10px 10px 10px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
min-height:58px;
max-height:58px;
}
#container #header #metaNavi li:last{
border-right: none
My Html is:
<div id="metaNavi">
<ul>
<li id="active">Home</li>
<li>Wir über Uns</li>
<li>Dienstleistungen</li>
<li>Kontakt</li>
</ul>
demo here: http://jsfiddle.net/#&togetherjs=GA5vE7nrgv

you must edit this line #container #header #metaNavi li
add -> line-height: 55px;
remove -> padding: 8px 25px 10px 10px;
add -> padding: 0 25px 0 10px;

Try this CSS:
I removed the margin, adding padding to space along the x-axis and changed min/max-height to just height. Then targeted the active within the list-item so that it is a block level element at 100% width and 58 pixels height. The line-height on the list item, centers it vertically.
#metaNavi:before,
#metaNavi:after {
content: "";
display: table;
}
#metaNavi:after {
clear: both;
}
#metaNavi {
zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
#container #header #metaNavi{
height:58px;
background: #bbd4eb; /* Old browsers */
background: -moz-linear-gradient(top, #bbd4eb 0%, #76a8d6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbd4eb), color-stop(100%,#76a8d6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #bbd4eb 0%,#76a8d6 100%); /* IE10+ */
background: linear-gradient(to bottom, #bbd4eb 0%,#76a8d6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbd4eb', endColorstr='#76a8d6',GradientType=0 ); /* IE6-9 */
position:relative;
top:455px;
font-size:20px
}
#container #header #metaNavi ul{
padding:0;
margin:0;
list-style:none;
}
#container #header #metaNavi li{
display:block;
float: left;
padding:0 20px;
color:#bf7a30;
font-family:Verdana;
font-variant:small-caps;
border-right: 1px solid #717171;
height:58px;
line-height: 58px;
}
#metaNavi ul li a{
display: block;
width: 100%;
height: 58px;
}
#container #header #metaNavi li:last{
border-right: none
}
#container #header #metaNavi li a{
color:#bf7a30;
text-decoration: none;
}
#container #header #metaNavi #active{
color:#333333;
font-weight:800;
}

make parent div background change and not child

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;
}

Image contained in div not centering with margin: auto

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

CSS3 PIE, IE8, and border-radius

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.

Develop Reference

r css asp.net wordpress firebase qt symfony nginx http apache-flex

CSS3 Menu how to change background color - css

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/

Related

Datatables pagination buttons - Remove unwanted space

Make border-right full height of div

make parent div background change and not child

Image contained in div not centering with margin: auto

CSS3 PIE, IE8, and border-radius

Categories

Resources