Solved

CSS not working in IE9

Posted on 2013-05-13
3
292 Views
Last Modified: 2013-05-20
Hi. Does anyone perhaps know why this works in safari and chrome perfectly but doesn't work in IE9??

.test {
	height: 49px;
	border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0px 0px;
	-webkit-border-radius: 5px 5px 0 0;
  background: #14141
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%; 
	background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
	background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
	background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
}

Open in new window

0
Comment
Question by:jonofat
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
3 Comments
 
LVL 9

Assisted Solution

by:user_n
user_n earned 100 total points
ID: 39162223
Because of the difference in web browser engines.
http://en.wikipedia.org/wiki/Web_browser_engine
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 100 total points
ID: 39162228
0
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 300 total points
ID: 39164794
try this...

.test {
	height: 49px;
	border-radius: 5px 5px 0 0;
	background: #14141 background: url(data: image/png;
	base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;

	background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
	background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
	background: linear-gradient(top, #32323a 0%, #141414 100%);
}

Open in new window

0

Featured Post

Enroll in July's Course of the Month

July's Course of the Month is now available! Enroll to learn HTML5 and prepare for certification. It's free for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
Suggested Courses

628 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question