Ir para conteúdo

POWERED BY:

Arquivado

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

Buthy

Problemas com Cufón, fica um margin no IE8

Por , em Javascript

Recommended Posts

Buthy    0

Buthy
Postado

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)

outros.png

 

Como fica: (IE8)

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buthy    0

Buthy
Postado

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;
}
body {
color:#818181;
   line-height: 1;
}
ol, ul {
   list-style: none;
}
table {
   border-collapse: separate;
   border-spacing: 0;
}
caption, th, td {
   font-weight: normal;
   text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
   content: "";
}
blockquote, q {
   quotes: "" "";
}

 

Obrigado!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dárcio Gomes    10

Dárcio Gomes
Postado

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" />

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buthy    0

Buthy
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buthy    0

Buthy
Postado

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...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dárcio Gomes    10

Dárcio Gomes
Postado

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.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Buthy    0

Buthy
Postado

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???

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito