IE8 :active selector not working if child is clicked - css

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.

Related

How do i make the (.date) text background color a gradient (fade out)?

I currently have a text-background color behind my "date" spanning the width of a text box. I would like to add in this to it so it fades out on the right. But when I add this in , it just make the text a gradient, and the background disappears.
background-color:-webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#55565a), color-stop(80%, #55565a));
.date {
font-family: sans-serif;
font-size: 14px;
font-weight: 500;
color: white;
margin-top: 9px;
opacity: 0.7;
letter-spacing: 3px;
text-transform: uppercase;
background-color: #adadad;
padding:10px;
margin-left:-41px;
margin-right:-41px;
padding-left:30px;
display : block;
}
UPDATE:
light blue stripe:
hr {
margin-top: 10px;
width: 100%;
color: #B7C3E6;
background-color: white;
height: 25px;
margin: 0px auto;
opacity: 0.2;
border: none;
background: -webkit-gradient(linear, 100% 100%, 0 0, from(white), to(#B7C3E6), color-stop(80%, #B7C3E6));
}

Something like this?
jsFiddle
.date {
font-family: sans-serif;
font-size: 14px;
font-weight: 500;
color: white;
margin-top: 9px;
opacity: 0.7;
letter-spacing: 3px;
text-transform: uppercase;
background-color: #adadad;
padding:10px;
margin-left:-41px;
margin-right:-41px;
padding-left:30px;
display : block;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2FkYWRhZCIgc3RvcC1vcGFjaXR5PSIwLjE4Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgba(173,173,173,1) 0%, rgba(173,173,173,0.18) 82%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(173,173,173,1)), color-stop(82%,rgba(173,173,173,0.18)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(173,173,173,1) 0%,rgba(173,173,173,0.18) 82%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#adadad', endColorstr='#00ffffff',GradientType=1 ); /* IE6-8 */
}
Use CSS Gradient Generator to generate gradients.

Overflow: scroll showing scrollbars only over portion of content

Below you can see an image of an interface I've created.
I need scrollbars only to appear under the search bar, this part of the page has an ID of page. So I set body height to 100% and set its positioning to relative. I then set the page's height to 100% and gave it positioning of absolute. After doing this I do get scrollbars but they only show when the content is well squished.
The scrollbars need to show over the whole of the content and not just when the window is this small. Any help would be much appreciated. Below I have pasted some code that should help.
body {
font-family: Helvetica, Arial, sans-serif;
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #efefef 0%, #e0e0e0 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#e0e0e0)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #efefef 0%,#e0e0e0 100%); /* IE10+ */
background: linear-gradient(to bottom, #efefef 0%,#e0e0e0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-9 */
height: 100%;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: default;
overflow: hidden;
position: relative;
}
#page {
padding: .4em 15px;
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
position: absolute;
}

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

CSS3 Menu how to change background color

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/

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

Resources