Jump to content

  2. →
  3. →
  4. →

Photo

Problema No Ie

Started By Hellrider, 06/01/2005, 16:44

  • Faça o login para participar
18 replies to this topic

#1 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 06/01/2005, 16:44

Olá, estou projetando um layout em Tableless pra aprendizado do mesmo, mas acontece um peuqeno problema no IE pra variar um pouco né?! 

#left {
	position: relative;
	left: 18px;
	top: 0;
	float: left;
	width: 575px;
	HEIGHT: 100%;
	background: #fff;
	border: 1px solid #ccc;
	margin: 0;
	text-align: center;
}

O não aparece em 100% verticalmente no restante da tela, ele somente engloba o conteúdo da div "left". Existe algum hack pra esse problema?
"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#2 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 06/01/2005, 17:38

Engraçado, quando se tem problemas com o IE, já perguntam logo se tem hack. :lol:

Coloque aqui o seu código fonte e também o CSS para darmos uma analisada.

Mas dou um toque de anti-mão: na div que configura a parte abaixo da div "left" (no caso, o rodapé), coloque a propriedade: clear: both;

Qualquer coisa, posta aí os dados.


Abraços !

#3 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 07/01/2005, 13:36

Ta ae:


<body>
<div id="all">
<div id="topo">
<h1>&lt;Topo /&gt;</h1>
</div>
<div id="content">
<div id="left">
<img src="imagens/barra-painel.jpg" class="barra" />
<div id="col-esq">
<img src="imagens/img.jpg" alt="Imagem" class="foto-col-esq" />
<span class="description">Descrição da foto ao lado.</span>  
</div>
<div id="marquee-news">
<marquee direction="up" scrollamount="1">
<ul>
<li><a class="impar" href="#"><img src="imagens/seta.menu-news.gif" />Microsoft libera versão beta ...</a></li>
<li><a class="par" href="#"><img src="imagens/seta.menu-news.gif" />AMD lança novo processador pa...</a></li>
<li><a class="impar" href="#"><img src="imagens/seta.menu-news.gif" />Pesquisador indiano cria PC c...</a></li>
<li><a class="par" href="#"><img src="imagens/seta.menu-news.gif" />Brasil conta com serviço de te...</a></li>
</ul>
</marquee>
</div>  
</div>
<div id="right">
<h2>JumpMenu</h2>
<select id="jumpmenu">
<option>-->Selecione<--</option>
<option>----------</option>
<option value="http://www.wmonline.com.br"<!--URL do docuemento-->WMOnline<!--Subsitua pelo nome da página--></option>
<option value="http://www.imasters.com.br">Imasters</option>
</select>
<h3>Banners</h3>
<div id="banners">
<ul>
<li><a href="#"><img src="imagens/banner.gif" /></a></li>
          <li><a href="#"><img src="imagens/banner.gif" /></a></li>
</ul>
</div>
</div>
</div>  
</div>
</body>

E o CSS:

[code=auto:0]
body {
background: #ebebeb;
font: 10pt arial;
margin: 0;
}

#all {
width: 760px;
height: 100%;
margin: 0 auto;
text-align: left;
}

img {
border: 0;
}
/*AQUI COMEÇA O LAYOUT*/

/*TOPO*/
#topo {
position: absolute;
left: 0;
top: 0;
background: url(imagens/topo.jpg) 0 0 no-repeat;
width: 100%;
height: 124px;
padding: 30px 0 0 0;
}

#topo h1 {
font: 40pt courier;
text-transform: lowercase;
color: #000;
}

/*CONTEUDO*/
#content {
position: absolute;
left: 0;
top: 130px;
width: 760px;
height: 100%;
margin: 0;
padding: 2px;
}

/*COLUNA ESQUERDA*/
#left {
position: relative;
left: 18px;
top: 0;
float: left;
width: 575px;
height: 100%;
background: #fff;
border: 1px solid #ccc;
margin: 0;
text-align: center;
}

/*BARRA SUPERIOR DA DIV*/
.barra {
width: 98%;
}

/*COLUNA ESQUERDA DO PAINEL*/
#col-esq {
position: relative;
left: 10px;
top: 5px;
float: left;
background: #ebebeb;
width: 48%;
height: 120px;
padding: 1px;
margin-bottom: 2px;
text-align: justify;
overflow: auto;
}

.foto-col-esq {
float: left;
margin: 0 2px 1px 0;
width: 90px;
height: 90px;
}

/*COLUNA DIREITA DO PAINEL ONDE ESTÁ O MARQUEE*/
#marquee-news {
position: relative;
top: 5px;
right: 10px;
float: right;
width: 48%;
height: 120px;
padding: 1px;
background: #ebebeb;
text-align: left;
}

#marquee-news marquee {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}

#marquee-news ul {
list-style: none;
margin: 0;
}

#marquee-news li {
padding: 0;
margin: 0;
}

#marquee-news h2 {
font: 10pt courier;
color: #09c;
background: #ccc;
text-align: center;
padding: 1px;
margin: 0;
}
/*LINKS IMPARES DO MARQUEE*/

a.impar, a.impar:visited {
display: block;
background: #ccc;
text-decoration: none;
font: 10pt arial;
color: #000;
width: 100%;
}

a.impar:hover {
background: #dedede;
}

a.impar:active {
color: #f00;
}

/*LINKS PARES DO MARQUEE*/
a.par, a.par:visited {
text-decoration: none;
color: #000;
display: block;
width: 100%;
}

a.par:hover {
background: #ccc;
}

a.par:active {
color: #f00;
}

/*COLUNA DIREITA*/
#right {
position: relative;
width: 163px;
float: right;
margin: 0;
background: transparent;
text-align: center;
border-left, : 1px solid #fff;
}

#right h2 {
background: url(imagens/right.jpg) 0 0 no-repeat;
font: 13pt courier;
color: #fff;
width: 163px;
height: 23px;
text-align: right;
margin: 0;
}

#right h3 {
background: url(imagens/right.jpg) 0 0 no-repeat;
font: 13pt courier;
color: #fff;
width: 163px;
height: 23px;
text-align: right;
margin: 2px 0 2px 0;
}

/*JUMP MENU*/
#jumpmenu {
position: relative;
height: 20px;
width: 100%;
margin-top: 2px;
}

/*BANNERS*/
#banners {
border-right: 1px solid #fff;
}
#banners ul {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}

#banners li {
margin-bottom: 3px;
}

:)
"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#4 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 07/01/2005, 15:50

Não deu pra identificar o real problema. Não possuo as imagens que são usadas lá, e o Firefox as ignora na hora de carregar, agora contrário do IE que colocar um "X" enorme.

Tire umas screens do IE e Firefox apontando o erro.


[]s

#5 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 07/01/2005, 21:19

Ae está o Screen Shot com erro:

A div branca é a que está com o o conteúdo, ou seja - #left - que deveria ficar em 100% abaixo da tela, ou não?!No Opera fica bão.

Attached Files

  • Attached File  sc2.gif   17.75KB   0 downloads

Edição feita por: Hellrider, 07/01/2005, 21:21.

"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#6 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 07/01/2005, 21:22

E aqui no Opera:

Attached Files

  • Attached File  sc1.gif   21.12KB   0 downloads

Edição feita por: Hellrider, 07/01/2005, 21:23.

"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#7 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 07/01/2005, 21:47

A resposta está na minha primeira mensagem. Você nem seguiu ela ! <_<

Bom, acrescente esta linha logo abaixo do fechamento da tag div left (<div id="left"></div>) :

<div id="pe">&nbsp;</div>

E no CSS coloque isso:

#pe {
   clear: both;
}


[]s

#8 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 08/01/2005, 16:28

Ae, não funcionou cara. :unsure:

Edição feita por: Hellrider, 08/01/2005, 16:37.

"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#9 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 08/01/2005, 21:14

Eu testei aqui no código que você me passou e deu certinho !

#10 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 10/01/2005, 13:51 

...
</marquee>
</div>
</div><!--Final do div left-->
<div id="pe">&nbsp;</div><!--Correção pro IE-->
<div id="right">
<h2>JumpMenu</h2>
...

CSS:

...
#pe {
	clear: both;
	float: left;}
...

Obs. Coloquei o "float: left" porque a coluna "#right" ficava em baixo da div "#pe".

O que está errado??
"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#11 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 10/01/2005, 14:16

Posted Image

</marquee>
</div><!-- Final do div left -->
<div id="pe">&nbsp;</div>
</div>
<div id="right">


Não coloque o float, pois eles são um tanto contrários:

#pe {
  clear: both;
}


[]s

#12 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 10/01/2005, 23:16

Olha como fica sem o float:

Attached Files

  • Attached File  sc.gif   14.51KB   0 downloads

"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#13 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 10/01/2005, 23:37

Hellrider, presta bastante atenção Posted Image

Você colocou a div pé no lugar errado, você colocou depois do fechamento do content, sendo que era pra estar depois do fechamento do left:

O código que você postou:

...
</marquee>
</div>
</div><!--Final do div left-->
<div id="pe">&nbsp;</div><!--Correção pro IE-->
<div id="right">
<h2>JumpMenu</h2>
...

...
#pe {
clear: both;
float: left;}
...

E o código que eu postei:

</marquee>
</div><!-- Final do div left -->
<div id="pe">&nbsp;</div>
</div>
<div id="right">


#pe {
 clear: both;
}

Sentiu a diferença ? Posted Image

#14 Hellrider

Hellrider

    Normal

  • Usuários
  • 85 posts
  • Sexo:Não informado
  • Localidade:Bertioga SP

Posted 11/01/2005, 12:47

Senti que o que você colocou como final do div #left é o final do div #marquee-news.

...
<li><a class="impar" href="#"><img src="imagens/seta.menu-news.gif" />Pesquisador indiano cria PC c...</a></li>
<li><a class="par" href="#"><img src="imagens/seta.menu-news.gif" />Brasil conta com serviço de te...</a></li>
</ul>
</marquee>
</div><!-- Final do div marquee-news -->
</div><!--Final do div left--><div id="pe">&nbsp;</div><!--Correção pro IE-->
<div id="right">
<h2>JumpMenu</h2>
...

Ow Kaled, mil desculpas por te encher tanto o saco, vou tentar resolver esse problema sozinho. Muito obrigado por tudo :D
"A fábrica do futuro terá apenas dois empregados, um homem e um cachorro. O homem estará lá para alimentar o cachorro. O cachorro estará lá para impedir que o homem toque no equipamento."

Warren G. Bennis, escritor norte-americano, 1922

#15 Kaled

Kaled

    Unconditional

  • Usuários
  • 507 posts
  • Sexo:Não informado

Posted 11/01/2005, 12:59

OK, o código que eu tô vendo é diferente do seu.

Então, no seu caso, coloque depois do fechamento da tag div marquee.

[]s
Voltar para CSS & Semântica (Tableless)


0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → HTML, CSS e Metodologias
  4. → CSS & Semântica (Tableless)
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq