[Resolvido] Menú CSS fica estranho em IE7 e Ipad

pamellass · Fevereiro 2, 2012

Olá!

Tenho esse site aqui que estou fazendo:

http://www.centrodeestudosdador.com.br/um/index.php?page=home

Ele está certinho...só o botão "Sobre o cedm" está funcionando.

Mas fui testar no IE7 e os links ficaram caindo um degrau pro lado, tipo, ficaram alinhados horizontalmente, só q o proximo link sempre um "andar" pra baixo do q o anterior, bagunçando todo o restante do layout (n tem imagem pois o meu pc n deixou eu instalar o IE7 AQUI! Era lá no meu dentista q eu vi...=B)

E quando testei no Ipad de uma das clientes, o "CONTATO" caiu pra baixo só e foi pro começo da linha, abaixo do "Sobre..." e bagunçou todo layout tbm....

Como resolver isso, deixar esse menú estático ocupando sempre o mesmo lugar do mesmo jeito?!

XHTML:

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>

<body>
<div id="container">
<div id="espaco"></div>
<div class="header">
 <div id="busca">
 </div>
<div class="icons">
<a href="http://www.youtube.com/user/centrodeestudosdador" target="_blank"><img src="images/yt.gif" alt="Vídeos" title="Vídeos" border="none"
onMouseOver="this.src='images/yt_over.gif'"  
onMouseOut="this.src='images/yt.gif'"  
/></a>
<a href="https://www.facebook.com/#!/profile.php?id=100000966343953" target="_blank"><img src="images/fb.gif" alt="Facebook" title="Facebook" border="none"
onMouseOver="this.src='images/fb_over.gif'"  
onMouseOut="this.src='images/fb.gif'"  
/></a>
<a href="http://www.centrodeestudosdador.com.br/index.php?page=biblioteca-1" target="_blank">
<img src="images/bb.gif" alt="Biblioteca" title="Biblioteca" border="none"
onMouseOver="this.src='images/bb_over.gif'"  
onMouseOut="this.src='images/bb.gif'"  
/></a>
<a href="http://www.centrodeestudosdador.com.br/e-learning" target="_blank">
<img src="images/el.gif" alt="E-learning" title="E-learning" border="none"
onMouseOver="this.src='images/el_over.gif'"  
onMouseOut="this.src='images/el.gif'"  
/></a>
<a href="Templates/contato.html" target="_blank">
<img src="images/tel.gif" alt="Contato" title="Contato" border="none"
onMouseOver="this.src='images/tel_over.gif'"  
onMouseOut="this.src='images/tel.gif'"  
/></a>
</div>
</div>
<div id="banner"></div>
<?php
if(isset($_GET['page']) && $_GET['page'] != "") {
$page = $_GET['page'];
$page = str_replace(".", "", $page);
$page = str_replace("firstime", "home", $page);
$page = "". $page .".php";
if(file_exists($page)) {
include("$page");
}
else {
include("404.php");
}
}
else {
include("home.php");
}       
?>

<ul class="navmain">
   <li><a href="?page=sobre">Sobre o CEDM</a>
</li>
   <li><a href="?page=clinica">Clínica</a>
</li>
<li><a href="?page=cursos">Cursos</a>
</li>
<li><a href="?page=sports">Sports</a>
</li>
   <li><a href="?page=prevencao">Prevenção da Dor</a>
</li>
<li><a href="?page=estudos">Centro de Estudos</a>
</li>
<li><a href="?page=contato">Contato</a>
   </li>
</ul>

<div class="content">
<div class="servicos">
<div class="boxhomeS">
	<a href="#" class="clinica"></a>
</div>
   <div class="boxhomeS">
	<a href="#" class="cursos"></a>
</div>
   <div class="boxhomeS">
	<a href="#" class="sports"></a>
</div>
</div>
<div class="chamadas">
	<div class="boxhome">
	<img src="images/maciel_fisioterapeuta.jpg"  alt="Maciel Murari Fernandes" title="Maciel Murari Fernandes" />
       <h1>EQUIPE</h1><p><span class="maiorbox">Maciel Murari Fernandes</span>, fisioterapeuta fundador do CEDM</p>
   	<br />
   	<a href="formacao.html">Saiba mais ></a>
	</div>
	<div class="boxhome">
	<img src="images/alunos_bcf.jpg"  alt="Ex-Alunos BCF" title="Ex-Alunos BCF" />
	<h1>EX-ALUNOS</h1><p>Confira sobre os ex-alunos do Curso de Biomecânica e Cinesiologia Funcional</p>
    	<a href="cvs.html">Saiba mais ></a>
	</div>
</div>
<div class="mapa"></div>
<div class="nav_bottom">
<table>
<tr>
<th><a href="?page=sobre">Sobre o CEDM</a></th>
<th><a href="?page=clinica">Clínica</a></th>
<th><a href="?page=cursos">Cursos</a></th>
<th><a href="?page=sports">Sports</a></th>
<th><a href="?page=prevencao">Prevenção da Dor</a></th>
<th><a href="?page=estudos">Centro de Estudos</a></th>
<th><a href="?page=contato">Contato</a></th>
</tr>
<tr>
<td><a href="?page=filosofia">Filosofia</a></td>
<td><a href="?page=exp_clinica">Experiência</a></td>
<td><a href="?page=exp_cursos">Experiência</a></td>
<td><a href="?page=exp_sports">Experiência</a></td>
<td><a href="?page=materias">Matérias</a></td>
<td><a href="?page=bibli">Biblioteca</a></td>
<td><a href="?page=local">Localização</a></td>
</tr>
<tr>
<td><a href="?page=historia">História</a></td>
<td><a href="?page=serv_clinica">Serviços</a></td>
<td><a href="?page=formacao_dor" class="dor_main">Formação em Dor</a></td>
<td><a href="?page=serv_sports">Serviços</a></td>
<td><a href="?page=dicas">Dicas</a></td>
<td><a href="?page=elearning">E-Learning</a></td>
<td><a href="?page=duvidas">Telefones</a></td>
</tr>
<tr>
<td><a href="?page=equipe">Equipe</a></td>
<td><a href="?page=pbf_clinica">Avaliação</a></td>
<td><a href="?page=cursos">Cursos</a></td>
<td><a href="?page=pbf_sports">Avaliação</a></td>
<td><p> </p></td>
<td><a href="?page=grupos">Grupos de Estudo</a></td>
<td><p> </p></td>
</tr>
<tr>
<td><p> </p></td>
<td><a href="?page=tratamento_c">Tratamento</a></td>
<td><a href="?page=agenda">Agenda</a></td>
<td><a href="?page=tratamento_s">Tratamento</a></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p> </p></td>
<td><p> </p></td>					
<td><a href="?page=inscricoes">Inscrições</a></td>
<td><a href="?page=aprimoramento">Aprimoramento</a></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
<tr>
<td><p> </p></td>
<td><p> </p></td>					
<td><a href="?page=exalunos">Ex-alunos</a></td>
<td><p> </p></td>
<td><p> </p></td>
<td><p> </p></td>
</tr>
</table>
<br />
<br />
<p> © CEDM - Centro de Estudos da Dor e do Movimento</p>
<br />
</div>
</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

/* reset styles */
* {
padding: 0;
margin: 0;
font-size: 100%;
font-weight: normal;
color:#1a1e46;
}
/* end reset styles */

body {
background-color:white;
}
#espaco {
height:10px;
}
#container {
width:960px;
margin:0 auto 0 auto;
background:white center url(../images/bluedark.jpg) repeat-y;
padding-left:150px;
padding-right:150px;
}
.header {
width:960px;
height:173px;
background-image:url(../images/header.gif);

}
.icons {
height:25px;
width:200px;
margin:80px 17px 10px 750px;
text-align:left;
position:absolute;
}
#banner {
width:960px;
height:182px;
background:top left url(../images/banner.gif) no-repeat;
}

/*acaba aqui elementos não mutáveis*/

.navmain {
width:960px;
height:35px;
list-style-type: none;
background-image:url(../images/nav.jpg);
}
.navmain ul {
float: left;
   width: 100%;
list-style:none;
}
.navmain ul li{
display: inline;
}	
.mavmain li {
padding: 7px 28px 7px 28px;
   float:left;
font: 0.98em Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
height:21px;
color:#232559;
}

.navmain a {
padding: 7px 28px 7px 28px;
   float:left;
font: 0.98em Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
}
.navmain a:hover {
height:21px;
background:#232559;	
color:white;
}	
.on {
padding: 7px 28px 7px 28px;
   float:left;
font: 0.98em Arial, Helvetica, sans-serif;
text-align:center;
text-decoration:none;
height:21px;
background:#232559;	
color:white;
}

/*acaba aqui navmain*/

/*internas*/
.conteudo {
width:960px;
}
.submenu {
width:239px;
height:617px;
background:white url(../images/bluev.jpg) repeat-x;
float:left;
}
.navsub {
position:relative;
text-align:center;
font: 1em Arial, Helvetica, sans-serif;
list-style-type:none;
padding-top: 30px;

}

.navsub li {
padding-top: 20px;
padding-bottom: 20px;
border-bottom:white 1px solid;

}
a.inicial {
font: 0.76em Arial, Helvetica, sans-serif;
color:#232559;
border:none;
}
.navsub a {
text-decoration:none;
color:white;
}
.navsub a:hover {
text-decoration:underline;
}
.texto {
padding-left:239px;
width:721px;
height:100%;
background:right bottom url(../images/conteudo.gif) no-repeat #efefef;
}
.texto h1 {
padding:45px 0 30px 45px;

}
.texto h2 {
font: italic 1.2em Arial, Helvetica, sans-serif;
padding:5px 0 20px 45px;
color:#378ec3;
}
.texto p {
padding:0 45px 20px 45px;
font: 0.85em Arial, Helvetica, sans-serif;
line-height:23px;
color:#333;

}
.texto ul {
padding:0 45px 20px 45px;
font: 0.85em Arial, Helvetica, sans-serif;
line-height:23px;
color:#333;
}
.white {
height:400px;	
}
span.italico {
font-style:italic;
}
span.bold {
font:#333 bold underline Arial, Helvetica, sans-serif;
}

/*home*/
.chamadas {
width:960px;
height:286px;
}
.boxhome {
margin:0 40px 30px 40px;
padding:10px;
width:378px;
height:138px;
background:url(../images/fundo_box.gif) center no-repeat;
float:left;
}
.boxhome p {
font:normal 0.9em Arial, Helvetica, sans-serif;
color:#202559;
padding-bottom:10px;
}
.boxhome img {
float:left;
margin-right:10px;
}
h1 {
   font:normal 1.5em Arial, Helvetica, sans-serif;
padding-bottom:6px;
padding-top:9px;
color:#459dd2;
}
.boxhome a {
font:italic 14px Arial, Helvetica, sans-serif;
color:#459dd2;
text-align:right;
padding-right:10px;
text-decoration:none;

}
.boxhome a:hover {
text-decoration:underline;
}
.servicos {
width:960px;
height:342px;
}
.boxhomeS {
padding:10px;
margin:84px 0 84px 40px;
width:244px;
height:224px;
background:url(../images/fundo_boxS.gif) no-repeat;
float:left;
}
a.clinica {
width:244px;
height:224px;
background:top left url(../images/clinica.jpg) no-repeat;
float:left;
}
a.clinica:hover {
padding:10px;
width:244px;
height:224px;
background-position: -244px 0;
float:left;
}
a.cursos {
width:244px;
height:224px;
background:top left url(../images/cursos.jpg) no-repeat;
float:left;
}
a.cursos:hover {
padding:10px;
width:244px;
height:224px;
background-position: -244px 0;
float:left;
}
a.sports {
width:244px;
height:224px;
background:top left url(../images/sports.jpg) no-repeat;
float:left;
}
a.sports:hover {
padding:10px;
width:244px;
height:224px;
background-position: -244px 0;
float:left;
}

/*acaba aqui elementos home*/


.mapa {
background:center bottom url(../images/mapa.jpg) no-repeat;
padding-bottom:8px;
height:63px;
}

table {
width:960px;
font: 0.75em Arial, Helvetica, sans-serif;
border-spacing: 0;

}
th {
height: 20px;
background-color:#9cc6e7;
padding:9px;
font-size:13px;	
}
tr {

height:10px;
text-align:center;

}	
td {
padding-top:10px;
width:138px;
text-align:center;

}
table a {
text-decoration:none;
color:#232559;

}
table a:hover {
color: #378ec3;
text-decoration:underline;
}

.nav_bottom {
background:#dcdcdc;
height:230px;
width:960px;
}

.nav_bottom p {
font:bold 9px Arial, Helvetica, sans-serif;
text-align:center;
padding-top:10px;
}

th a {
color:#232559;
}

/*acaba aqui footer*/

#busca {
position:absolute;
width:500px;
height:34px;
z-index:1;
left: 744px;
top: 125px;
}

Giovani · Fevereiro 2, 2012

.navmain {
       width:960px;
       height:35px;
       list-style-type: none;
       background-image:url(../images/nav.jpg);
}
.navmain ul {
       float: left;
   width: 100%;
       list-style:none;
}
.navmain ul li{
display: inline;
}       
.mavmain li {
       padding: 7px 28px 7px 28px;
   float:left;
       font: 0.98em Arial, Helvetica, sans-serif;
       text-align:center;
       text-decoration:none;
       height:21px;
       color:#232559;
}

.navmain a {
       padding: 7px 28px 7px 28px;
   float:left;
       font: 0.98em Arial, Helvetica, sans-serif;
       text-align:center;
       text-decoration:none;
}
.navmain a:hover {
       height:21px;
       background:#232559;     
       color:white;
}

.navmain ul com float left? Qual o motivo disso?

.navmain ul li utiliza o float left e o que é .mavmain li?

pamellass, seu código tem vários errinhos. Não adianta a gente ficar te ajudando aqui. Vale muito o seu esforço e com certeza o pessoal vai sempre tentar ajudar, mas recomendo estudar um pouco mais.

pamellass · Fevereiro 2, 2012

Giovanni,

Estou estudando como posso...

É que é dificl mesmo, é o primeiro site que eu faço, acho que é normal ter errinhos...

E como estudei por conta propria e sozinha (com livros e sites), não tem quem me corrigir...Para mim estava tudo certo, pois funcionou tranquilamente no IE 9 e 8, Firefox, Chrome e Safari.

Achava que o Fórum servia para isso, para quem sabe ir auxiliando quem está aprendendo...

Float left no .navmain ul, agora que você falou, realmente, vi que não tem sentido mesmo...

E colocar o "display:inline" apenas no ul.navmain li né?

-----------------------------

mas não, não deu certo.....beleza, vou dar uma estudada.....mas é q n estou com muito tempo, já to atrasada pra entregar e ainda falta mto.... =b já percebi q eu devria ter treinado mais antes de fechar com alguém....mas, agora já foi...

eu só queria saber o que pode tar causando o bug q dá no IE7...

Giovani · Fevereiro 2, 2012

Trabalhe com float nos li's e defina uma altura o ul, veja se funciona.

Guilherme Oderdenge · Fevereiro 2, 2012

O HTML do menu:

<ul id="navmain">
   <li><a href="?page=sobre">Sobre o CEDM</a></li>
   <li><a href="?page=clinica">Clínica</a></li>
   <li><a href="?page=cursos">Cursos</a></li>
   <li><a href="?page=sports">Sports</a></li>
   <li><a href="?page=prevencao">Prevenção da Dor</a></li>
   <li><a href="?page=estudos">Centro de Estudos</a></li>
   <li><a href="?page=contato">Contato</a></li>
</ul>

Note que eu organizei seu CSS e alterei de class para id. Por quê?

Primeiro: o nome da regra ("navmain") está indicado como "main", e semanticamente falando, dá a entender que esse é o menu navmain exclusivo;
Segundo: quando não repetimos uma regra, o correto é o uso de id.

Agora, ao CSS:

#navmain {        
  background: url(../images/nav.jpg);
  width: 960px;
  height: 35px;
  list-style: none;

#navmain ul {
  width: 100%;
  float: left;
}

#navmain ul li {
  padding: 7px 28px;
  float: left;
}

#navmain ul li a {
  text-align: center;
  text-decoration: none;
}

#navmain ul li a:hover {
       background: #232559;     
       color: #fff;
}

Tente utilizar o código acima, onde arrumei muitos errinhos de validez, padrões e organização.

Lembre-se, Pamela, que se você quer que os menus preencham 100% do espaço horizontal do seu site, você deve usar a matemática para tirar as medidas uniformemente.

Diéssica · Fevereiro 2, 2012

Eu só aprendi a lidar com esses problemas de incompatibilidade na prática.

Quando tiver problemas, sempre valida e revisa o código para ver se está fazendo da maneira certa.

No último dos casos, onde tu já não tem mais saída com a renderização diferente no Internet Explorer, utiliza os comentários condicionais e faz uma formatação específica para o IE :thumbsup:

:seta: Validação HTML (W3C)

:seta: Validação CSS (W3C)

:seta: Comentários condicionais (Maujor)

Sugiro também que determine as cores em hexadecimal:

body {
       background-color:white;
}

body {
       background-color:#FFF;
}

pamellass · Fevereiro 2, 2012

Deu certo no I7, ficou assim:

#menu {
width:960px;
height:35px;
background:url(../images/nav.jpg);
}
ul.navmain {
list-style:none;

}
ul.navmain li {
float:left;
}
ul.navmain a {
display:block;
text-decoration:none;
font:0.98em Arial, Helvetica, sans-serif;
color:#232559;
padding:8px 25px 8px 25px;
}
.navmain a:hover {
background:#232559;	
color:white;
}	
.on {
background:#232559;	
color:white;
font:0.98em Arial, Helvetica, sans-serif;
padding:8px 25px 8px 25px;
}

mas agora na página interna, o conteúdo desceu...acho que era por isso que eu tinha colocado 'float:left' no ".navmain ul"! No firefox e no crhome ele fica direitinho, mas no IE9, o conteudo desce e só aparece no final do submenú...vou tentar resolver aqui!

muito obrigada!!

-----------------------

isso foi para o Giovani!

já consegui subir o conteúdo de novo, tudo ok, obrigada!

--------------------------

Guilherme e Diéssica, só agora q vi seus posts! Vou atualizar aqui com o q vcs falaram, muito obrigada pelas dicas! ;)

Entrar

Arquivado

[Resolvido] Menú CSS fica estranho em IE7 e Ipad

Recommended Posts

pamellass 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

pamellass 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Guilherme Oderdenge 42

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diéssica 140

Compartilhar este post

Link para o post

Compartilhar em outros sites

pamellass 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JAVA - Orientação para Invalidar Sessão

printf iniciante básico

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante