Ir para conteúdo

POWERED BY:

Arquivado

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

Azumi

problema com margem

Por , em Desenvolvimento frontend

Recommended Posts

Azumi    0

Azumi
Postado

Eu estou com um problema de exibição de um Div com um LI dentro, e acredito que seja alguma coisa errada que to fazendo no CSS, imagino se alguém pode me ajudar.

 

Segue o código do HTML, e logo abaixo as imagens comparando o que acontece no IE e no FF.

 

imagens FireFox IE

 

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.cal {
	overflow:hidden;
	height: 30px;
	width:280px;
	float:left;
	position:relative;
	line-height: 30px;
	z-index: 351;	
}
ul {
	position:relative;
	line-height: 15px;
	width: 280px;
	z-index: 350;
	margin:0;	
}
li {
	float: left;
	width:35px;
	text-align:center;
	overflow:hidden;
	height: 30px;
	font-family: "Courier New";
	font-size: 14px;
}
-->
</style>
</head>
<body>
<div class="cal" id="cal">
	<ul id="diascal">
		<li class="li">Seg 1</li>
		<li class="li">Ter 2</li>
		<li class="li">Qua 3</li>
		<li class="li">Qui 4</li>
		<li class="li">--- 5</li>
		<li class="li">Sab 6</li>
		<li class="li">Dom 7</li>
		<li class="li">Seg 8</li>
	</ul>
</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

O problema é simples.

 

É que o IE e o Firefox tem comandos diferentes interpretar algumas coisas.

 

Nesse caso, o <ul> tem uma margem esquerda.

 

Essa margem no IE é dada pelo comando margin

Já no firefox é dado pelo comando padding

 

<!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=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

.cal {

overflow:hidden;

height: 30px;

width:280px;

float:left;

position:relative;

line-height: 30px;

z-index: 351;

}

ul {

position:relative;

line-height: 15px;

width: 280px;

z-index: 350;

margin:0px;

padding:0px;

}

li {

float: left;

width:35px;

text-align:center;

overflow:hidden;

height: 30px;

font-family: "Courier New";

font-size: 14px;

}

-->

</style>

</head>

<body>

<div class="cal" id="cal">

<ul id="diascal">

<li class="li">Seg 1</li>

<li class="li">Ter 2</li>

<li class="li">Qua 3</li>

<li class="li">Qui 4</li>

<li class="li">--- 5</li>

<li class="li">Sab 6</li>

<li class="li">Dom 7</li>

<li class="li">Seg 8</li>

</ul>

</div>

</body>

</html>

 

Por isso é bom resetar o CSS antes de iniciar alguma estruturação

 

http://www.tableless.com.br/css-reset

http://imasters.com.br/artigo/8505/css...se_o_css_reset/ ( eu uso o reset.css e o ie.css )

 

Agora uma pergunta, porque você não usou tabela??? :huh:

Compartilhar este post

Link para o post
Compartilhar em outros sites

Azumi    0

Azumi
Postado

Porque isso ai na verdade é uma animação, é uma listagem completa dos dias do mês corrente, e eu tenho um Script que faz uma rolagem animada dessa lista, para tras e para frente.

 

Agora muito obrigado pela sua dica, se você deseja ver a animação eu posto ela ai com os scripts e tudo mais, ela é muito boa.

 

Aproveitando, eu percebi que tem algumas coisas que o FF e o IE não "conversam", por exemplo nesse caso que acabamos de arrumar e tem um outro problema que é assim, no IE eu consigo usar "cursor: hand;" sem problemas, já no firebird isso não funciona.

 

Existe algum site tenha uma lista dessas incompatibilidades, ou que mostre qual é qual nos 2 navegadores?

 

vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas    4

Nícolas
Postado

Sobre a animação

Pooo demorou posta ae depois de pronto, as vezes essas coisinhas simples faz um grande diferencial =)

 

Sobre a lista de incompatibilidade

Bom cara, do tanto de conteúdo que tem na internet, se ve cada coisa, na certa deve ter em algum lugar na net, mas eu nunca vi, da uma procurada no google, derrepente você acha, mas tanto eu quanto a grande maioria nesse fórum aprendeu batendo a cabeça do teclado muitas vezes ^_^

 

Sobre o cursor

É que o o comando

 

cursor: hand;
É propriedade exclusiva do IE e não é reconhecido pela w3c

 

Agora para que funcione no Firefox é só usar

cursor: pointer;

http://www.w3.org/TR/REC-CSS2/ui.html

 

;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Azumi    0

Azumi
Postado

Eu vo separa o código aqui e abro um post disso ai na área de JS, depois te aviso, acho que hoje a noite eu coloco lá.

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Bem acho que se você simplismente adicionar isto ao CSS:

 

seletor global:

*{
margin:0;
padding:0;
}

assim você zera tudo e pode definir as margens iguais para todos browsers(pelo menos a maioria)

 

ficaria algo assim:

<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
.cal {
	overflow:hidden;
	height: 30px;
	width:280px;
	float:left;
	position:relative;
	line-height: 30px;
	z-index: 351;	
}
ul {
	position:relative;
	line-height: 15px;
	width: 280px;
	z-index: 350;
	margin:0;	
}
li {
	float: left;
	width:35px;
	text-align:center;
	overflow:hidden;
	height: 30px;
	font-family: "Courier New";
	font-size: 14px;
}
-->
</style>
</head>
<body>
<div class="cal" id="cal">
	<ul id="diascal">
		<li class="li">Seg 1</li>
		<li class="li">Ter 2</li>
		<li class="li">Qua 3</li>
		<li class="li">Qui 4</li>
		<li class="li">--- 5</li>
		<li class="li">Sab 6</li>
		<li class="li">Dom 7</li>
		<li class="li">Seg 8</li>
	</ul>
</div>
</body>
</html>
e ao inves de usar cursor: hand; use cursor: pointer;(funcionará no Firefox e no IE )

falow abraço ;)

 

titulo editado:

Problemas com CSS, com IE e FF, não fica igual! http://forum.imasters.com.br/public/style_emoticons/default/seta.gif problema com margem

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