Ir para conteúdo

POWERED BY:

Arquivado

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

jotaerre10

IE7 vs FireFox

Recommended Posts

salve galera,

 

to tentando criar um layout aqui, mas a minha div de noticias funciona mais ou menos no ie7 e naum funciona no firefox!

segue o link e os códigos para análise.

 

desde já obrigado,

 

LINK

 

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>pagina inicial</title>
<link rel="stylesheet" href="css/default.css" type="text/css" />
</head>
<body>
	
<div id="topo">
	<a href="index.php">pagina inicial</a>
</div>

<div id="menu">
	<span><a href="index.php"></a></span>
	<ul class="primary"><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
	<ul><a href="#">link</a></ul>
</div>

<div id="content">
	
	<div class="data">cidade, 16 de Novembro de 2007</div>
	
	<div class="barra">links para: 
		<a class="um" href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> <img src="img/4.jpg" /> 
		<a href="#">link</a> 
	</div>
	
	<div class="busca">
		<a href="buscar">buscar</a> <input type="text" /> <img src="img/6.png" />
	</div> 
	
	<div id="home">
	<h4>últimas notícias</h4>

	<div id="news">
		<div id="data">21/11</div>
		<div id="noticia">
		Pagamento 13º Salário<br />
		<span><a href="#">mostrar detalhes</a></span>
		</div>
	</div>
	
	<div id="news">
		<div id="data">19/11</div>
		<div id="noticia">
		Ramais Atualzados<br />
		<span><a href="#">mostrar detalhes</a></span>
		</div>
	</div>
	
</div>

<div id="acess">
	<h4>acesso</h4>
</div>
	
</div>

</body>
</html>

 

CSS

/* CSS Document */
*{ margin:0; padding:0; list-style:none; }
body{ font:12px "trebuchet ms"; background:#e1e1e1;; }
img, fieldset{ border:0;}
/** TOPO **/
#topo{ background:url(../img/1.jpg) repeat-x; }
#topo a{ background:url(../img/2.jpg); display:block; width:219px; height:100px; text-indent:-999px; overflow:hidden; }

/** MENU **/
#menu{ width:174px; background:url(../img/11.jpg) repeat-y fixed; border-top:1px solid #fff; float:left; min-height:480px; }
#menu span a{ display:block; width:174px; height:20px; background:url(../img/3.jpg); text-indent:-999px; overflow:hidden; }
#menu ul a{ text-decoration:none; color:#fff;}
#menu ul{ margin:0 5px 2px 5px;  padding:3px; background:url(../img/4.jpg) no-repeat 0 50%; text-indent:5px; }
#menu ul:hover { border-left:5px solid #018553; background:#063;}
#menu ul.primary{ margin-top:20px; }

/** CONTEUDO **/
#content{ background:#f0f0f0; float:left; width:600px; border-top:1px solid #fff; border-left:1px solid #fff; padding:0; border-right:2px solid #c0c0c0; border-bottom:5px solid #c0c0c0; }

#content .data{ height:20px; background:url(../img/5.jpg) repeat-x; font-size:10px; text-align:right; padding-right:5px; line-height:20px;}

#content .barra{ padding:5px; background:#424242; color:#ffc600; text-transform:uppercase; font-size:10px; font-weight:bold;}
#content .barra a{ color:#e1e1e1; font-weight:800; text-transform:uppercase; font-size:10px; text-decoration:none;}
#content .barra a.um{ margin-left:5px;}
#content .barra a:hover{ text-decoration:underline;}

#content .busca{  height:25px; background:url(../img/7.jpg) repeat-x; border-bottom:2px solid #c0c0c0; padding:5px; text-align:right; text-transform:uppercase; font-size:9px;}
#content .busca input{ height:15px; font-size:9px;}
#content .busca a{ text-decoration:none; color:#996600;}

/** ANIMACAO **/
#animacao{}

/** RAMAIS INICIO **/
#topmenu{height:50px; background:url(../img/8.jpg) repeat-x;}
#topmenu a{display:block;width:41px; height:50px; background:url(../img/9.jpg) no-repeat 10% 0; text-indent:-999px; overflow:hidden; float:left;}
#topmenu h2{color:#fff; text-transform:uppercase; margin:10px 670px 0 0; float:right; font-size:20px;}
#topmenu h2.composto{color:#fff; text-transform:uppercase; margin:10px 510px 0 0; float:right; font-size:20px;}

/** CONT **/
#cont{display:block; width:300px; margin:20px auto; text-align:center;}
#cont input{padding:5px; width:200px; margin:10px;}

/** HOME **/
#home{ background:url(../img/12.jpg) repeat-y; border:1px solid #c5dac2; margin:5px; width:398px; float:left;}
#home h4{ display:block; height:20px; text-indent:25px; line-height:20px; color:#005966; text-transform:uppercase; font-size:90%; background:url(../img/ico_noticias.gif) no-repeat;}

#acess{ background:url(../img/13.jpg) repeat-y; border:1px solid #efc687; width:183px; float:left; margin-top:5px; margin-bottom:5px;}
#acess h4{ background:url(../img/ico_acesso.gif) no-repeat; display:block; height:20px; text-indent:25px; line-height:20px; text-transform:uppercase; font-size:90%; color:#9d6815;}

#news{ display:block; width:398px;}

#news #data{ margin-top:5px; margin-bottom:5px; float:left; width:50px; margin-left:30px; height:50px; color:#005966; font-weight:bolder; line-height:50px;}

#news #noticia{ margin-top:5px; margin-bottom:5px; display:block;  float:left; width:300px; border-bottom:1px dashed #c5dac2;}
#news #noticia span a{font-size:75%; text-transform:uppercase; text-decoration:none; color:#999;}
#news #noticia span a:hover{ text-decoration:underline;}

Compartilhar este post


Link para o post
Compartilhar em outros sites

jotaerre10, vamos por partes:

1)

Você fez o menu somente com <ul></ul>, onde estão os <li></li>?

 

2)

Logo abaixo você tem outro menu, só que feito somente com <a></a>.

Recomendo pesquisar sobre menus, vai perceber que é bem tranquilo de fazer.

 

3)

Você está usando 2 vezes o id news e não é correto, para isso utilize class

Aqui no fórum existem tópicos explicando a diferença entre id e class, pesquise.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá,

 

Penso que o problema está na repetição dos id's. Verifique isso, faça uma pesquisa aqui no forum acerca do mesmo.

 

Cumps \o/

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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