Problemas com Templates Django em navegadores diferentes

[dan]

Situação : fiz o template estatico (sem usar django), usando
(jquery,e css em uma folha separada), para posteriormente criar o
projeto no django. Tendo o seguinte corpo:

base.html ( corpo do site, chamadas a javascript e css + {% block
lojas %}{% endblock %} )
index.html (que extende base e possui o conteudo da loja )

Quando chamo "index.html":

No firefox e no Google Crome:o template todo da uma decida, de
aproximadamente 20 pixels (o que me permite continuar trabalhando).

No internet 8: ele quebra meu template todo. (o que não me
permite continuar trabalhando)

obs: quando chamo "base.html"

Ele funciona corretamente em todos navegadores.

Pergunta:
Alguem tem uma solução para este problema ? Alguem passou por
alguma situação parecida?
pode ser um erro bobo, ja que sou iniciante em django.

[Renne Rocha]

  Isso está com cara de problema de CSS no IE e não com os templates do Django.

  Salve o HTML retornado em um arquivo estático e abra no IE e nos outros navegadores. O problema deve ocorrer. Aí você pode tentar descobrir qual propriedade de CSS está com problema ou não... é um chute, mas na miha opinião o problema está nessa linha.

  Renne Rocha
  renne...@gmail.com
  http://rennerocha.webfactional.com/
  +55 19 8154-9345

2010/6/23 dan <dani...@gmail.com>

--
Django Brasil em Google Groups <http://groups.google.com.br/group/django-brasil>
Associe-se à Python Brasil e suporte nossa comunidade! <http://associacao.python.org.br/>

[Julio Nobrega]

Não deve ter a ver com o Django, e sim como o HTML para ser
interpretado pelos navegadores. O IE8 deve precisar de algum
html/javascript/css que está no base.html.

2010/6/23 dan <dani...@gmail.com>:

> --
> Django Brasil em Google Groups <http://groups.google.com.br/group/django-brasil>
> Associe-se à Python Brasil e suporte nossa comunidade! <http://associacao.python.org.br/>

--
Julio Nobrega - http://www.inerciasensorial.com.br
Telefone: 9179-9635

[danilo silva dos santo]

Pessoal acredito que o problema não é por ai.

Pois o index.html extend base.html ( que possui todas as chamada css e que funciona corretamente)

pela logica index deveria funcionar corretamente?

[Julio Nobrega]

Quando a arquivo index.html estende o base.html, é como se o
index.html "injetasse" nos blocks com nomes o conteúdo especificado.
Então se você tirar o "extends base.html" do arquivo index.html (foi
isso que você fez mesmo?), é como se tudo que está no base.html
deixasse de ser mostrado pro navegador.

Dê uma olhada no fonte da página, pelo navegador, e veja se essa
diferença existe.

Caso você não esteja tirando o extends, explique por favor como está
a sua view... pois no Django você não digita um endereço e esse
arquivo é carregado. Você digita um endereço, que passa pelo urls.py
que chama uma view que pode retornar um arquivo de template (o
index.html).

2010/6/23 danilo silva dos santo <dani...@gmail.com>:

[Vinicius Mendes]

O Django só faz alguma distinção entre browsers se você fizer alguma coisa com o header User-Agent da request ou algo parecido. Como eu acredito que você não esteja fazendo. O conteúdo HTML injetado pelo index.html está causando algum problema no seu CSS. Pode ser uma div maior que a div que a contém, ou alog do tipo, mas esse problema está ocorrendo a nível de HTML/CSS/Javascript.

Atenciosamente,
Vinicius Mendes
Solucione Sistemas
vini...@solucione.info

2010/6/23 Julio Nobrega <ine...@gmail.com>

[danilo silva dos santo]

Pessoal o erro não deve esta na css pois quando eu chamo o base ele funciona perfeitamente. Apenas quando eu pego uma pequena parte do base (chamada de loja) e coloco ela no index e faço index extender base acontece esse erro. Ele funciona no firefox e no crome, mas não funciona no ie8. No primeiro post detalhei mais o problema.

Julio estou ciente disso segue a minha view 

{

from django.shortcuts import render_to_response

from django.template  import RequestContext, Context, loader

from django.shortcuts  import get_object_or_404

def index(request):

    return render_to_response('index.html',locals(),context_instance=RequestContext(request))

[marcos thomaz]

Danilo, experimente fazer o seguinte, extender normalmente o base no index, mas deixar o block sem conteúdo algum. Verifique se o problema persiste, sem que seja alterado o conteúdo. Se o erro não ocorrer, o problema é com o CSS, mas ocorre apenas com determinado tipo de alteração do conteúdo. Outro teste a ser feito, seria colocar o mesmo conteúdo que está sendo colocado no index, no template base e testar para ver  se desconfigura.
 

[]'s

Marcos Thomaz

---

De: danilo silva dos santo <dani...@gmail.com>
Para: django...@googlegroups.com
Enviadas: Quinta-feira, 24 de Junho de 2010 1:13:42
Assunto: Re: Problemas com Templates Django em navegadores diferentes

[Rael Max]

Com a página renderizada, valide o código com o validador da W3C[1], talvez você tenha esquecido alguma tag aberta o que muda totalmente o visual dependendo do navegador.

[1]http://validator.w3.org/

Rael Max
<rael...@ymail.com>
<rael...@msn.com>

[Vinicius Mendes]

Melhor que trabalhar com suposições é trabalhar com fatos. Coloque os templates base.html e index.html em todas as formas que você testou e seus respectivos resultados em um pastebin ( http://pastebin.com/ ) e nos envie os links.

Atenciosamente,
Vinicius Mendes
Solucione Sistemas
vini...@solucione.info

2010/6/24 Rael Max <ozkon...@gmail.com>

[danilo silva dos santo]

Pessoal fiz o teste que marcos sugeriu. O erro continua, estou disponibilizando o codigo.

Os arquivos de media estou enviando em anexo. No arquivo view.py  voces podem mudar o link testando entre base.html e index.html. Percebam que quando o base é testado tudo ocorre corretamente. Mas quando testar index.html, no ie8 ele fica quebrado, no firefox e no crome ele desce um pouco.

view.py :

http://pastebin.com/WkWEGpq2

url.py:

http://pastebin.com/wvE9GZiR

settings.py:

http://pastebin.com/G4NRVtdy

base.html:

http://pastebin.com/5diiVc3N

index.html:

http://pastebin.com/sEE1yr4S

Obrigado pela ajuda

[Iuri]

Não testei nada, mas fiquei com uma dúvida.

O que você quer dizer quando fala que "quando o base é testado tudo ocorre corretamente"? Nenhuma view testa o base.html.

Mas isso é claramente erro de HTML e/ou CSS. Não de Django. Talvez alguma coisa não esteja carregada direito

Uma explicação talvez seja que ele não está encontrando os arquivos de midia. Repare que seu css por exemplo é carregado de "media/css/...", mas deve ser carregado de "/media/css/...". Do jeito que tá, se você estiver em uma "pasta" da url, ele vai carregar de "/pasta/media/css/...".

[]s

iuri

2010/6/24 danilo silva dos santo <dani...@gmail.com>

[danilo silva dos santo]

Iuri ...

Primeiro: Não dever dizer que o problema não tem a ver com django, em vista que quando carrego ele sem usar django ele funciona corretamente.

Segundo: O problema pode sim ter estar relacionado com html e css.( Pelo menos é o que tudo indica).

Terceiro: Obrigado pela dica de como chamar media, corrigi isso, mas isso ainda não resolve o problema.

Quarto: 

  Iure : - "O que você quer dizer quando fala que "quando o base é testado tudo ocorre corretamente"? Nenhuma view testa o base.html "
  

 Danilo:- Eu quero dizer que é só você colocar no view.py :

def index(request):

    return render_to_response('base.html',locals(),context_instance=RequestContext(request))

assim estara chamando base.html e não index.html. ( Assim tudo funciona corretamente )

Mas se substituir o que esta em negrito "base.html"  por "index.html" ( Acontece nosso erro).

obrigado pela ajuda.

[Iuri]

Danilo, para testar e comprovar que não é erro do Django fiz o seguinte.

1) Baixei o seu código HTML e a pasta media

2) Eliminei as tags do Django do HTML, que no caso são só duas tags de {% block %} {% endblock %}

3) Rodei o arquivo base.html, sem utilizar o Django, só o arquivo html puro mesmo.

No Chrome, renderiza bunitinho. No IE6, uma parte embaixo fica desalinhada.

Ou seja, o Django não é o culpado. É problema de CSS, muito comum nos Internet Explorer's. No IE8 talvez dê um erro diferente, mas é problema de IE do mesmo jeito.

Repito: corrija o seu HTML e CSS, não o seu template.

[Vinicius Mendes]

Danilo,

Agora faça outro favor: compare o código HTML (Exibir código fonte) no IE e nos outros browsers. Se eles forem iguais não tem como o problema ser o Django. A função do Django nesse caso é gerar o HTML e se ele é igual, o problema está na renderização do browser que é definida por HTML, CSS e Javascript.

Atenciosamente,
Vinicius Mendes
Solucione Sistemas
vini...@solucione.info

2010/6/24 Iuri <iuris...@gmail.com>

[danilo silva dos santo]

Iuri...
obs: não testei ie6, e sim ie8.

E como tenho ja dito,

eu tbm eleminei as tags do base.html:
{% block index %}{% endblock %}

e ele funcionou corretamente no ie8 (nada ficou torto).

O problema so aparace quando uso django. (ou seja quando chamo
index.html, o qual extends base.html). Voces poderiam fazer esse
teste?

obs: agente não deve nesse assunto aqui abordar ie6 (pois esse
template não esta preparado para ele, nem tenho isso como objetivo).

Em 24/06/10, Vinicius Mendes<vbme...@gmail.com> escreveu:

>>> *Iuri* ...
>>>
>>> *Primeiro:* Não dever dizer que o problema não tem a ver com django, em

>>> vista que quando carrego ele sem usar django ele funciona corretamente.
>>>

>>> *Segundo: *O problema pode sim ter estar relacionado com html e css.(

>>> Pelo menos é o que tudo indica).
>>>

>>> *Terceiro: *Obrigado pela dica de como chamar media, corrigi isso, mas

>>> isso ainda não resolve o problema.
>>>

>>> *Quarto: *
>>> * * Iure* : - "O que você quer dizer quando fala que "quando o base é

>>> testado tudo ocorre corretamente"? Nenhuma view testa o base.html "

>>> *

>>> Danilo:- Eu quero dizer que é só você colocar no view.py :
>>>
>>> def index(request):

>>> return render_to_response('*base.html*

>>> ',locals(),context_instance=RequestContext(request))
>>>
>>> assim estara chamando base.html e não index.html. ( Assim tudo funciona
>>> corretamente )

>>> Mas se substituir o que esta em negrito "*base.html*" por "*index.html"
>>> *( Acontece nosso erro).

>>>>> *view.py :*
>>>>>
>>>>> http://pastebin.com/WkWEGpq2
>>>>>
>>>>> *url.py:*
>>>>>
>>>>> http://pastebin.com/wvE9GZiR
>>>>>
>>>>> *settings.py:*
>>>>> *
>>>>> *
>>>>> http://pastebin.com/G4NRVtdy
>>>>>
>>>>> *base.html:*
>>>>>
>>>>> http://pastebin.com/5diiVc3N
>>>>>
>>>>> *index.html:*
>>>>>
>>>>> http://pastebin.com/sEE1yr4S
>>>>>
>>>>> *Obrigado pela ajuda*

>>>>>>>> ------------------------------
>>>>>>>> *De:* danilo silva dos santo <dani...@gmail.com>
>>>>>>>> *Para:* django...@googlegroups.com
>>>>>>>> *Enviadas:* Quinta-feira, 24 de Junho de 2010 1:13:42
>>>>>>>> *Assunto:* Re: Problemas com Templates Django em navegadores
>>>>>>>> diferentes
>>>>>>>>
>>>>>>>> *Pessoal o erro não deve esta na css pois quando eu chamo o base ele

>>>>>>>> funciona perfeitamente. Apenas quando eu pego uma pequena parte do
>>>>>>>> base
>>>>>>>> (chamada de loja) e coloco ela no index e faço index extender base
>>>>>>>> acontece
>>>>>>>> esse erro. Ele funciona no firefox e no crome, mas não funciona no
>>>>>>>> ie8. No

>>>>>>>> primeiro post detalhei mais o problema.*
>>>>>>>> *
>>>>>>>> *
>>>>>>>> *Julio estou ciente disso segue a minha view *

[Everson Celso Tratch]

Já passei pelo mesmo problema, e não consegui achar uma solução, então acabei não usando o {% extends %}

:(

[Ezequiel Bertti]

danilo...

ja conferiu o top do html se tem algo do tipo em ambos:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

--
Ezequiel Bertti
E-Mail: ebe...@gmail.com
MSN: ebe...@hotmail.com
Cel: (21) 9188-4860

VÁ PARA BÚZIOS!!!
http://www.agh.com.br/
Ane Guest House

[João Gulineli]

Já aconteceu algo semelhante comigo. Ele da problema nos mesmos navegadores que o seu tem dado problema.

O que notei é que no html gerado ele coloca um ? na primeira linha e ele renderiza errado. Validei minha pagina no validador de html e ele me acusou este erro. Tbm não encontrei solução.


João Henrique Gulineli Fachini;
Engª Mecânica;
Ilha Solteira - SP;
Cel: (17) 8123 6112
tel LABSIN: (18) 3743 1000 ramal 1343

--

[Iuri]

Danilo, faça o seguinte. cole no pastebin o HTML de quando você abre o site pelo base.html e de quando você abre pelo index.html. Faça isso no IE8 e em algum outro browser: Chrome ou Firefox.

A gente rodar não vai resolver nada, ainda mais que nem tenho IE8.

Por curiosidade... eu tinha um site que NEM ABRIA nos IE's, porque tinha um erro simples de sintaxe no HTML. Os outros browsers resolvem o problema, o IE é incapaz de resolver, o que resulta em erros variados.

[]s

iuri

2010/6/24 Ezequiel Bertti <ebe...@gmail.com>

--

[danilo silva dos santo]

Ezequiel, no base.html tem sim...

Estou colocando em anexo os resultados em html, no firefox, no ie8, no crome.

ainda estou analisando os resultados, mas ja vi por auto que tem diferenças. 

No crome tem um caracter estranho que aparece no index.html que ele não permite copiar, então coloquei uma foto dele.

obrigado pela ajuda pessoal

[Iuri]

O charset do site está setado como UTF-8. A codificação dos seus arquivos HTML é em UTF-8 também?

Digo isso porque recebi vários erros de codificação pra abrir seus arquivos no Linux. Particularmente, os arquivos do IE8 foram bem chatos de abrir.

[]s

iuri

2010/6/24 danilo silva dos santo <dani...@gmail.com>

Ezequiel, no base.html tem sim...

[danilo silva dos santo]

todos UTF-8.

(salvar como ->.HTML type: todos os tipos, ecoding:UTF-8)

[Ricardo Guinody]

Eu abri ambos arquivos: base e index

Primeiro: os dois não estão iguais.

Segundo: o index foi gerado com coisas fora do lugar.

Esse trecho abaixo está dentro de Body

<META name=keywords content="">

<META name=description content="">

<META content=pt-br http-equiv=Content-Language>

<LINK rel=stylesheet type=text/css href="/media/css/templatemo_style.css">

<LINK rel=stylesheet type=text/css href="/media/css/jquery.ennui.contentslider.css" media=screen,projection>

<SCRIPT language=javascript type=text/javascript>

function clearText(field)

{

     if (field.defaultValue == field.value) field.value = '';

     else if (field.value == '') field.value = field.defaultValue;

}

</SCRIPT>

E o principal que quando alterei resolveu o problema do espaço é que logo após a tag Body na index, existe um caracter estranho ali seguido de um espaço. Ao removê-lo acabaou o problema.

O caracter é só ficou visível para mim ao abrir o index no Dreamweaver.

[danilo silva dos santo]

Ricardo...

Nos sabemos que estão diferentes...

Nosso problema é saber porque o django esta gerando arquivos  diferentes. 

Veja os arquivos:

 base.html:

 http://pastebin.com/niGEFYQR

index.html:

http://pastebin.com/79QXGtYg

[Ricardo Guinody]

Você já experimentou não extender a index de base, ou seja, remove o {% extends lá do template index, só para ver o que está sendo entregue na Index? O esperado é uma página em branco.

Digo isso, pois ao meu ver a Index não está herdando nada de base, é como se você tivesse duas index aí. Uma que você mexe e nada acontece e outra que está sendo renderizada e está perdida em algum canto.

[danilo silva dos santo]

Ricardo...

o index esta herdando da base.html, a prova disso é que todo conteudo de base esta sendo exibido quando chamo index.html.

(obs: tirei o extends e o resultado foi uma pagina em branco)

[Ricardo Guinody]

Oi, Danilo
Esse caracter aí que aparece se não me engano, recordando aqui os
velhos tempos, acho que é o seguinte:

o Enconding do arquivo de template tem que está UTF-8 no-BOM, não
estou falando do charset=utf-8" no HTML, estou falando do arquivo de
template mesmo.

No editor que você estiver usando, verifique essa configuração. Se a
opção BOM estiver habilitada, desabilite-a, salve o arquivo e tente
novamente.

Em 25 de junho de 2010 17:48, danilo silva dos santo

[danilo silva dos santo]

Ricardo,...

estou usando o bloco de notas, no windows 7.

salvo com Enconding="UTF-8"

Não sei o que é BOM a que se refere.

[Fernando Macedo]

Danilo, tente um editor com mais recursos, por exemplo: Notepad++ [1]. Ou uma IDE [2], mas ai é papo para outra discussão.

BOM refere-se a Byte Order Mark [3]. 

Se o seu arquivo já está em UTF-8 e usando BOM, no n++ é só pedir para formatar o arquivo sem esta opção [4].

[1] http://sourceforge.net/projects/notepad-plus/files/ 

[2] http://www.python.org.br/wiki/IdesPython

[3] http://en.wikipedia.org/wiki/Byte_order_mark

[4] http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=UTF-8_Encoded_File_Not_Displayed_Correctly

Abs!

Fernando

"Somos o que repetidamente fazemos; a excelência, portanto, não é um feito, mas sim um hábito!" - Aristóteles

2010/6/25 danilo silva dos santo <dani...@gmail.com>

[danilo silva dos santo]

Pessoal...

Problema resolvido, muito obrigado a todos, e espero que seja util a quem teve problemas parecidos.

Conclusão: salvar arquivos em UTF-8 (sem BOM)