Problema de Diferenças entre Browsers

[anggelus 0]

Boa noite,

pessoal, o meu template tem cantos arredondados, um menu superior e um lateral. E ainda tem uma coluna do lado esquerdo que eu vou colocar os destaques. Na parte central eu vou colocar um local para notícias e abaixo o conteúdo do portal.

Eu consegui fazer uma boa parte dele. Fiz tudo olhando no IE. Quando eu terminei de fazer os menus, centralizei a notícia, determinei o local dos destaques faltava apenas o conteúdo central.

Para não fugir da regra eu fiz pelo IE (por ser o navegador mais popular) e verifiquei no FF e Opera. Só que a diferença entre eles estava estranha.

Eu tive que usar o float: left; para colocar os divs um ao lado do outro, mas o problema que o conteúdo fica dentro de um DIV que controla as laterais do meu layout, no IE o layout fica excelente, mas no FireFox e Opera ele para de fazer as laterais e fica muito estranho, o clear: both; está funcioando direito, o meu rodapé está descendo e subindo conforme o tamanho do menu, que tem a propriedade de subir e descer.

Eu vou colocar as imagens e uma parte do CSS que controla as colunas de conteúdo.

Abraços

Anggelus

 

Achei um local para hospedar

http://anggelus.freehostinn.com/template/Index.html

 

 

PS: essa bordas eu coloquei para ver como que estavam os posicionamentos dos DIVs, tem um probleminha que eu coloquei 2 imagens para troca de idioma e a primeira pegou o canto superior da curva esquerda, muito estranho....

Se quiserem eu posto mais código, se alguém souber de um local onde eu posso hospedar de graça para visualizar melhor é só falar

 

 

Imagem no Internet Explorer:

Imagem no Firefox e Opera:

[Giovani 104]

Para não fugir da regra eu fiz pelo IE (por ser o navegador mais popular) e verifiquei no FF e Opera. Só que a diferença entre eles estava estranha.

anggelus, que regra é essa? Nós aqui sempre recomendamos fazer olhando em todos os navegadores simultaneamente. De preferência nessa ordem: FF, Opera e IE.

Eu não conheço nenhum site de hospedagem gratuita, mas vá até o google e dê uma pesquisada, depois poste o link para a gente.

 

[]'s http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[anggelus 0]

a regra é de mercado, tem muita gente que mete a bronca no IE, mas ele continua que uma porcentagem muito grande. Eu consegui um local para hopedar o template:link retiradotem uma coisa estranha, eu tinha colocado outros botões no menu superior e todas as 1ª pegavam um pedaço da curva esquerda que dá o acabemento no template, como se tivessem arrastado.AbraçosAnggelus :D

[Guilherme Rambo 4]

a regra é de mercado, tem muita gente que mete a bronca no IE, mas ele continua que uma porcentagem muito. Eu consegui um local para hopedar o template:http://anggelus.freehostinn.com/template/Index.htmltem uma coisa estranha, eu tinha colocado outros botões no menu superior e todas as 1ª pegavam um pedaço da curva esquerda que dá o acabemento no template, como se tivessem arrastado.AbraçosAnggelus :D

WS não é mercado, é metodologia, e deve ser acessivel, portanto, você naum deve priorizar nenhum browser

[anggelus 0]

eu não estou descartando nada, principalmente a metodologia, eu fiz uma parte testei nos 3 Browsers, fiz a segunda e deu esse problema, só que eu faço primeiro no IE e depois eu testo nos outros, pq senão eu já tinha partido pra outra etapa.AbraçosAnggelus :DGostaria de saber se alguém tem alguma idéia de como me ajudar. Pode ser um idéia qualquer que eu testo aqui.

[anggelus 0]

galera eu finalmente consegui resolver o problema agora tá funfando 100% no IE, FireFox e Opera. Se quiserem eu posto aki como que eu resolvi. Senão o tópico pode ser fechado.AbraçosAnggelus :D

[Guilherme Rambo 4]

Posta aqui como resolveu com certeza![]'s

[anggelus 0]

para fazer o meu layout fica dessa forma e não ter que colocar nenhum tipo de imagem no código HTML e ao mesmo tempo ele ficar fluido, eu aninhei os divs da seguinte forma:

 

vou usar comentários php

<div id="tudo"> // determina o tamanho da tela no caso eu trabalho com 1024x768   <div id="conteudogeral"> //mantém a minha página centralizada			   <div class="cabecalho" > // eu dertemino o tamanho do meu cabeçalho					  <div class="cantoscima"> aqui eu crio os cantos das laterais esqueda e direta arredondadas							<div id="posicionarmenu"> //eu posiciono o meu menu superior								 <div id="menu"> //crio o meu menu								 </div>							 </div>					   </div>				 </div>//fim do cabeçalho   			   <div class="lados" > //dentro desse div fica todo o "conteúdo"					<div class="cantoslado">  //aqui eu construo as barras laterais E e D que fluem com o conteúdo						<div class="conteudo" > //esse div ficam as colunas da esqueda, central e da direita							 <div class="colunaesquerda">// meu local da login e menu esquedo								  <div id="caixa_login">//login								  </div>																					  								  <div class="menuesquerdo">//menu esquerdo								  </div>							 </div>	 																					 							<div class="colunacentral">// minha coluna central, módulo notícias e conteúdo								 <div class="noticias">//notícias								 </div>								 <div id="nucleo">//local onde efetivamente vai ficar o conteúdo								 </div>							</div>  						   <div class="colunadireita">//coluna da direita onde ficará o meu destaque								  <div id="topusuarios">//top 10								  </div>	 						   </div>					  </div>					</div>				</div>	   </div> </div>

Antes que os críticos de plantão cheguem falando mal, o meu objetivo inicial foi o de criar o layout, agora eu vou pegar o CSS e o layout e deixa-ló segundo a web-standards, com menu = nav, conteúdo = content etc....

A minha dificuldade inicial era que eu nunca tinha tabalhado dessa forma, sempre mexi com tabelas.

 

Voltando a solução, eu tentei posicionar as colunas usando margins e paddings, mas toda a página subia junto o Firefox e Opera, no IE funcionava 100%. Então eu larguei desse artifício e mudei para os floats.

Eu coloquei as 3 colunas com float:left; e novamente ficou 100% no IE e uma porcaria no Firefox e Opera. Mas eu notei que todas as duas vezes que ficava ruim no opera e no firefox elas eram idênticas, conclusão o IE estava me enganando...

 

Como mostra nas imagens dos post anteriores a organização da colunas e tudo mais estava do jeito que eu queria, mas a área do conteúdo que tem o fundo branco ficou colado na parte de cima. Eu testei tudo o clear: both; em todos os meus divs tanto individual quanto em pares, trios, todos .... e sem dar nenhum resultado satisfatório.

 

Tentei colocar position: absolute; e relative no meu div conteúdo e não funcionou ele apenas ficou sobre os outros divs.

 

Por último eu tentei colocar um float:left; também no meu div conteúdo, ai melhorou alguma coisa ele ficou parecido em todos o browsers, faltando apenas as laterais dele que faltaram, solução colocar também um float:left; apenas na divs lados e cantoslado.

 

Depois disso ele ficou 100% nos 3 browsers IE, Firefox E Opera.

 

 

Eu vou apenas terminar de formatar a minha área de notícias e destaques e vou revisar todos o código e colocar nome das classes nas recomendações do W3C, esses nome ficaram muito redundantes e pouco precisos, porque eu nunca tinha trabalhado dessa forma, serviu como laboratório e experiência.

 

Abraços

Anggelus