Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #57 da revista programar. Faz já o download aqui!

t_e_e_m

[Duvida] Criar compatibilidade entre ie6 e i7 no meu codigo css

Mensagens Recomendadas

t_e_e_m    0
t_e_e_m

Boas.

Sou mais ou menos novato nestas coisas de web design.

Há algum tempo que estou a realizar um projecto, de plena satisfação pessoal, em css e html.

Após vários dias, se não meses mesmos, qual não é o meu espanto que qdo vou visualizar o meu site em ie6 aparece totalmente descentrado, ao contrario do que no ie7 no qual testei sempre o meu site!

Como poderei resolver esta situação?

O conteudo de uma div à direita, passou para baixo de uma div esq.

Obrigado

Aqui vai o meu css

/* Deixar as margens 0 em todo o site */
* {margin:0; pading:0;}

/* Border das imagens 0 */
img {border:0;}

/* cor e letra todo o site */
body {
background-color:#d9d9df;
font-family:Arial, Helvetica, sans-serif;
}

/* formatação */
h1, h2 {font-size:14px;font-weight:bold; }
p {font-size:12px}
.nota {font-size:11px; color: #3333FF;}

/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;}
/* border-bottom:2px solid #fbc970;*/


/* Espaço menus */
#menus {width:730px; height:38px; background-image:url(IMAGENS/bg_menu.jpg);}
#menus ul { list-style-type:none; float:left; background-image:url(IMAGENS/bg_menu.jpg);} 
#menus ul li {display:inline;}
#menus ul li a {padding:10px 28px; float:left; text-decoration:none; color:#77787b; border-left: 1px solid #a09a94}
#menus ul li a:hover {color: #000;}

/*CONTEUDO DO SITE*/

#conteudo {
width:730px;
height:392px;
background-color:#feefd6;
border-top: 2px solid #ecebef;

}



/* Coluna esq */
#coluna_esq {
width:550px;
height:392px;
padding-left:0px;
border-right: 3px solid #d9d9df;
float:left;


}


/* Coluna esqtop */

.coluna_esqtop {
width:544px;
height:100px;
padding-left:33px;

float: right;

}


/* Formatação */
.coluna_esqtop img{margin:5px; float:left;}
.coluna_esqtop h1 {color:#a2a2a3; padding:5px 0;}


/* Links */

.coluna_esqtop p a{color:#a2a2a3; text-decoration:none;}
.coluna_esqtop p a:hover {text-decoration:underline;}

/* Parte de baixo da coluna esquerda */

.coluna_esqbot {

width:453px;
height:230px;
background-image:url(Imagens/bg_evento.jpg);
background-repeat:no-repeat;
margin:14px 0 0 37px;
padding:10px 20px 10px;
_margin:4px 0 0 5px;

}

/* Formatação */
.coluna_esqbot h1 {color:#666666; padding-bottom:5px;}
.coluna_esqbot h2 {color: #a2a2a3; padding-top:5px;}
.coluna_esqbot h3 {color: #a2a2a3; padding-top:0px; font-size:12px;}
.coluna_esqbot h4 {color: #a2a2a3; padding-top:5px;font-size:12px;}
.coluna_esqbot p a{color:#0000CC; text-decoration:none;}
.coluna_esqbot p a:hover {text-decoration: underline;}

.coluna_esqbot img {float:left; margin:26px 5px;}

#coluna_dta {
width:167px;
height:382px;
padding: 5px;
background-color:#FFFFFF;


}

/* Formatação */
#coluna_dta h1 {float: left;}
#coluna_dta h2 { color:#a2a2a3; ; font-size:10px;}
#coluna_dta h3 { color:#a2a2a3; font-size:10px;}
#coluna_dta h4 { color:#a2a2a3; font-size:10px; }
#coluna_dta h5 { color:#a2a2a3; font-size:10px;}
#coluna_dta h6 {font-size:14px;font-weight:bold; padding-bottom:4px;}
.linha { height:3px; background-color:#d9d9df;}

/* Coluna direita baixo */
#coluna_dta_bot {

height:100px;
padding-top:70px;
margin-bottom:15px;
margin-left:14px;
}

#coluna_dta_bot h1 { color:#a2a2a3; font-size:9px; margin-left:19px; font-variant:small-caps;}
#coluna_dta_bot h2 { color: #000000; font-size:9px; margin-left:19px; font-variant:small-caps;}



/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:0px solid #fae5c3;
background-color:#d9d7df;
padding-top:0px;
color:#000000;
text-align:center;
font-size:10px;
}

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
softklin    12
softklin

Após vários dias, se não meses mesmos, qual não é o meu espanto que qdo vou visualizar o meu site em ie6 aparece totalmente descentrado, ao contrario do que no ie7 no qual testei sempre o meu site!

Como poderei resolver esta situação?

Deixando como está. (Suponho eu que) o IE6 está cada vez a ser menos utilizado, uma vez que nas actualizações automáticas o IE7 é instalado, e o IE8 está para chegar. E se isso não chegar, posso dizer-te que o IE6 não segue os standards de CSS, por isso, se eles não se preocupam, porque hás-de preocupar-te tu com eles?

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
cgoncalves    0
cgoncalves

Deixando como está. (Suponho eu que) o IE6 está cada vez a ser menos utilizado, uma vez que nas actualizações automáticas o IE7 é instalado, e o IE8 está para chegar. E se isso não chegar, posso dizer-te que o IE6 não segue os standards de CSS, por isso, se eles não se preocupam, porque hás-de preocupar-te tu com eles?

Sim, é verdade, o IE6 é uma dor de cabeça mesmo.

Mas ainda é muito, mesmo muito utilizado, depois do firefox o IE 6 é o 2º browser que mais é utilizado pelos visitantes do meu blog.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
t_e_e_m    0
t_e_e_m

Sim, mas mesmo assim existem empresas onde por politicas estupidas nao actualizam os browsers. e para o intuito que me comprometi realizar o site não me apetecia que o site fica se assim limitado.

Gostaria de encontrar uma solução plausivel para o meu problema.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
t_e_e_m    0
t_e_e_m

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

<title>CRB</title>

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

<style type="text/css">

<!--

.style3 {color: #000000}

.style4 {color: #a2a2a3}

.style5 {

font-size: 12px

}

-->

</style>

</head>

<body>

<div id="geral">

<div id="topo"><img src="IMAGENS/Topo.jpg" /></div>

<div id="menus">

<ul>

<li><a href="index.html" style="border:none;">menu</a></li>

<li><a href="XXX">menu</a></li>

<li><a href="XXX">menu</a></li>

<li><a href="XXX">menu</a></li>

<li><a href="XXX">menu</a></li>

<li><a href="contct">menu</a></li>

</ul>

</div>

<div id="conteudo">

<div id="coluna_esq">

<div class="coluna_esqtop">

<img src="Imagens/477x104.jpg" alt= "imagem 01" />

</p>

</div>

<div class="coluna_esqbot">

<h1>Crb</h1>

<h2> Texto crb</h2>

<p> </p>

<h3 class="style5">Espaço reservado para uma breve nota introdutória ao site.</h3>

</div>

</div>

<div id="coluna_dta">

<br />

<h1 class="style4">Contactos</h1>

<br />

<div class="linha">

<br />

<h2> Morada</h2>

<br />

<div class="linha">

<br /><br />

<h6 class="style4">Localização</h6>

<div class="linha">

<br />

<h2> Junto às </h2>

<h2>GPS: coordenadas gps</h2>

</div>

<div id="coluna_dta_bot">

<h2> Clique na Imagem</h2>

<img src="Imagens/localiz.jpg" alt="Clique sobre a imagem" /> </div>

<div class="linha">

</div>

</div>

</div>

</div>

<div id="Rodape"> © <span class="style3"> 2009</span> <br />

<em>Webdesign: JF</em></div>

</div>

</body>

</html>

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
lugh    0
lugh

Boas!

Já não uso o IE6 por isso estou um pouco às cegas.

Mas vou mandar uns palpites:

Experimenta meter um:

float:left;

em:

#coluna_dta {
width:167px;
height:382px;
padding: 5px;
background-color:#FFFFFF;
}

De qualquer forma é sempre uma boa prática especificar:

padding:0;
margin:0;

em vez de não meter nada. Alguns browsers aplicam paddings e margins por omissão daí as diferenças nos renders.

Caso não resolva o problema começa por meter cores no fundo das tuas div's, desta forma podes ver até onde elas estão a ir e consequentemente ver qual delas poderá estar a destabilizar o resto.

Dispõe sempre! :)

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
t_e_e_m    0
t_e_e_m

Calma chief!

Mete aí um screenshot para ter uma ideia mais clara do que está a acontecer...

basicamente é isto.

semttuloe.th.jpg

eu testo no ie6 atraves de um maq virtual

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
lugh    0
lugh

Solução de recurso:

descobre qual a propriedade que está a provocar esse comportamento e altera-a até ficar tudo no lugar. Metes um _ (underscore) antes da propriedade (por ex. se fosse padding:10 ficaria _padding:10) e apenas o ie6 reconhecerá essa mesma propriedade (não te esqueças de lá deixar a actual).

Não é a melhor prática a seguir mas resolve.

Para perceberes melhor o que está a acontecer faz como disse lá em cima, mete cores nos backgrounds das divs. Desta forma ficas com uma ideia mais clara do que está fora do sítio.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
t_e_e_m    0
t_e_e_m

Parece que ja estou a atinar com isto. Estou a reformolar o css.

Agora estou com uma duvida.

Nesta coluna, gostava de dividila em dois, de modo a poder na segunda coluna do lado dto colocar uma imagem.  Como poderei fazer isso?

#coluna_dta {

width:167px;

height:382px;

padding: 5px;

background-color:#FFFFFF;

}

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
t_e_e_m    0
t_e_e_m

Pois mas eu ja tenho uma coluna direita e uma esquerda. e a esquerda quero dividir em duas uma top e outra por baixo. ou seija dividir a coluna dta em duas.

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites
sergio3861    0
sergio3861

Não é propriamente ajudar mas é como costumo resolver estes stresses.

Primeiro tenho uma css só para o ie6 que carrego da seguinte forma:

<!--[if lt IE 7]> <style type="text/css">@import url('/css/ie6.css');</style> <![endif]-->

e para testar no ie6, instalei este software: http://www.xenocode.com/Browsers/. Podes ter todos os IE instalados para testar. Não necessitas de virtual machine assim.

Quanto ao código CSS, tem tudo a ver com margin, padding e widths que o IE6 reconhece de forma diferente, é grande dor de cabeça, porque nos sites que crio, meu deus, são horas e horas perdidas a identificar o erro.

Boa sorte.

Abraço

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora


×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade