Ir para conteúdo

POWERED BY:

Arquivado

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

Kurt_z

[Resolvido] Estou com um problema no Firefox

Por , em Desenvolvimento frontend

Recommended Posts

Kurt_z    0

Kurt_z
Postado

Meu layout tem três div's (colunas)

Nas div's left e right eu tenho um menu em cada uma delas, certo?

 

No IE as três div's ficam alinhadinhas mais no Firefox a div left

fica com uma margem que não sei de onde saiu, com isso o tamanho dos links fica pequeno

e fica tudo desalinhado nesse menu.

O estranho é qua a div "right" fica normal e não tem diferença entre as duas, só mesmo o tamanho e o float!

 

Sabem o que pode ser?

 

Vejam o css:

body {
background:#fff;
font:normal 13px/normal "Trebuchet Ms", arial, sans-serif;
margin:5px 5px;
padding:0;
padding:0;
}

#geral {
background:#f9f9f9;
margin-top:0;
padding-top:0;
float:left;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
width:850px;
}

#conteudo_centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}

#left{
width:156px;
float:left;
margin-top:5px;
}

#right {
width:178px;
float:right;
margin-top:5px;
}
ul#menu {

margin: 0 3px 0 5px;
padding: 0;
width: 148px; /* Width of Menu Items */
background: #fff; /* IE6 Bug */
font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}

ul#menu li, ul#menu_r li {
border-bottom: 1px solid #ccc;
}

ul#menu li a:link, ul#menu li a:visited, ul#menu_r li a:link, ul#menu_r li a:visited {
display: block;
text-decoration: none;
color:#666;
padding:3px 5px;
border: 1px solid #ddd;
border-bottom: 0;
border-top: 0;
}

ul#menu li a:hover, ul#menu_r li a:hover {
background-color: #f9f9f9;
color:#c70000;
} 

ul#menu .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:146px;
padding-top:3px;
}

ul#menu_r {
margin: 0 5px 0 3px;
padding: 0;
width: 170px; /* Width of Menu Items */
background: #fff; /* IE6 Bug */
font:normal 12px/normal "trebuchet ms", arial, sans-serif;
}

ul#menu_r .titulo {
height: 20px;
border:1px solid #ddd;
font-family:Verdana;
font-size:13px;
font-weight:bold;
color:#000;
width:168px;
padding-top:3px;
}

E aqui veja a página:

<div id="geral">
<div id="left">
	<ul id="menu">
	<div class="titulo"> »  Menu 1</div>
		<li><a href="/" >Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
	<div class="titulo"> »  Menu 2</div>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
	</ul>
</div> 

<div id="conteudo_centro">Conteudo do Site</div>
<div id="right">
	<ul id="menu_r">
	<div class="titulo"> »  Menu Direita</div>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
		<li><a href="/">Link</a></li>
	</ul>
</div>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

porque no seletor BODY tem dois padding:0;?

e por que você pos <DIV> dentro de <UL> não seria melhor um <LI> com CLASS??

ponha isso tambem no seu CSS:

*{
list-style:none;
margin:0px;
padding:0px;
}
asterisco é um seletor global ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

porque no seletor BODY tem dois padding:0;?

ponha isso tambem no seu CSS:

*{
list-style:none;
margin:0px;
padding:0px;
}
asterisco é um seletor global ;)
hua nem vi que tinha dois.

 

Mais assim, resolveu meu problema, to desde meio dia tentando! Brigadão mesmo http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

Se podia me falar mais uma coisa?

É que tem outra diferença aqui no firefox, tipo:

Tenho uma tabela com os mesmo valores de margem e width do paragrafo,

no IE eles fica alinhadinhos, mais no Firefox a tabela ocupa todo espaço do "centro".

 

o css:

p {
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}

#centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}

#table {
width:490px;
background-color:#fff;
margin:10px 15px 5px 10px;
}

#table .titulo_materia, .titulo_outros {
font-size:15px;
font-weight:bold;
color:#009900;
width:100%;
border-bottom:1px dotted #000099;
}

a página:

<div id="centro">
<table id="table">
  <tr>
	<td colspan="6" class="titulo">Blá Blá Blá</td>
  </tr>
<p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>

Vlw mais uma vez

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

aqui você não fechou TABLE

 

<div id="centro">
<table id="table">
<tr>
<td colspan="6" class="titulo">Blá Blá Blá</td>
</tr>
---------------AQUI FALTA TABLE------------------
<p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>

qualquer coisa não resolver volte a postar ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

aqui você não fechou TABLE

 

<div id="centro">
<table id="table">
<tr>
<td colspan="6" class="titulo">Blá Blá Blá</td>
</tr>
---------------AQUI FALTA TABLE------------------
<p>Aqui eu queria que o texto ficasse alinhado com o que tá escrito na td da tabela<br/>
no IE ele fica, mais no Firefox, a tabela ocupa todo o espaço do "centro" sem ficar com as margens</p>
</div>

qualquer coisa não resolver volte a postar

Não não esqueci só aqui mesmo, tá tudo fechadinho!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Aqui eu não vi nenhuma diferença muito grande, mas me diga por que "tabelas"??

Não seria melhor DIV com P + CSS ??

 

arrume seu código HTML para podermos entende-lo

ok? ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

Aqui eu não vi nenhuma diferença muito grande, mas me diga por que "tabelas"??

Não seria melhor DIV com P + CSS ??

 

arrume seu código HTML para podermos entende-lo

ok? ;)

Tabelas pq eu quero alinhar outros intens tbm, dai com css tentei e não tive sucesso,

ai fiz com tabela msm, veja o código mais completo:

 

css:

body {
background:#fff;
font:normal 13px/normal "Trebuchet Ms", arial, sans-serif;
margin:5px 5px;
padding:0;
}

*{
list-style:none;
margin:0px;
padding:0px;
}

p {
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}

#centro {
float:left;
width:507px;
background:#fff;
border:1px solid #ccc;
margin:6px 3px 6px 3px;
*margin:5px 3px 5px 3px;
padding-bottom:15px;
}

#table {
width:490px;
background-color:#fff;
margin:10px 15px 5px 10px;
}

.titulo {
font-size:15px;
font-weight:bold;
color:#009900;
width:100%;
border-bottom:1px dotted #000099;
}

.icon_favoritos {
width:6%;
}

.icon_enviar {
width:6%;
}

.icon_imprimir {
width:6%;
}

.autor {
width:82%;
font-size:12px;
color:#666666;
}

e o html:

<div id="centro>
<table id="table">
  <tr>
	<td colspan="6" class="titulo">Titulo Texto</td>
  </tr>
  <tr>
<td class="autor">Por<a class="link" href="/"> Autor</a> em 
<a class="link" href="" title="">Sessão</a></td>
<td class="icon_favoritos"><a href="java script:favoritos('<?php echo $site; ?>'
,document.title);" title="Gostou do texto? Então Adicione aos favoritos">
<img src="img/star.png" /></a></td>
<td class="icon_enviar"><a href="java script:window.open('indique.php?url=<?php echo $site; ?>
','','width=470,height=230');window.history.go(9)" title="Envie para um amigo!">
<img src="img/email_go.png" /></a></td>
<td class="icon_imprimir"><a href="java script:window.print()" title="Imprimir">
<img src="img/printer.png" /></a></td>
</table>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
 laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
 sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
 ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
 dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
 ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
 et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
 laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
 sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
 ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
 dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
 ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
 et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis
 laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut
 sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet
 ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas
 dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero,
 ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse
 et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>
</p>
</div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

Para tudo! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

resolvi o problema ai das tabelas,

é que separei a parte de tabela no meu css com

comentário, dai essa tabela que me referi vinha logo depois

 

dai tirei o comentário só pra testar, num é que funcionou... http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

 

Agora num sei pq o comentário fez isso...

 

Vlw d+ a ae ajuda Silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Feliz ano novo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

Para tudo! http://forum.imasters.com.br/public/style_emoticons/default/natal_tongue.gif

 

resolvi o problema ai das tabelas,

é que separei a parte de tabela no meu css com

comentário, dai essa tabela que me referi vinha logo depois

 

dai tirei o comentário só pra testar, num é que funcionou... http://forum.imasters.com.br/public/style_emoticons/default/natal_w00t.gif

 

Agora num sei pq o comentário fez isso...

 

Vlw d+ a ae ajuda Silverfox http://forum.imasters.com.br/public/style_emoticons/default/natal_biggrin.gif

Feliz ano novo!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

Kurt_z eu não vi diferenças mas se tiver algum link para passar

abraço

feliz ano novo tambem ;)

Já resolvi Silver,

 

tipo era o comentário que tinha antes da div tipo:

 

<!-- Tabela -->

#table {

etc...

}

 

Tirei o comentário e resolveu, agora o porque eu num sei :huh:

vlw!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

eu sei que você já resolveu seu problema mas tem duas coisas que observei

uma é que aqui:

et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>

</p>

</div>

tem dois <P> um a mais do que deveria

e segundo o comentario ao qual você se refere é o texto dentro de <P>, né?

então tente por assim:

p {
display:block;/*adicione isso*/
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}

pois como lhe disse aqui eu vejo normal, porem pode ter algo a mais na sua página que afeta o <P>

 

;) abraço e feliz ano novo

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kurt_z    0

Kurt_z
Postado

eu sei que você já resolveu seu problema mas tem duas coisas que observei

uma é que aqui:

et dui ac metus auctor fringilla. Curabitur interdum augue a pede.</p>

</p>

</div>

tem dois <P> um a mais do que deveria

e segundo o comentario ao qual você se refere é o texto dentro de <P>, né?

então tente por assim:

p {
display:block;/*adicione isso*/
line-height:150%;
margin:10px 15px 5px 10px;
color:#000;
text-align:justify;
text-indent:0;
}

pois como lhe disse aqui eu vejo normal, porem pode ter algo a mais na sua página que afeta o <P>

 

;) abraço e feliz ano novo

 

Ah sim!

Mais esse p eu coloquei a mais sem ver, mais na página que estou fazendo tá normal.

 

 

Já o comentário eu tava fazendo um comentário que o css não aceita olha como eu fiz

<!-- TABELA -->
#table {
width:490px;
background-color:#fff;
margin:10px 15px 10px 10px;
}
ai num dá né?

 

Agora e seu fazer assim :

 

/*Tabela*/
#table {
width:490px;
background-color:#fff;
margin:10px 15px 10px 10px;
}

Teh+

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