[Resolvido] Mais um layout que só não funciona no I.E.9

[adriano.internet 0]

Olá pessoal,

 

estou tentando lidar com CSS

 

Estou instalando uma loja virtual Prestashop 1.4.5.1 + template adquirido direto do Template monster.

 

Como o theme foi feito para Prestashop 1.4.1 eles não oferecem suporte.

 

Link: http://www.vivic.com.br/loja/

 

A barra de categorias azul que fica em cima fica desconfigurada no I.E.9, já testei no FF, Chrome e Opera e funcionou corretamente.

 

Somente no I.E.9 fica desconfigurado, já tentei localizar o erro no arquivo CSS mais não tive sucesso.

 

Agradeço qualquer ajuda.

[adriano.internet 0]

abaixo o código CSS

 

/* ————— tmcategories.tpl ————— */
div#tmcategories {height:44px;clear:both;padding:10px 0 0 0;background:url(../img/tmcategories_bg.png) 0 10px no-repeat;}
div#tmcategories ul {}
div#tmcategories ul li {height:44px;float:left;padding:0 0 0 1px;background:url(../img/tmcategories_sep.png) 0 0 no-repeat;position:relative;z-index:100;}
div#tmcategories ul li:first-child {padding:0;background:none;}

div#tmcategories ul li a {height:30px;display:block;padding:14px 10px 0 10px;font:bold 12px "Arial";color:#fff;text-decoration:none;}
div#tmcategories ul li:first-child a {padding:14px 10px 0 20px;}

div#tmcategories ul li:hover a,
div#tmcategories ul li a:hover,
div#tmcategories ul li a.selected {background:url(../img/tmcategories_bg.png) 50% -44px no-repeat;}

div#tmcategories ul li:first-child:hover a,
div#tmcategories ul li:first-child a:hover,
div#tmcategories ul li:first-child a.selected {background:url(../img/tmcategories_bg.png) 0 -44px no-repeat;}

div#tmcategories ul li ul.subcategories {width:220px;padding:14px 0 17px 0;background:#3d527d;border-top:1px solid #fefefe;position:absolute;left:0;top:44px;display:none;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;}
div#tmcategories ul li:hover ul.subcategories {display:block;}

div#tmcategories ul li:hover ul.subcategories li {height:15px;float:none;padding:3px 0 0 20px;background:none;}
div#tmcategories ul li:hover ul.subcategories li a {display:inline;padding:0;background:none;font:normal 12px "Arial";color:#abbde3;}
div#tmcategories ul li:hover ul.subcategories li a:hover {background:none;color:#67d7fb;}

 

Resolvido.

 

Quem tiver o mesmo problema siga a dica que peguei no site: http://www.toprated.com.br/css-problemas-comuns-com-internet-explorer-6-e-como-resolve-los

"Primeiro, se sua coluna tem margin-left, coloque um display:inline pra ela.

Se o problema não for esse, provavelmente existe algum elemento forçando a largura da coluna. Procure por este elemento e arrume a sua largura. Se você não está encontrando coloque um overflow:hidden na sua coluna."

 

Original:

 

div#tmcategories ul li a {height:30px;display:block;padding:14px 10px 0 10px;font:bold 12px "Arial";color:#fff;text-decoration:none;}

div#tmcategories ul li:first-child a {padding:14px 10px 0 20px;}

 

Alterado:

div#tmcategories ul li a {height:30px;display:inline;padding:14px 10px 0 10px;font:bold 12px "Arial";color:#fff;text-decoration:none;}

div#tmcategories ul li:first-child a {padding:14px 10px 0 20px;}