Ir para conteúdo

POWERED BY:

Arquivado

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

Bruno_bl

Layout no IE7!

Por , em Desenvolvimento frontend

Recommended Posts

Bruno_bl    0

Bruno_bl
Postado

Galera, to fazendo o layout de um site, sou novato com CSS, no IE6 o único problema que tive foi com o Hover, mas peguei csshover.htc e ficou beleza, tá tudo certinho, no FF, no IE6, no Opera, etc.. engraçado que não precisei fazer nada diferente nos comandos css pra funcionar no IE6.. vi muita gente reclamando, mas com IE6 meu único problema foi o hover (por enquanto)

 

mas agora, quando cheguei em casa e fui ver aqui, no meu IE que é a versão 7.. uma caixa fica fora do lugar, e não sei como corrigir, já tentei alguns hacks, tentei colocar asterístico na frente dos comandos, nada adianta.... preciso muito de algo que resolva esse problema http://forum.imasters.com.br/public/style_emoticons/default/closedeyes.gif

 

Aí vai o CSS:

 

#principal {
   behavior: url(csshover.htc);
   width:642px;
   height:517px;
   position:absolute;
   left:50%;
   background:#f0f0f0;
   margin-left:-321px;
   font-size:12px;
}

/*====MENU DE CIMA==== */

#menu ul {
	margin-left:20px;
	height:1em;
	padding:0px;
	margin:0px;
	float:left;
	width:100%;
	background-color:#FFFFFF;
	list-style:none;
	font-size: 11px;
	font-family: arial, verdana;
}
#menu ul li {
   display: inline;
   height:1px;
}

/*====MENU DE CIMA - VISUAL DO LINK====*/

#menu ul li a {
   padding: 0px 5px;
   float:left;
   height:2em;
   background-color:#FFFF;
   color:#333;
   text-decoration:none;
}
#menu ul a:hover {
   height:1.2em;
   background-color:#E9EEF2;
   color:#006699;
}

/*==== CAIXA- NOTÍCIAS==== */

#noticias {

   background-image: url("barra_vertical.gif"); 
   background-repeat:no-repeat;
   background-position: top left;
   top:197px;
   width:247px;
   height:144px;
   float:left;
   position:absolute;
   bottom:100px; 
   background-color:#FF0000;
}

#noticias p {
   font-size:12px;
   margin-top:2px;
   margin-left:6px;
}

/*==== CADA NOTÍCIA===*/
#noticia1 {
   margin-left:4px;
   position:absolute;
   float:left;
   top:22px;
   height:38px;
   width:243px;
   background-color:blue;
   font-size:12px;
}
#noticia1:hover {
   background-color:yellow;
}

#noticia2 {
   margin-left:4px;
   position:absolute;
   float:left;
   top:60px;
   height:38px;
   width:243px;
   background-color:blue;
   font-size:12px;
}
#noticia2:hover {
   background-color:yellow;
}

#noticia3 {
   margin-left:4px;
   position:absolute;
   float:left;
   top:98px;
   height:38px;
   width:243px;
   background-color:blue;
   font-size:12px;
}
#noticia3:hover {
   background-color:yellow;
}

 

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" lang="pt-br">
<link rel= "stylesheet" href = "meuestilo_center.css">
<head>
		<title>Centralizando</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
	  <div id="principal">


				<div id= "menu">
<ul>
<li><a href="">Instituconal</a></li>
<li><a href="">Nossos Serviços</a></li>
<li><a href="">Especialidade Médicas</a></li>
<li><a href="">Convênios e Plano de Saúde</a></li>
<li><a href="">Especialidades Médicas</a></li>
</ul>
</div> 

<div id="noticias">
<p>Notícias</p>

<div id="noticia1">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
<div id="noticia2">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
<div id="noticia3">Nao tinha medo tal joao de santo cristo era o que todos diziam quando ele se perdeu
</div>
</div> 

		   
</div>
</body>
</html>

*as cores da caixa é claro que não são essas http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

 

 

Aí vai duas screens comparativas:

 

no Firefox, Opera fica assim:

 

 

Imagem Postada

 

 

no IE7 fica assim:

 

Imagem Postada

 

*ignorem a má qualidade das imagens.. hehe, o único problema mesmo é a caixa, o menu horizontal superior está certo em ambos

 

 

 

Então.. sou novato ainda, não consegui resolver o problema sem ter um conhecimento mais avançado.. se alguém poder me ajudar, ficarei grato.. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Por um acaso, num tem absolute demais ai não? ^^

#noticias {
   position:relative; /*muda isso aqui*/
}
Só faz isso aqui cara.. troca esse position.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno_bl    0

Bruno_bl
Postado

Nossa obrigado galera... http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Eu mudei o position como foi dito e está tudo certo agora

 

Mais uma dúvida...

fiz a seguinte alteração no código do Menu agora, no Width e Padding:

 

#menu ul {
	margin-left:20px;
	height:1em;
	padding:0px 90px;
	margin:0px;
	float:left;
	width:642px;
	background-color:#FFFFFF;
	list-style:none;
	font-size: 11px;
	font-family: arial, verdana;
}
#menu ul li {
   display: inline;
   height:1px;

Fiz isso porque eu terei que dar espaçamento antes do menu, já que ali irá ter uma imagem pequena (logo), mas agora a bruxa é o IE6.. que quando dou espaçamento, ele faz isso no menu mas também aumenta a área da caixa principal (que deveria estar limitada em 642px de largura), além disso, também percebi que ele deixa um espaçamento indesejável no IE6 abaixo do menu(isso desde antes até, mas só agora percebi).

Grato desde já. ;)

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