Publicado em 2 de fev.

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

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;
}

Discussão (6)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...