Ir para conteúdo

Arquivado

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

Heloise

problemas com as diferenças entre Opera, Firefox e Internet Explorer

Por , em Desenvolvimento frontend

Recommended Posts

Heloise    0

Heloise
Postado

Olá a todos do fórum.

O meu css está tendo problemas em transitar por navegadores.

 

O primeiro problema é a div que contém todas as outras.

a altura dela está estabelecida como 100% (height:100%), mas só o Firefox e o Safari são capazes de ler. O Internet explorer e o Opera ignoram a altura pré-estabelecida. O meu ie é 6.0

Eu li na internet que o seguinte código ajudaria:

min-height:100%;

height:auto;

mas de novo, só o Safari foi capaz de ler. (dessa vez, até o Firefox ignorou)

 

 

O segundo problema é com uma div que está dentro de um menu sidebar, que está na página por include (php)

No css, o style da div tem:

text-align: right

 

E dessa vez só o Internet explorer leu.

(todos eles são na id da div, não sei se isso muda alguma coisa, se eu deveria passar para class)

 

 

Não são problemas muito graves, até pq a div conteúdo acompanha a altura das outras, e o texto é um texto de duas linhas, mas ainda assim, para manter o site padronizado e a organização do css, seria interessante se alguém me desse algumas dicas.

Preciso de ajuda, se alguém puder, ficarei muito grata. Obrigada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bem vinda ao forum ^_^

 

O IE6 entende "height", como "min-height", então você pode declarar dessa forma:

height: tantos pixels;

 

Só use ID, se for um elemento unico na página.

Poste um link para o site, pois vendo o código e vizualizando os problemas, fica mais fácil lhe ajudar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

Bem vinda ao forum ^_^

 

O IE6 entende "height", como "min-height", então você pode declarar dessa forma:

height: tantos pixels;

 

Só use ID, se for um elemento unico na página.

Poste um link para o site, pois vendo o código e vizualizando os problemas, fica mais fácil lhe ajudar.

Obrigada pelas boas vindas ^^

 

o site:

url

 

eu quero que a div de id conteudo tenha 100% de altura (acompanhe o 'bottom' da página)

 

e que o texto: "Clique aqui para ler mais..." esteja alinhado à direita em todos os browsers

 

Obrigada desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom, acredito que primeiramente, você tenha que arrumar esse probleminha com teus includes:

<head>
<link rel="STYLESHEET" type="text/css" href="index2.css">
</head>
<body>
[...]
</body>
[...]
<head>
<link rel="STYLESHEET" type="text/css" href="index2.css">
</head>
<body>
[...]

</body>
As tags: body, head e o referenciamento do CSS, devem aparecer uma UNICA vez na página.

Os includes do menu, conteudo e "novidades", podem ser feitos sem essas tags.

Não existe, "float:center"..

Não se esqueça de declara com qual unidade você está trabalhando... você declarou apenas: width: 372, e o certo seria width:372px;

Não se esqueça que ao fechar uma declaração CSS, você DEVE colocar um ; (ponto e virgula), no final.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bom, acredito que primeiramente, você tenha que arrumar esse probleminha com teus includes:

 

As tags: body, head e o referenciamento do CSS, devem aparecer uma UNICA vez na página.

Os includes do menu, conteudo e "novidades", podem ser feitos sem essas tags.

Não existe, "float:center"..

Não se esqueça de declara com qual unidade você está trabalhando... você declarou apenas: width: 372, e o certo seria width:372px;

Não se esqueça que ao fechar uma declaração CSS, você DEVE colocar um ; (ponto e virgula), no final.

Exatamente Tiu uill é isso mesmo um dos problemas (provavelemente o principal).

 

Heloise vá no sub-forum: Laboratório de Scripts (WS)

 

que lá tem material bom para lhe ensinar a fazer layouts de maneira mais apropriada ;)

boa leitura

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

</body>[/code]

As tags: body, head e o referenciamento do CSS, devem aparecer uma UNICA vez na página.

Os includes do menu, conteudo e "novidades", podem ser feitos sem essas tags.

Não existe, "float:center"..

Não se esqueça de declara com qual unidade você está trabalhando... você declarou apenas: width: 372, e o certo seria width:372px;

Não se esqueça que ao fechar uma declaração CSS, você DEVE colocar um ; (ponto e virgula), no final.

muito obrigada, tentarei fazer as correções necessárias. Não sabia que os includes não precisavam ter as tags body e head

 

mas todos os navegadores Lêem 372 como 372px, não seria excesso eu colocar a unidade?

e o ; também não seria excessivo? Já que, de novo, os navegadores entendem que } já está fechando a declaração?

Ah, outra coisa. E o problema da altura da div?

 

Heloise vá no sub-forum: Laboratório de Scripts (WS)

 

que lá tem material bom para lhe ensinar a fazer layouts de maneira mais apropriada ;)

boa leitura

Obrigada também, silverfox, mas eu já visitei o fórum e não vejo aonde ajudaria...

Se você fosse mais específico, ajudaria mais!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

O estranho é que eu acabei de descobrir que tinha um erro no css. Resolvi o problema do alinhamento à direita. Ainda tenho problemas com a altura na div conteudo, mas pelo jeito vcs também não têm a solução....

 

As dicas que vocês me deram não resolvem nenhum dos problemas relatados, e eu ainda não entendi o motivo delas... Por favor, me expliquem...

 

Obrigada

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom Heloise, estamos "indo aos poucos".

Realmente, atacar o problema principal de cara, é complicado... vai arrumando tudo oque dissemos primeiro.

 

Na verdade, não é verdade que todos os navegadores entendem que 372 é igual à 372px.

(Não existem somente o "px" como medida no CSS.)

 

E nem que }, "fecha" declaração assim como o ;

Cada declaração DEVE ser fechada com ; e isso não é redundância de maneira alguma. o }, é responsável por fechar um BLOCO DE CODIGO. Eu já tive problemas por esquecer um ; ou colocar um ; à mais tb..

Oque acontece, é que como você não declarou um DOCTYPE, entram em ação a parte "corretiva" dos Browsers, que tentam desesperadamente, "arrumar" e entender teu código.

 

Substitua as tuas primeiras linhas por isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Faça as alterações que lhe propusemos, e coloque on line, para acompanharmos o desenvolvimento.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

Bom Heloise, estamos "indo aos poucos".

Realmente, atacar o problema principal de cara, é complicado... vai arrumando tudo oque dissemos primeiro.

 

Na verdade, não é verdade que todos os navegadores entendem que 372 é igual à 372px.

(Não existem somente o "px" como medida no CSS.)

 

E nem que }, "fecha" declaração assim como o ;

Cada declaração DEVE ser fechada com ; e isso não é redundância de maneira alguma. o }, é responsável por fechar um BLOCO DE CODIGO. Eu já tive problemas por esquecer um ; ou colocar um ; à mais tb..

Oque acontece, é que como você não declarou um DOCTYPE, entram em ação a parte "corretiva" dos Browsers, que tentam desesperadamente, "arrumar" e entender teu código.

 

Substitua as tuas primeiras linhas por isso:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Faça as alterações que lhe propusemos, e coloque on line, para acompanharmos o desenvolvimento.

ok, as alterações foram feitas, mas qdo eu coloquei esse código o site ficou todo torcido....

olha lá:

url

e dei upload da página sem a correção do doctype para comparação aqui:

url

talvez com esse código ele passe a ignorar o include... não sei...

Eu alterei o css, fechando todas as declarações.

Eu também não tinha idéia do doctype... Já tinha visto eles em outros htmls, mas não sabia para q servia.

Obrigada novamente

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exato!

Agora sim, estamos vendo o código que você construiu.

 

Vamos trabalhar em cima desse com o DOCTYPE. Só está errado, pq você declarou coisas erradas.

Com a declaração do DOCTYPE, os navegadores, param de tentar entender teu código, e apenas interpretam exatamente oque você fez.

Seu site está "torcido", pq ainda estão faltando as declarações dos pixels... lembra? eu tinha te falado para colocar eles..

#novidades2 {
width:127px;
height:97px;
color: #c06d02;
}
Retire a tag <html> dos includes tb... neles, você pode deixar somente o conteudo. Sem tags de inicialização. Pois<html>,<head>,<body> devem aparecer apenas 1 vez cada par em cada página.

Vou continuar trabalhando aqui no teu código, ja posto mais.. ou as alterações que fiz.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

ah, sim, e agora a div conteudo tem altura de quase 100% no ie e no Opera, mas ainda fica um espaço no final... você sabe como corrigir isso, tiu uiLL?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Heloise vá no sub-forum: Laboratório de Scripts (WS)

 

que lá tem material bom para lhe ensinar a fazer layouts de maneira mais apropriada ;)

boa leitura

Obrigada também, silverfox, mas eu já visitei o fórum e não vejo aonde ajudaria...

Se você fosse mais específico, ajudaria mais!

 

é isso que vai lhe ajudar:

que lá tem material bom para lhe ensinar a fazer layouts de

há fazer layouts melhores, pois analizei seu código e ele ainda esta fraquinho (é só um conselho) então recomendo que você estude os links que lhe passei ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

O código já melhorou bastante hein?!

Espero que você tenha tirado um bom proveito doque fizemos até agora, e tenha aprendido a usar CSS mais corretamente...

 

você "forçou" que fossem 100%, pois declarou 600px de altura para a DIV...

Só vai "funcionar" esse efeito na resolução de 1024x768(eu uso essa tb)... pensando em resoluções menores, e maiores, já estaria errado declarar em px, para o efeito que você qr.

 

Oque está acontecendo, é que você recortou demais o layout, por isso essa dificuldade de posicionamento. Tem muitas DIVs que podem ser retiradas, eu não podia falar isso logo de cara, desculpe, não foi querendo lhe enrolar, mas apenas tentando lhe ajudar à evoluir.

você tem uma imagem completa sem os recortes?

 

Entenda que os "float:left", estão ESVAZIANDO o container, então não existe conteudo para fazer a DIV crescer...

Não precisa citar todas os meus posts, clique apenas em RESPONDER... economiza a nossa tela...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Bom, a minha solução pro seu layout foi essa:

http://www.cenasordidas.hbe.com.br/exemplos/bgodo/teste.html

 

Fiz o efeito de height 100%, utilizando absolute na div "new-body"...

E com menos imagens, consegui posicionar mais facilmente apenas os conteudos.

Arranjei um tempinho aqui, e fiz como eu acho que seria a forma mais simples, de desenvolver esse teu lay.

 

Não tive muito tempo... mas dê uma olhadinha.. talvez lhe ajude à entender, o porquê de eu ter citado, que você fez muitos recortes.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Arrumei o probleminha no IE6... é que ele tem uma frescura com margens em elementos flutuados no mesmo sentido... um bug... ele acaba duplicando a margem.

Declarei um "display:inline", para resolver.

 

Poste o resultado final, para que acompanhemos o trabalho. Acredito que aprendendo com os códigos um dos outros, melhoraremos cada vez mais.

(notei um probleminha no IE5.01, mas com um hackzinho você ajeita as imagens do menu).

 

Bom, acho que é só isso.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Heloise    0

Heloise
Postado

bom, eu acabei refazendo o css todo, pq a cada coisa que eu modificava, dava um erro diferente em algum navegador... Agora está mais padronizado... site

obrigada pela ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Ficou bem bacana mesmo...

só pra deixar um comentário, eu noto que você melhorou bastante com a marcação HTML e o CSS^^

que bom...

 

Um outro passo agora, é usar esse "validador de códigos da w3c", como um "guia/guru", para que você acerte pequenos erros, que as vezes podem destruir o lay..

 

http://validator.w3.org/check?uri=http%3A%...ine&group=0

Por exemplo, alguma tag não fechada, algumas tags ou declarações em maiúsculo... assim você caminhará para "o código perfeito".

Bom, eu havia pensado numa solução para aquele "problema que você me apresentou no msn", das páginas maiores que 100% de altura da janela do browser, não terem o fundo acompanhado pelo conteudo..

 

Na verdade, é "quase uma gambiarra", mas o efeito cascata, nos permite fazer isso. Seria apenas sobrescrever as declarações que derem problema.. assim a maioria das páginas se manteria, e somente as que apresentasse o "erro", seriam alteradas ^^

Mas ficou bem legal mesmo... alguma dúvida ainda? podemos ajudar em algo?

Compartilhar este post

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

Informação importante

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

  Aceito