Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Spyder.RV

[Resolvido] Comportamento estranho em CSS de conteúdo carregado v

Por , em Javascript

Recommended Posts

Spyder.RV    0

Spyder.RV
Postado

Pessoal,

 

Estou com um problema besta com CSS em ajax via jQuery...

 

Meu index tem sua página CSS... e dentro do index eu carrego cada página de conteúdo via $.ajax... e cada página dessas tem seu css próprio para complementar o CSS. Ou seja... a página index.php tem o CSS da estrutura do site... e as páginas de conteúdo têm o CSS do seu conteúdo.

 

Estou usando os estilos separados em arquivos e não dentro do código html...

 

Então, Testei no Firefox e no Chrome e funcionou normalzinho... porém no nosso amigo Internet Explorer simplesmente não aceita rodar dessa forma e só funciona o CSS do index.php...

 

Tem como resolver?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Cara... é problema você trazer uma PÁGINA INTEIRA para dentro de um elemento já existente pq você fica com uma marcação inválida.

No topo do seu documento tem um doctype, tem a tag HEAD e a tag BODY. Agora imagine assim: você vai carregar uma página inteira dentro de um elemento com id 'exemplo':

<body>
.
.
.
<div id="exemplo">
   	<!doctype HTML...>
   	<html>
   	<html>
</div>
</body>

 

Entendeu o problema? Você tem uma tag <html> dentro de outra tag <html>, o que é sintaticamente ilegal.

 

Navegadores modernos como o Firefox e o Chrome tentam "consertar" essas coisas, já o IE não o faz, o que eu considero mais correto, pois se o seu código está errado, deve ser mostrado como errado.

A minha sugestão é: coloque TODO o CSS em um arquivo único. Tome cuidado ao carregar uma página inteira via Ajax, para trazer somente o conteúdo que importa que irá funcionar...

Caso o CSS seja realmente muito pesado, tente inserí-lo sob demanda também. Não é nem necessário Ajax, apenas Javascript puro: crie uma tag <link>, adicione os atributos e adicione-a como filha da tag HEAD (eu nunca fiz isso, mas creio que deve funcionar).

Compartilhar este post

Link para o post
Compartilhar em outros sites

Spyder.RV    0

Spyder.RV
Postado

Cara... é problema você trazer uma PÁGINA INTEIRA para dentro de um elemento já existente pq você fica com uma marcação inválida.

No topo do seu documento tem um doctype, tem a tag HEAD e a tag BODY. Agora imagine assim: você vai carregar uma página inteira dentro de um elemento com id 'exemplo':

<body>
.
.
.
<div id="exemplo">
   	<!doctype HTML...>
   	<html>
   	<html>
</div>
</body>

 

Entendeu o problema? Você tem uma tag <html> dentro de outra tag <html>, o que é sintaticamente ilegal.

 

Navegadores modernos como o Firefox e o Chrome tentam "consertar" essas coisas, já o IE não o faz, o que eu considero mais correto, pois se o seu código está errado, deve ser mostrado como errado.

A minha sugestão é: coloque TODO o CSS em um arquivo único. Tome cuidado ao carregar uma página inteira via Ajax, para trazer somente o conteúdo que importa que irá funcionar...

Caso o CSS seja realmente muito pesado, tente inserí-lo sob demanda também. Não é nem necessário Ajax, apenas Javascript puro: crie uma tag <link>, adicione os atributos e adicione-a como filha da tag HEAD (eu nunca fiz isso, mas creio que deve funcionar).

 

Então... a idéia é dividir o código em contexto, pra facilitar a compreensão dos vários membros da equipe, onde toda a marcação CSS para a estrutura do Site fica num arquivo... os marcadores comuns em outro e as características especíricas para cada página de conteúdo dentro de outro arquivo, com o mesmo nome da página que vai ser carregada...

 

Então removi todas as tags <doctype> <html> <head> <body> etc... deixando só o conteúdo.... e no começo do documento acrescentei um <link href="estilo.css" rel="stylesheet" type="text/css" /> . Testei aqui em alguns browser (IE, FF e Chrome) e funcionou... só não sei se é uma prática correta.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito