Ir para conteúdo

POWERED BY:

Arquivado

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

engas

Problema Divs Internet Explorer

Por , em Desenvolvimento frontend

Recommended Posts

engas    0

engas
Postado

Boa Noite

 

Estou com um pequeno problema que não consigo resolver , as divs no Firefox aparecem corretamente quando vou abrir o trabalho com IE simplesmente as divs desaparecem. Agradecia que alguém me ajuda-se.

 

 

Obrigado

 

//// CSS

body {
  	margin:0 0 5px 0;
padding:0;
background-color:#444;
}

/*behavior:url(border-radius.htc); borderrrrrrr*/
#topo{
width:auto;
height:150px;
background-color:#333;

color:#0f0;
text-align:center;

}
#title
{
   width: 300px;
   height:40px;
   border:1px solid red;
   float:left;
   font-size: 10px;
   color:Red;
}
.menu {
   top:0;
   position: absolute;
   margin-left:0px;
float: left;
width: 43%;
margin-left: 50%;
background-color: #F6F7F8;
margin-bottom: 100px;                  /*mudar */
height: 28px;
border:1px;
z-index:4;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
-moz-box-shadow: 4px 5px 2px #000000;    
-webkit-box-shadow: 4px 5px 2px #000000;   
box-shadow: 4px 5px 2px #000000;

behavior:url(border-radius.htc);

}
.caixagrande {
float: left;
width: 98%;
margin-bottom: 10px;

padding:10px;
background-color: #bbb;
height :auto;

border: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
   -moz-box-shadow: 4px 5px 2px #000000;
   -webkit-box-shadow: 4px 5px 2px #000000;
   box-shadow: 4px 5px 2px #000000;
   behavior:url(border-radius.htc);
}
.interior{
   border:2px solid red;
   padding: 10px;
   -moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
   -moz-box-shadow: 4px 5px 2px #000000;
   -webkit-box-shadow: 4px 5px 2px #000000;
   box-shadow: 4px 5px 2px #000000;
   behavior:url(border-radius.htc);


}
.caixamedia {
width: 63%;
margin-bottom: 10px;

padding:10px;
background-color: #bbb;
height :auto;

border: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
   -moz-box-shadow: 4px 5px 2px #000000;
   -webkit-box-shadow: 4px 5px 2px #000000;
   box-shadow: 4px 5px 2px #000000;
   behavior:url(border-radius.htc);
}
.left{
   float: left;
}
.right{
   float: right;
}
.caixapequena {
width: 31%;
margin-bottom: 10px;

padding:10px;
background-color: #bbb;
height :auto;

border: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
border-top-left-radius:15px;
border-top-right-radius:15px;
border-bottom-left-radius:15px;
border-bottom-right-radius:15px;
   -moz-box-shadow: 4px 5px 2px #000000;
   -webkit-box-shadow: 4px 5px 2px #000000;
   box-shadow: 4px 5px 2px #000000;
   behavior:url(border-radius.htc);
}
.espaco{
   clear: both;

}
.imgpos{
 position:relative;
 width: 100%;

}
#menuhor {
border:none;
margin: 7;
font: 12px Arial, sans-serif;
}
#menuhor li {
list-style: none; 
margin: 3;
display: inline;
}
#menuhor li a {
height:1px; /* IE5.0 bug */
padding: 2px 7px; 
margin:0;
border: 1px solid; 
background: #999;
text-decoration: none;
}
#menuhor li a:link {
color: #fff;
}
#menuhor li a:visited {
color: #fff;
}
#menuhor li a:hover {
background: #ccc;
color: #000; 
border-color: #000;
}

#conteudoEsq {
position:absolute;
width:190px;
top:60px;
left:5px;
color:#99f;
padding-bottom:20px;
}
#conteudoDir {
position:absolute;
width:140px;
top:60px;
right:5px;
color:#99f;
padding-bottom:20px;
}
#colEsq {
background:#444;
}
#sepEsqcolCentral {
margin-left:200px;
padding-left:2px;
background:#666;
}
#colDir {
background:#444;
margin:0px;	
}
#sepcolCentralDir {
margin-right:150px;
padding-right:2px;
background:#666;
}
#colCentral {    
background:#22232F;
color:#991;
padding:2px 10px;
text-align:justify;
border-bottom:1px solid #666;
       height:1000px;
}

 

INDEX.HTML

 

<html>
   <head>

       <link href="estilo.css" rel="stylesheet" type="text/css" />
       <!--[if lt IE 9]>
       <link rel="stylesheet" type="text/css" href="ie8.css" />
      <![endif]-->
   </head>
   <body>
<div id="topo"> 
    <div id="title">
        <p>OIIIIIIII</p>
    </div>
 <div class="menu">
              <ul id="menuhor">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a href="#" title="Técnicas de layout com CSS"
>CSS Layout</a>
</li>
<li>
<a href="#" title="Técnicas de efeitos em links"
>CSS Links</a>
</li>
<li>
<a href="#" title="Construção de menus"
>CSS Menu</a>
</li>
<li>
<a href="#" title="CSS para impressão"
>CSS Print</a>
</li>
</ul>

     </div>
  </div>
   <div id="conteudoEsq">esq
      </div>
     <div id="colEsq">
    <div id="sepEsqcolCentral">
   <div id="colDir">
  <div id="conteudoDir">dir
</div>
<div id="sepcolCentralDir">
 <div id="colCentral">

            <div class="caixagrande">

            <img src="imagens/p1.png"  alt="logo" class="imgpos">
        </div>
     <br class="espaco"></br>
     <div class="caixamedia left">
         <div class="interior">
         <p>eswtrwerteswtewst</p>
         </div>
        </div>
     <div class="caixapequena right">
         <div class="interior">
         <p>eswtrwerteswtewst</p>
         </div>
        </div>
       <br class="espaco"></br>
     <div class="caixapequena left">
         <p>eswtrwerteswtewst</p>
        </div>
     <div class="caixamedia right">
         <p>eswtrwerteswtewst</p>
        </div>

  <h1>COLUNA CENTRAL</h1>
   <h3>Abaixo a folha de estilo 
deste layout:</h3>
  <div class="box1">dfgdfgdfgdfgdfgbr<br></br></div>
    ..............
     <h3>E abaixo o código HTML</h3>		
      .......
      </div>
    </div>
   </div>
  </div>  
 </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado
Estou com um pequeno problema que não consigo resolver , as divs no Firefox aparecem corretamente quando vou abrir o trabalho com IE simplesmente as divs desaparecem. Agradecia que alguém me ajuda-se.

 

Poste um print pra darmos uma olhada. Nem todos aqui utilizam Windows, então não tem como rodar o IE, por exemplo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

technohard    0

technohard
Postado

estou com um problema parecido ...

 

no chrome, ff e opera os divs ficam normal

 

mas no IE8 e 9

tive que usar um script para fazer o recurso border-radius

 

e funcionou no IE8 e 9 ... mas as vezes perde a cor da div

 

nao resolvi ainda

Compartilhar este post

Link para o post
Compartilhar em outros sites

Diéssica    140

Diéssica
Postado

Isso acontece porque o Internet Explorer ainda não se adaptou ao CSS3. Um problema de compatibilidade, já que nesse layout você arredonda as bordas com o border-radius, que é uma propriedade do CSS3. Pode ver que ele não identificou a propriedade e deixou a borda padrão (quadrada).

 

Você pode utilizar hacks direto no CSS. Se estiver interessado em arrumar, procure os no Google.

 

Sobre o menu: também é um problema de compatibilidade. Você deve estar usando alguma função que o Internet Explorer ainda não sabe ou tem dificuldade de ler.

 

E pode me explicar o "IE depois de activx"?

 

[]s,

www.diessicagurskas.com

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