Css: Pq Borda Superior Some Neste Menu?

::..Hunter..:: · Janeiro 13, 2005

resolvi testar o Menu horizontal - Barra de navegação do site: http://www.maujor.com/tutorial/cssmenu.php e como ele aparece a esquerda resolvi colocar ele a direita e a borda superior sumiu, confira AQUI. As linhas que eu acrescentei foram:

position: absolute;

top: 55px;

right: 5px;

porque isso acontece, no posicionar diferente ele esconde a borda superior?

Perguntei pro maujor por e-mail mas ele não me respondeu.

Apelo pro santo fórum, hehe!

Amém!

iSoron · Janeiro 14, 2005

Isso não é erro no CSS, mas no Internet explorer.

Na verdade, era de se esperar. O IE não implementa bem as especificaçoes da w3c.

Olha o seu exemplo aqui no Mozilla:

user posted image

O que você pode fazer?

Rezar pros seus clientes usarem firefox.

[]'s

iSoron.

Illidan · Janeiro 14, 2005

É, IE é uma tranqueira mesmo...

Mas acho que tem como solucionar isso... bom, na pior das hipóteses, se não tiver, aquela borda superior faria muita falta? hehehe... ainda poderíamos tentar algum CSS hack aí...

Bom, antes disso, experimenta substituir esse CSS que você incluiu por isto:

float: right;

margin: 55px 5px 0px 0px;

Não sei se vai resolver, mas é uma tentativa...

Falou!

::..Hunter..:: · Janeiro 14, 2005

Illidan, tentei com o seu código e também não funfou, no Firefox funciona, mas o maldito IE e seus bugs só atrapalham a minha vida.

estou lendo estes site http://www.positioniseverything.net/explorer.html onde o cara coleciona bugs do IE, vou mandar um email pra ele com mais este bug que faz sumir a borda superior.

Illidan · Janeiro 14, 2005

Hunter, você poderia postar todo o CSS do menu?

::..Hunter..:: · Janeiro 14, 2005

Mandei um e-mail pro cara dos bugs do IE e ele prontamente me respondeu:

Look that the upper border disappears in the IE 6.

Add this to the CSS:

/* \*/

* html #menuhor li a {height: 1%;}

/* */

That is the Holly hack, and it will give the link

"layout" for IE, so the bug will not happen.

John

Agora tá 100% funcionando!!!!

o código completo ficou assim:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Documento sem título</title>

/* \*/

* html #menuhor li a {height: 1%;}

/* */

#menuhor {

padding: 3px 0;

margin:0;

float:right;

font:bold 10px "Trebuchet MS", sans-serif;

}

#menuhor li {

list-style: none; margin: 0;

display: inline;

}

#menuhor li a {

padding: 3px 0.1em;

margin:0;

border: 1px solid #f00; border-bottom: none;

background: #999;

text-decoration: none;

}

#menuhor li a:link {

color: #fff;

}

#menuhor li a:visited {

color: #fff;

}

#menuhor li a:hover {

color: #000; background: #ccc;

border-color: #000;

}

</style>

</head>

<body>

<li>

</li>

<li>

<a href="#" title="Área de tutorial CSS">CSS Tutorial</a>

</li>

<li>

<a href="#" title="Técnicas de layout com CSS"

>CSS Layout</a>

</li>

<li>

<a href="#" title="Técnicas de efeitos em links"

>CSS Links</a>

</li>

<li>

<a href="#" title="Construção de menus"

>CSS Menu</a>

</li>

<li>

<a href="#" title="CSS para impressão"

>CSS Print</a>

</li>

<li>

<a href="#" title="Importação de folhas de

estilo">CSS @import</a>

</li>

<li>

<a href="#" title="Fale conosco">Contato</a>

</li>

</ul>

</body>

</html>

Entrar

Css: Pq Borda Superior Some Neste Menu?

Pergunta

::..Hunter..::

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

iSoron

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

::..Hunter..::

Link para o comentário

Compartilhar em outros sites

Illidan

Link para o comentário

Compartilhar em outros sites

::..Hunter..::

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades