Background color won't change

David Schure
David Schure used Ask the Experts™
on
The background color on the series of services (Amazon, You Tube, etc, does not change.

http://mediascrubber.com/

#hap-wrapper{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width: 100%;
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;
	background: -webkit-linear-gradient(left, #231c17, #856657;
	background: -moz-linear-gradient(left, #231c17, #856657);
	/*background: -webkit-linear-gradient(left, #333c0f, #8e7944);
	background: -moz-linear-gradient(left, #333c0f, #8e7944);*/
	border-radius: 6px;
	padding: 30px;
	/*background-color: #600;*/
	background-position: left;
}
#hap-wrapper>div:not(:first-child):hover{
	transition: background-color .3s ease;
	background-color: #FFFF00;
	/*background-color: #8e7944;*/
	filter: alpha(opacity=50);
	-webkit-opacity: .5;
	opacity: .5;
}

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Consultant & Challenge Subduer
Top Expert 2009
Commented:
You've got a parse error. The ")" is missing from the first -webkit-linear-gradient declaration.

Also you really should add non-prefixed gradients.

#hap-wrapper{
	margin-left: auto;
	margin-right: auto;
	position: relative;
	max-width: 100%;
	-moz-box-shadow: 1px 1px 3px #333;
	-webkit-box-shadow: 1px 1px 3px #333;
	box-shadow: 1px 1px 3px #333;
	background: -webkit-linear-gradient(left, #231c17, #856657);
	background: -moz-linear-gradient(left, #231c17, #856657);
	background: linear-gradient(to right, #231c17, #856657);
	/*background: -webkit-linear-gradient(left, #333c0f, #8e7944);
	background: -moz-linear-gradient(left, #333c0f, #8e7944);
	background: linear-gradient(to right, #333c0f, #8e7944);*/
	border-radius: 6px;
	padding: 30px;
	/*background-color: #600;*/
	background-position: left;
}

Open in new window

Author

Commented:
Thank you!!! Thank you! Thank you!!!!  What exactly is non-prefixed gradients.  And how do you add them.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
You're welcome.

It's the official syntax. (I included them in the revised code I posted.) You were only using the Webkit and Mozilla variants (which in this case are the same except using a different prefix) from when this CSS feature was experimental. It doesn't hurt to still include them for backwards compatibility, but some developers consider them unnecessary.

As to how to add them, that would depend on how you add the prefixed gradients. I've actually been working on a tool that might help with that, but I haven't released it publicly yet.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial