Rotação de div

[Samuel Volpato 4]

Fala galera,

 

estou com problema aqui, que já está me irritando :cry:

 

estou codificando um layout, onde a melhor forma de resolver que achei foi rotacionando dois elementos. Com testes simples, consegui fazer em todos navegadores (IE7+, Chrome, FF, Safari,...).

 

Porém quando vou colocar o código no projeto ele buga apenas no IE7, mas isso acontece de uma maneira estranha, quando ele chega na linha que faz a rotação no IE7, ele não executa mais nenhum CSS abaixo dela e não rotaciona a DIV.

 

Segue o código CSS atual:

 

/*ROTAÇÂO*/
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443); /* IE6,IE7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443)"; /* IE8, IE9 */
   -webkit-transform: rotate(40deg);
   -moz-transform: rotate(40deg);
   -o-transform: rotate(40deg);
   -sand-transform: rotate(40deg);
   transform: rotate(40deg);
   /*FIM ROTAÇÂO*/

 

O HTML está validado para o padrão transitional da W3C. Não vou postar todo HTML e CSS (pq já estão grandes), mas as DIVs, que serão giradas, estão logo no início da página. A linha que faz o efeito no IE7 é a primeira do CSS. O projeto ainda não está online para passar um link também.

 

Alguém sabe o que pode ser isso? Já tentei muita coisa pra resolver, mas nada (desde semana passada pensando nisso), se alguém puder me dar uma luz...

 

abraço.

[André do Vale 76]

Testei aqui, e está funcionando sim:

 

   -webkit-transform: rotate(40deg);
   -moz-transform: rotate(40deg);
   -o-transform: rotate(40deg);
   -sand-transform: rotate(40deg);
   transform: rotate(40deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443)";
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443);

[Samuel Volpato 4]

Testei aqui, e está funcionando sim:

 

   -webkit-transform: rotate(40deg);
   -moz-transform: rotate(40deg);
   -o-transform: rotate(40deg);
   -sand-transform: rotate(40deg);
   transform: rotate(40deg);
   -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443)";
   filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443);

 

Olá André,

 

já agradeço a ajuda, mas colocando ele sozinho ele funciona normalmente (é até uma boa solução para outros casos), mas meu problema é quando coloca junto com o código do projeto.

 

A estrutura SIMPLIFICADA do meu HTML é assim:

 

<div id="geral">
   <div id="faixaLogo">
       <a id="logoCabecalho" href="<?=$hostPagina?>" title="Steelmach - Machines Suplly"><span>Steelmach - Machines Suplly</span></a>
   </div>
   <div id="faixaDireita"></div>

   <div id="cabecalho">...cont cabeçalho...</div>

   <div id="conteudo">...cont conteúdo...</div>

   <div id="rodape">...cont rodapé...</div>
</div>

 

onde as DIVs faixaLogo e faixaDireita recebem a rotação. Elas são DIVs 'independentes' do resto do site.

 

Não sei se esse filtro para IE pode estar bugando com algum outro CSS, ou talvez com algum JS já tentei debugar, tirar todo CSS e JS mas não tenho resultado. Talvez alguém que já tenha usado ou passado por problema semelhante com o filter.

[Willian Makoto 6]

css3 = fail no ie7,8; não?

[MafnGamer 13]

Para resolver o problema acima mande o user atulizar o browser. :thumbsup:

[Samuel Volpato 4]

css3 = fail no ie7,8; não?

Que eu saiba não, existe alguma incompatibilidade com algum outro código do IE7, é isso que não consigo descobrir, até porque o código de rotação sozinho funciona...

 

Para resolver o problema acima mande o user atulizar o browser. :thumbsup:

hehehehehehehe até queria poder fazer isso, mas desenvolver para IE7 ainda é preciso :( , pelo menos por aqui ele ainda é utilizado...

[Willian Makoto 6]

véi, na boa...

 

pelo o que eu sei css3 não funciona no ie7,8 (navegadores antigos)

 

se funcionar, é com js ou um plugin q tu instala no ie para o ie ler o código como o chrome.

 

[]'s

[Samuel Volpato 4]

véi, na boa...

 

pelo o que eu sei css3 não funciona no ie7,8 (navegadores antigos)

 

se funcionar, é com js ou um plugin q tu instala no ie para o ie ler o código como o chrome.

 

[]'s

 

mas não estou usando css3 para IE7e8, para estes estou usando um filtro:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.766044443, M12=-0.64278761, M21=0.64278761, M22=0.766044443)"; /* IE8, IE9 */

 

e por garantia estou usando as propriedades proprietárias de cada motor de renderização também...