Ir para conteúdo

POWERED BY:

Arquivado

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

Israel Elias

Altura estranha na div no IE6

Por , em Desenvolvimento frontend

Recommended Posts

Israel Elias    8

Israel Elias
Postado

Galera tipo to fazendo uma caixa que contem as pontas arrendondas, e estou fazendo esse processo com imagens:(img borda topo e img borda embaixo), está tudo certo em todos os browser agora no IE6 a div que contem a img da borda topo, apareçe outra img, como se a div fosse declarada maior que 11px!! veja um exemplo do erro que está acontecendo:

 

borda_top.png

 

era para ser assim:

 

borda_top2.png

por que está acontecendo isso só no IE6????

 

veja o codigo:

<!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">
#infor-control-panel-top,#infor-control-panel-bottom{background:url(bg-control-panel-category.png) no-repeat 0px -68px;}
#infor-control-panel{width: 262px;float:left;margin-bottom:10px;}
#infor-control-panel-top{background-position:0 -104px;width:262px;height:11px;float:left;} 
#infor-control-panel-center{border-left:1px solid #DFE2E7;border-right:1px solid #DFE2E7;width:260px;height:auto;float:left;background-color:#ECEFF3;} 
#infor-control-panel-bottom{background-position:0 -118px;width:262px;height:11px;float:left;} 
</style>
</head>

<body>
                        <div id="infor-control-panel">
                             <div id="infor-control-panel-top"></div>
                             <div id="infor-control-panel-center">
                                   Ola Israel Elias Ricardo 
                             </div>
                             <div id="infor-control-panel-bottom"></div>
                        </div>
</body>
</html>

 

essa e a img sprite usado no codigo:

 

bg-control-panel-category.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Nícolas Luís Huber    14

Nícolas Luís Huber
Postado

Olá, dei uma arrumada aqui no código:

 

<!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">
#infor-control-panel{width: 262px; float: left; margin-bottom: 10px;} 
#infor-control-panel .infor-control-panel-top{background:url(bg-control-panel-category.png) no-repeat 0px -104px;width:262px;float:left; height: 11px;} 
#infor-control-panel .infor-control-panel-center{border-left:1px solid #DFE2E7;border-right:1px solid #DFE2E7;width:260px;height:auto;float:left;background-color:#ECEFF3;} 
#infor-control-panel .infor-control-panel-bottom{background:url(bg-control-panel-category.png) no-repeat bottom;width:262px;float:left;height: 11px;} 
</style>
</head>

<body>
                        <div id="infor-control-panel">
                             <div class="infor-control-panel-top"></div>
                             <div class="infor-control-panel-center">
                                   Ola Israel Elias Ricardo 
                             </div>
                             <div class="infor-control-panel-bottom"></div>
                        </div>
</body>
</html>

 

Olha eu como desenvolvedor web não fico fazendo grande design para o IE lixo(desculpa IE 6), se fosse você eu deixaria com bordas normais, e colocaria apenas para os navegadores mais atuais a propriedade border-radius de CSS nível 3

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Tbm acho o IE um lixo rsrs ... mas colocando esse atributo css border-radius, vai ser aplicado no IE8 e IE9??

Para < IE8 existe a possibilidade de usar um arquivo .htc para arredondar a borda. Porém há os prós e contras.(acho que mais contras rss).

No site da MS eles mostram como fazer o uso do border-radius.Acho que funciona no IE 8 e 9.

(Clique aqui)

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