Css não funciona no Internet Explorer <Resolvido>

Front-end
#1

Bom dia Pessoal,

Estou com o seguinte problema, tenho um css para uma pagina, que funciona perfeitamente no Chrome e no Mozilla.
Quando tento rodar o Internet Explorer, a imagem de fundo definida no css não aparece.

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Default Styles 
--------------------------------------------------------------------*/

body {
	/*background: url('img/denim.png');*/
	font-family: 'Droid Sans', sans-serif;;
}

.clearfix {
	clear: both;
}

.wrap {
	width: 1348px;	
	/*margin: 4em auto;	*/
}

nav {
	[b]background : url('img/topo_03.gif');[/b] - Esta imagem não aparece no ie.
	padding: 0 250px;	
	position: relative;
	height: 81px;
}

Pagina

<!DOCTYPE HTML SYSTEM>
<html>

<head>
	<title>Portal de Suporte</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
	<link href="style.css" media="screen" rel="stylesheet" type="text/css">
	<meta http-equiv="X-UA-Compatible" content="IE=8" />
	<!-- <link href="iconic.css" media="screen" rel="stylesheet" type="text/css" > -->
	<script src="prefix-free.js"> </script>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (topo) -->
<table id="Tabela_01" width="1348" height="167" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<img src="img\topo_01.gif" width="809" height="86" alt=""></td>
		<td>
			<img src="img\topo_02.gif" width="539" height="86" alt=""></td>
	</tr>
	<tr>
		<td colspan="2">		    
			<div class="wrap"> <nav> 
				  <ul class="menu">
					<li><a href="#"><span class="iconic home"></span> Home</a></li>				  
					<li><a href="#"><span class=""></span> Teste</a> 
					  <ul>
						<li><a href="#">T1</a></li>
						<li><a href="#">T2</a></li>
						<li><a href="#">T3</a></li>						
						<li><a href="#">T4</a></li>
						<li><a href="#">T5</a></li>
						<li><a href="#">T6</a></li>
						<li><a href="#">T7</a></li>
						<li><a href="#">T8</a></li>
					  </ul>
					</li>    
					<li><a href="#"><span class=""></span> </a> 
					  <ul>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
						<li><a href="#"></a></li>
					  </ul>
					</li>
					<li><a href="#"><span class=""></span> </a>
					  <ul>
				      </ul>		 				
					</li>	
					<li><a href="#"><span class=""></span> TrueComp</a>
					  <ul>
						<li><a href="#">Chamados</a></li>
						<li><a href="#">DataQuality</a></li>						 
						<li><a href="#">Indicadores</a></li>						
				      </ul>		 				
					</li>								
					<li><a href="#"><span class=""></span> Relatorios</a> 
					  <ul>
						<li><a href="#">Relatorio A</a></li>
						<li><a href="#">Relatorio B</a></li>
						<li><a href="#">Relatorio C</a></li>
						<li><a href="#">Relatorio D</a></li>
						<li><a href="#">Relatorio E</a></li>
						<li><a href="#">Relatorio F</a></li>
					  </ul>
					</li>
					<li><a href="#"><span class="iconic mail"></span> Suporte</a> 
					  <ul>
						<li><a href="#">Contatos</a></li>
					  </ul>
					</li>
				  </ul>
				  <div class="clearfix"></div> </nav> 
		 </div> 			 
	   </td>
	</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Alguem poderia me ajuda com este problema ?

grato,

#2

Veja se te ajuda, tem varias soluções pra diversos problemas. Um deles deves deve ser o seu:

#3

Consegui resolver adicionando está informação

	<!--[if IE]>
	 <script type="text/javascript">
		document.createElement("article");
		document.createElement("nav");
		document.createElement("details");
		document.createElement("figcaption");
		document.createElement("hgroup");
		document.createElement("section");
		document.createElement("header");
		document.createElement("aside");
		document.createElement("figure");
		document.createElement("menu");
		document.createElement("legend");
		document.createElement("hover");
		document.createElement("footer");
	</script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif] -->

Porem neste metodo do css

.menu li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;	
}

Funciona nos outros navedores e no ie não. Alguem sabe pq e com resolver ?

#4

Consegui resolver utilizando estes comandos

	<!--[if IE]>
	 <script type="text/javascript">
		document.createElement("article");
		document.createElement("nav");
		document.createElement("details");
		document.createElement("figcaption");
		document.createElement("hgroup");
		document.createElement("section");
		document.createElement("header");
		document.createElement("aside");
		document.createElement("figure");
		document.createElement("menu");
		document.createElement("legend");
		document.createElement("hover");
		document.createElement("footer");
	</script>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif] -->

Porem, este metodo do css ainda não funciona no ie, mais nos demais sim

.menu li a:hover {
	background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff));
	background-image: linear-gradient(#ededed, #fff);
	border-radius: 12px;
	box-shadow: inset 0px 0px 1px 1px rgba(0,0,0,0.1);
	color: #222;	
}

Alguem poderia me ajudar com isso ?

#5

Olá,

Não li todo o código do tópico, mas nesse último estilo tem pelo menos duas linhas que tem problemas de compatibilidade com o IE:

O box-shadow só é compatível com IE a partir do 9, se estiver com versão anterior não vai rolar mesmo.
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp

Instruções que começam com “-webkit” são exclusivas dos browsers baseados no engine Webkit (Chrome é o principal deles), assim como “-moz” indica uma extensão exclusiva para o Mozilla.
Quando você ver um estilo assim no CSS, pode saber que não funciona nos outros browsers, deve-se então procurar uma alternativa. Nesse caso, por exemplo, pesquisei no google ie css gradient e obtive a página:

#6