Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Dae galera, estou quebrando a cabeça pra resolver esse problema:
Estou usando o Cufon no menu, mas no IE8 está ficando um margin-top ou padding-top...
Segue os prints:
Como deve ser: (IE9, Chrome, FF)
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.grupoamigobicho.com.br/outros.png&key=b8ae4fb32b835217eceb383526713a433583d8aba531bb9148b816b486825089" alt="outros.png" />
Como fica: (IE8)
/applications/core/interface/imageproxy/imageproxy.php?img=http://www.grupoamigobicho.com.br/ie8.png&key=0483eba81a5d38f848c4e58092252f05af69acf4a90215d8eb22ccc070832ca5" alt="ie8.png" />
CSS:
header#topo nav#menu {width: 100%; height: 70px; line-height: 70px; background: #b0dcfb; font-family:"BeautifulEveryTime"; font-size:20px;}
header#topo nav#menu li {height: 70px; display: table; text-align: center; float: left; margin: 0; padding: 0;}
header#topo nav#menu li a {text-decoration: none;}
header#topo nav#menu li.i1 {width: 100px;}
header#topo nav#menu li.i2 {width: 150px;}
header#topo nav#menu li.i3 {width: 150px;}
header#topo nav#menu li.i4 {width: 110px;}
header#topo nav#menu li.i5 {width: 120px;}
header#topo nav#menu li.i6 {width: 120px;}
header#topo nav#menu li.i7 {width: 120px;}
header#topo nav#menu li.i8 {width: 123px;}
header#topo nav#menu li.selected {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu li:hover {background: url('../images/menu-selected.png') no-repeat center 59px;}
header#topo nav#menu .menu-separador {width: 1px; height: 70px; display: table; background: url('../images/menu-separador.png') no-repeat top center; float: left;}
HTML:
<nav id="menu">
<div class="centro">
<ul>
<li class="i1 <?php if (!isset($_GET['pag'])){ echo 'selected'; } ?>">
<a href="index.php">HOME</a>
</li>
<div class="menu-separador"></div>
<li class="i2 <?php if (($_GET['pag']) == 'sobre-a-ong'){ echo 'selected'; } ?>">
<a href="index.php?pag=sobre-a-ong">SOBRE A ONG</a>
</li>
<div class="menu-separador"></div>
<li class="i3 <?php if (($_GET['pag']) == 'como-ajudar'){ echo 'selected'; } ?>">
<a href="index.php?pag=como-ajudar">COMO AJUDAR</a>
</li>
<div class="menu-separador"></div>
<li class="i4 <?php if (($_GET['pag']) == 'adote'){ echo 'selected'; } ?>">
<a href="index.php?pag=adote">ADOTE</a>
</li>
<div class="menu-separador"></div>
<li class="i5 <?php if (($_GET['pag']) == 'noticias'){ echo 'selected'; } ?>">
<a href="index.php?pag=noticias">NOTÍCIAS</a>
</li>
<div class="menu-separador"></div>
<li class="i6 <?php if (($_GET['pag']) == 'eventos'){ echo 'selected'; } ?>">
<a href="index.php?pag=eventos">EVENTOS</a>
</li>
<div class="menu-separador"></div>
<li class="i7 <?php if (($_GET['pag']) == 'produtos'){ echo 'selected'; } ?>">
<a href="index.php?pag=produtos">BRECÓ</a>
</li>
<div class="menu-separador"></div>
<li class="i8 <?php if (($_GET['pag']) == 'contato'){ echo 'selected'; } ?>">
<a href="index.php?pag=contato">CONTATO</a>
</li>
<div class="clear"></div>
</ul>
</div>
</nav>JS:
<script type="text/javascript">
Cufon.replace('h1,h2,h3');
Cufon.replace('nav#menu');
Cufon.replace('.titulo-adote');
Cufon.replace('.fonte');
Cufon.replace('.caption');
</script>Desabilitando o Cufón fica certinho...
Alguém sabe como resolver isso?
Obrigado!
@Buthy você usou css reset? Se tiver um link post ai pra galera que fica melhor pra ajudar.
>
Tenta atribuir um line-height fixo para as LI's!
Coloquei line-height:70px no li e não na nav#menu como estava... Mas não mudou nada...
Foi isso que você quis dizer?
>
@Buthy você usou css reset? Se tiver um link post ai pra galera que fica melhor pra ajudar.
Esse é o reset.css que eu uso:
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}:focus {
outline: 0;
}color:#818181;
line-height: 1;
} list-style: none;
} border-collapse: separate;
border-spacing: 0;
} font-weight: normal;
text-align: left;
} content: "";
} quotes: "" "";
}Obrigado!
O cufon está setado aonde? No A? No LI? Na UL? Deixe setado para o link (A), dê um display block nele, e sete uma altura com o line height do mesmo tamanho, veja se resolve!
tente usar essas meta tags no head do seu index:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />>
O cufon está setado aonde? No A? No LI? Na UL? Deixe setado para o link (A), dê um display block nele, e sete uma altura com o line height do mesmo tamanho, veja se resolve!
Dae Maykel!
Fiz o seguinte cara:
Cufon.replace('nav#menu ul li a');
Removendo essa linha do Cufon.replace ele fica alinhado corretamente...
Segue o CSS:
header#topo nav#menu {width: 100%; height: 70px; background: #b0dcfb;}
header#topo nav#menu li {height: 70px; line-height: 70px; display: block; text-align: center; float: left; margin: 0; padding: 0; font-family:"BeautifulEveryTime"; font-size:20px;}
header#topo nav#menu li a {text-decoration: none;}
Mas mesmo assim não funcionou...
>
tente usar essas meta tags no head do seu index:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="X-UA-Compatible" content="IE=6" />Nada Dárcio, não funcionou cara! :(
-----
Será que não é porque eu estou testando no IE Tester, ou tem nada a ver?
você está testando em localhost?..
se tiver tente executar sua aplicação em um servidor online, e veja como se comporta.
>
você está testando em localhost?..
se tiver tente executar sua aplicação em um servidor online, e veja como se comporta.
Sim, estou...
Coloquei no ar e ainda ficou com problema no IE8...
Segue o link:
http://www.grupoamigobicho.com.br/index.php
Se alguém puder testar no IE8 sem ser com o IETester e ver se o menu fica certo eu agradeço!
Algum moderador pode mover o tópico para Javascript? Como o problema é quando usa o Cufon, talvez lá alguem saiba como resolver...
abri aqui com IE e realmente ta meio bugado!
tenta utilizar float:left; nas divs talvez isso resolva, ja tive problemas parecido com IE e isso resolveu.
Coloquei a nav#menu com float:left e não resolveu não cara...
To pensando em deixar assim já...
Existe algum outro "cufon" que eu possa usar talvez???
bom eu não lembro de nenhum ... mas...
pergunte pro Google, talvez ele saiba de algum... :grin:
Tenta atribuir um line-height fixo para as LI's!