CSS Com resultados diferenes entre Browsers Dif.

[lixo 0]

BoaTarde pessoal.

Estou tendo problema com CSS.

1 - O que devo ter em mente pra aplicar CSS e e TER CERTEZA do que eu fizer, irá aparecer exatamente igual em todos os browsers (ou ao menos, nos mais atuais, como Netscape 9.0.0.6, Firefox, e Internet Explorer 7? (Porque no netscape e Firefox, o resultado saiu como queria, no IE, não saiu!.

2 - Não sei se tem a ver com primeira pergunta: Fiquei sabendo da Tag "IMPORTANT".. ela deve ser usada para que eu tenha essa CERTEZA de que o que eu fizer terá resultado igual nos browsers? - pergunto porque eu olhei a página do myspace e vi essa tag IMPORTANT.

3 - Se possível, indicar um site que fale sobre conceitos de float e clear.. achei abstrato a "idéia" - eu faço alguma coisa mas não tenho certeza do que fiz! - float ja entendí.. agora clear.. entendí nada.

 

Não especifiquei o problema diretamente, ja pra mim ter uma idéia global do assunto, mas por via das dúvidas é o seguinte:

 

Ào colocar posição ABSOLUTA, funcionou perfeitamente no Firefox e Netscape.. no IE, é como se eu não colocasse o position: absolute; - ou seja, ele trata como RELATIVE:

 

NO IE:

 

 

 

Obrigado a atenção de vocês do fórum!!!!

[cassiano óliver 1]

não consegue atingir o resultado esperado apenas com float não?

pelo que vi é uma div ao lado da outra...

 

#div2 {
	 float: left;
}
#div3 {
	 float: right;
}

[lixo 0]

Tentei como você falou. Se a área do navegador não ocupar nenhuma parte dessa DIV3, no IE, fica como mostrado na segunda imagem!

Sendo nos outros navegadores, a imagem é igual a primeira mesmo. Mas se eu redimensiono o IE, de forma a diminuir, ào "encostar" a borda do navegador na DIV3, essa DIV3 cai pra debaixo da DIV2.

(Isso só no IE, ou seja, ele ja fica com esse deslocamento que mostrei na imagem e se eu ainda redimensiono o IE até encostar na DIV3, essa DIV3 cai pra debaixo da DIV2.

 

No dreamweaver esse deslocamento também é mostrado. Mas o resultado no netscape e firefox está como quero.... então o que eu tenho que ter em mente pra assegurar que em todos navegadores, será o mesmo resultado?

 

Obrigado!!!

[zazula 0]

Esse problema acontece por que apesar do CSS ser o mesmo em todos os navegadores os valores padrão não são, por exemplo: se você faz uma página com uma tabela e não define nada sobre a borda, no firefox a tabela vai aparecer sem borda enquanto no IE6 ela vai aparecer com borda, isso pq o valor padrão do firefox pra tabelas é border-width: 0px; enquanto no IE é border-width: thin;

 

Para resolver isso tente o seguinte:

1º)Crie um arquivo com um nome tipo padrao.css e defina valores padrão sem pensar no seu layout (por exemplo coloque o padding e a margin dos elementos body div e table como 0px).

2º)crie o seu CSS do jeito que você quiser.

3º)na hora de colocar na sua página Web inclua o arquivo padrão primeiro e depois o seu css, assim o brownser vai usar o seu css... e aonde você não tiver definido nenhum valor no seu css o browser vai usar os valores que você colocou no arquivo padrão.

 

o arquivo padrao.css que eu uso:

* {
  padding: 0px;
  margin: 0px;
  border-width: 0px;
  position: relative;
  overflow: scroll;
}

OBS: no código o * significa TODAS AS TAGS

[lixo 0]

zazula, obrigado. Funcionou!!! http://forum.imasters.com.br/public/style_emoticons/default/excl.gif

[brcontainer 16]

lixo(que nick estranho) de uma olhada nos artigos e no laboratorio de scripts

terá bastante material para você estudar

 

falow abraço ;)