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!
Carregando comentários...