• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

t_e_e_m

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

19 mensagens neste tópico

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;
}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Estou afarto de estar a dar voltas a minha cabeça e nada.. Sera que me podem ajudar '?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O ie6 atrofia com a falta de definição dos paddings e margins.

De qualquer forma só com o CSS não vou la... Mete ai o html.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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! :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Calma chief!

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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;

}

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Por exemplo:

<!-- html -->
<div id="coluna_dta">
   <div id="subColunaEsq"></div>
   <div id="subColunaDir"></div>
</div>

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

JA resolvi o problema.

Agora nao sei é como fazer o menu horizontal mais porreirinho

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

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

0

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