Ir para conteúdo

POWERED BY:

Arquivado

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

mcareias

FIREFOX x IEs

Por , em Desenvolvimento frontend

Recommended Posts

mcareias    0

mcareias
Postado

De antemão, desculpem se estou perguntando algo que já tenha sido respondido. A princípio não encontrei minha resposta em nenhum dos tópicos, acho que são mais avançados do que minha dúvida...

Esta é uma primeira página em CSS e estou apanhando muuiiitoo! http://forum.imasters.com.br/public/style_emoticons/default/blush.gif

Depois de muito lutar, achei que tinha conseguido entender os princípios e, finalmente, centralizar 3 divs ("dinner, banner e yellow-out") dentro do que seria uma coluna direita de um container. (A página é super básica: Duas colunas e um ropapé e a coluna direita com mais duas divs. Só isso... (ufa! mas que "SÓ!") :blink:

Bem, eu estava toda feliz, quando resolvi então abrir o IE... funciona no FF, não funciona no IE6 e nem em sonhos no IE5. Preciso que funcione, pelo menos no IE6, mas se conserto neste último, estrago no FF...

Não há width + padding ou border em nenhum elemento, então não vi razão pra usar HACK.. Usei a marcação * { margin:0; padding:0; } em cima (pois li em algum lugar que ajudaria) e tentei incluir um position:relative em alguns elementos, como não afetou nada, eu tirei.

 

Por favor, alguém tem alguma idéia do que estou deixando de fazer? Fiz passo a passo, consegui ir validando, mas não consigo resolver a incompatibilidade dos browsers...

Estou colocando os dois códigos htm e css aqui mesmo, pois não sei como fazer diferente. Espero q. não haja problema.

Obrigada pela atenção e mais uma vez, desculpem a pergunta ser talvez básica demais pra esse fórum..

Obrigada,

Cristina A.

--------------------------------------

HTML Code:

 

<!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" xml:lang="pt" lang="pt">

<?xml version="1.0" encoding="ISO-8859-1"?>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title> HOME </title>

<meta name="TITLE" content="Titulo - Home" />

<meta name="DESCRIPTION" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />

<meta name="KEYWORDS" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />

<meta name="OWNER" content="Lorem ipsum dolor sit amet, consectetuer adipiscin" />

<meta name="AUTHOR" content="Lorem" />

<meta http-equiv="CONTENT-LANGUAGE" content="Português" />

<link rel="stylesheet" type="text/css" href="provincia.css" />

</head>

<body>

 

<div id="container">

 

<div id="col-esq">

<h1>

<span>Bar e Restaurante Província - Restaurante a Kilo em Botafogo com Entrega em Domicílio

</span>

</h1>

 

<h2>

Bar e Restaurante a Kilo Província<br />

Rua Arnaldo Quintela, 36<br />

Botafogo<br />

Rio de Janeiro<br />

<span>Tel: 2236-5656</span><br />

</h2>

 

<p>

Aberto d e 11h às 15 h<br />

Sábados inclusive<br />

</p>

 

<p>

<img src="imagens/valid-xhtml10.gif" alt="Logomarca W3C" />

</p>

 

<p>

<img src="imagens/Skyline.gif" alt="Skyline" />

</p>

</div><!--fim div col-esq-->

 

 

<!--AQUI COMEÇA O PROBLEMA!!!-->

<div id="col-dir">

<div id="dinner">DINNER</div>

<div id="banner">CSS c/width 540 p/COL-DIR</div>

<div id="yellow-out">YELLOW</div>

</div><!--fim div col-dir-->

 

<div id="rodape">RODAPÉ</div><!--fim div rodape-->

 

</div><!--fim div container-->

 

</body>

</html>

---------------------------------

CSS Code:

 

* { margin:0; padding:0; }

 

body {

margin:0;

padding:0;

font-family: Verdana;

font-size: x-small;

color: White;

}

 

#container {

background-color: Black;

width:750px;

margin:0 auto;

}

 

h1 {

font-size: 14px;

margin:10px;

height:217px;

background-image: url(imagens/Logomarca_transp.gif);

background-repeat: no-repeat;

}

 

h1 span {

display:none;

}

 

#col-esq {

width:200px;

float:left;

}

 

#col-esq h2 {

font-size: 10px;

text-align: center;

}

 

#col-esq p {

font-size: xx-small;

text-align: center;

margin:10px auto;

}

 

#col-esq span {

font-size: small;

text-align: center;

margin:10px auto;

}

 

#col-dir {

background-color: #DDA0DD;

width:540px;

margin:10px auto;

text-align:center;

float:left;

}

 

#dinner {

background-color: Aqua;

width:64px;

height:40px;

margin-top: 11px;

margin-right: 5px;

margin-bottom: 12px;

margin-left:79px;

float:left;

}

 

#banner {

background-color: #FFD700;

width:234px;

height:63px;

margin:0 5px;

float:left;

}

 

#yellow-out {

background-color: Lime;

width:64px;

height:40px;

margin-top: 11px;

margin-right: 79px;

margin-bottom: 12px;

margin-left:5px;

float: left;

}

 

#rodape {

background-color: #7A8FAF;

clear:both;

}

Compartilhar este post

Link para o post
Compartilhar em outros sites

mcareias    0

mcareias
Postado

tira os<span></span> do seu htmltalvez pode ser isso http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Obrigada, vou tentar.. Acredito que se trata também de uma enorme dificuldade que estou tendo de lidar com medidas (alturas e larguras + margens..., enfim, talvez por vício de tabelas.. no drw...). Acho q. o IE, além do problema com borders e paddings (que não existem no meu lay-out) também tem um problema com margens.. considera um pouco diferente do FF e às vêzes a diferença estraga tudo... De todo modo, continuo tentando.. Mais uma vez, obrigada pela resposta.Cristina A.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Se ha um elemento com float right, por exemplo, e você coloca margin-right, o ie duplica, entaum se você colocar digamos 15px de margin, ele vai interpretar 30px, isso resolve com o hack "_display:inline" no elemento com float

 

Soh uma dica basica http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

[]'s

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