Ir para conteúdo

POWERED BY:

Arquivado

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

jackvalantine

problemas com alinhamento no firefox x explore

Por , em Desenvolvimento frontend

Recommended Posts

jackvalantine    0

jackvalantine
Postado

Boa Noite, pessoal estou com um problema e como não manjo muito de CSS esta dificíl de achar um modo pra arrumar...

vamos ao problema, estou tentando colocar em linha um logo e as imagens que serão o link, no explore fica certo, desde que eu utilize uma margem negativa, porem ao utilizar desse modo no firefox fica tudo fora, se eu faço ao contrario que fica fora é o explore......

 

segue as imagens do topo e o codigo da css e html....

 

imagem no fire

 

Imagem Postada

 

 

imagem no explore

 

Imagem Postada

 

 

CSS

 

/* CSS Document */*{margin:0;padding:0;list-style:none;vertical-align:middle;text-decoration:none;font-style:normal;}/******************************************************************DIV Geral - engloba todo o site******************************************************************/div#geral{width:776px;height:500px;margin:0 auto;}/******************************************************************DIV Conteudo - ******************************************************************/div#topo{border:1px solid #000000;position:relative;width:776px;height:100px;background: url(image/sistema/home/fundo.jpg) repeat-x;}div#topo h1{float:left;display:block;text-indent:-5000px;overflow:hidden;background:url(image/sistema/home/logo.jpg) no-repeat;width:232px;height:110px;}div#teste ul{float:right;width:505px;height:100px;margin:-3px 0 0 0;/*Aqui pra alinhar no explore*/}div#teste ul li{display:inline;}

HTML

 

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Sistema Lumini de Fotos</title><link rel="stylesheet" media="all" href="sistema.css"type="text/css"/></head><body><div id="geral"><!--inicio div geral--><div id="topo"><!--inicio div topo--><h1>Sistema Lumini Foto</h1><div id="teste"><ul>		<li class="menu"><a href="index_admin.php"><img src="image/sistema/home/sistema_home_1.jpg" alt="dwdw" width="53" height="100" border="0"/></a></li>		<li class="menu"><a href="servicos.html" title="Veja o que nos fazemos"><img src="image/sistema/home/sistema_home_2.jpg" alt="ffwefwef" width="53" height="100" border="0"/></a></li>		<li class="menu"><a href="portifolio.html" title="Portifólio"><img src="image/sistema/home/sistema_home_3.jpg" width="53" height="100" border="0" /></a></li>		<li class="menu"><a href="orcamento.php" title="Orçamento"><img src="image/sistema/home/sistema_home_4.jpg" width="53" height="100" border="0" /></a></li>		<li class="menu"><a href="contato.php" title="Fale com a gente"><img src="image/sistema/home/sistema_home_5.jpg" width="53" height="100" border="0" /></a></li>		<li class="menu"><a href="para_clientes.html" title="Pagina restrita para clientes"><img src="image/sistema/home/sistema_home_6.jpg" width="53" height="100" border="0" /></a></li>		<li class="menu"><a href="para_clientes.html" title="Pagina restrita para clientes"><img src="image/sistema/home/sistema_home_7.jpg" width="53" height="100" border="0" /></a></li>		<li class="menu"><a href="para_clientes.html" title="Pagina restrita para clientes"><img src="image/sistema/home/sistema_home_8.jpg" width="53" height="100" border="0" /></a></li>	</ul></div></div><!--fim div topo--></div><!--sim div geral--></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

jackvalantine    0

jackvalantine
Postado

pessoal achei uma forma de resolver isso, mas não sei se é validado pela WC3, achei no http://www.web2ponto0.com.br/category/css/ que é do membro INSIDE.

 

onde eu coloco margin:-3px 0 0 0, basta colocar um * na frente, e acrescentar mais uma margin porem com o valores 0 0 0 0 para que o firefox reconheça.........espero que isso ajude a mais alguem.......

 

div#teste ul{

float:right;

width:505px;

height:100px;

margin:0 0 0 0 ;/*Aqui pra alinhar no firefox*/

margin:-3px 0 0 0;/*Aqui pra alinhar no explore*/

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Válido não é, mas você pode utilizar comentários condicionais e criar um arquivo CSS separado apenas com os hacks, é isso que eu geralmente faço, aeh você coloca assim, dentro do head:

<!--[if lte IE 6]>
<link href="ie_fix.css" rel="stylesheet" type="text/css" media="all">
<![endif]-->

Aeh você cria um CSS chamado ie_fix.css e coloca nele os hacks http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif O Inside tem razão mas essa condicional não resulta para o IE7, logo eu utilizaria para todas as versões:

<!--[if IE]>

<link href="ie_fix.css" rel="stylesheet" type="text/css" media="all">

<![endif]-->

Cumps \o/

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