Ir para conteúdo

POWERED BY:

Arquivado

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

Georges Langlois

Incompatibilidade com IE6

Recommended Posts

Pessoal, estou tendo sérios problemas em tornar um código aqui compatível com o IE6

Esse site aqui:

 

http://br.geocities.com/the_pretzels88/gloss/

 

fica exatamente do jeito que eu quero no firefox, mas no IE6 desfaz tudo..

 

estou usando css e Library no site

O Azul é HTML e o Verde é o CSS

 

<body>

<div id="geral"><!-- #BeginLibraryItem "/Library/layout.lbi" -->

<link href="css/default.css" rel="stylesheet" type="text/css" media="all" />

 

<!-- MENU -->

<div class="pro_line2">

<ul class="select">

<li><a href="#nogo"><b>HOME</b></a></li>

<li><a href="#nogo"><b>A EMPRESA</b></a></li>

<li><a href="#nogo"><b>PRODUTOS</b><!--[if IE 7]><!--></a><!--<![endif]-->

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul class="sub">

<li><a href="#nogo"><strong>EMPRESARIAL</strong></a></li>

<li><a href="#nogo"><strong>SERVIÇO</strong></a></li>

<li><a href="#nogo"><strong>CASUAL</strong></a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><a href="#nogo"><b>CLIENTES</b></a></li>

<li><a href="#nogo"><b>CONTATO</b></a></li>

</ul>

</div>

<!--FIM DO MENU -->

-

<div id="logo">

<div><img src="images/back1.jpg" width="772" height="71" /></div>

<div><img src="images/back2.jpg" /></div>

<div><img src="images/back3.jpg" /></div>

<div><img src="images/back4.jpg" /></div>

<div><img src="images/back5.jpg" /></div>

<div><img src="images/back6.jpg" /></div>

 

 

 

 

<div id="meio">

<div><img src="images/back7.jpg" /></div>

<div><img src="images/back8.jpg" /></div>

</div>

<div><img src="images/back9.jpg" /></div>

</div>

 

 

<!-- #EndLibraryItem --></div>

</body>

 

-----------------------------------------------------------

 

/*MENU*/

 

.pro_line2 {

 

font-family: Arial, Helvetica, verdana, sans-serif;

position:absolute;

left:199px;

top:128px;

width:559px;

height:88px;

font-size:15px;

z-index:5;

}

 

.pro_line2 .select {

margin:0;

padding:0 0 0 0px;

list-style:none;

white-space:nowrap;

}

 

.pro_line2 li {

float:left;

background:#FF0000; /*red*/

}

 

.pro_line2 .select a {

display:inline;

height:31px;

float:left;

background:#00FF00; /*green*/

padding:0 0px 0px 0px;

text-decoration:none;

line-height:31px;

white-space:nowrap;

color:#4661a8; /*cor da letra*/

}

 

.pro_line2 .select a b {

display:block;

 

padding:0px 19px 0px 19px;

background:#FFFFFF; /*white*/

}

 

.pro_line2 .select a:hover,

.pro_line2 .select li:hover a {

background:#FFFF00; /*yellow*/

padding:0 0 0 0px;

line-height:31px;

cursor:pointer;

color:#fff; /*cor do texto "hover"*/

}

 

.pro_line2 .select a:hover b,

.pro_line2 .select li:hover a b {

display:block;

padding:0px 19px 0px 19px;

background:#e4e3e3 right top; /*cinza*/

cursor:pointer;

}

 

.pro_line2 .sub {

display:none;

}

 

/* IE6 only */

.pro_line2 table {

border-collapse:collapse;

margin:0px;

font-size:1px;

width:0px;

height:0px;

 

}

 

.pro_line2 .sub {

 

margin:2px;

padding:2px 0px 0px 0px;

margin-left:70px;

list-style:none;

font-family: Arial, Helvetica, verdana, sans-serif;

}

.pro_line2 .sub li {

height:70px;

background:none;

}

 

.pro_line2 .select :hover .sub {

 

display:block;

position:absolute;

float:left;

width:400px;

top:28px;

left:4px;

text-align:center;

}

 

.pro_line2 .select :hover .sub li a

{display:block;height:16px; line-height:16px; float:left; background:none; padding:0 20px; margin:0px; white-space:nowrap; border:1px solid; border-left-color:#FFFFFF; border-bottom:hidden; border-right-color:#FFFFFF; border-top:hidden; color:#FFF; font-size:12px;}

 

.pro_line2 .select :hover .sub li a:hover

{color:#9F9F9F; background:#FFFFFF; line-height:15px;}

 

/*FIM DO MENU*/

 

 

O menu original é deste site: http://www.cssplay.co.uk/menus/pro_dropline2-5.html

 

Nele mesmo já tem uns trambiques pra funcionar no IE mas eu tinha que modificar um pouco e essas modificações não ficam iguais no IE6.

 

Se alguém puder me ajudar dizendo pelo menos algumas ideias eu agradeço desde já..

 

Inteh depois!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Bom pessoal, eu tirei aquelas barrinhas laterais do submenu, agora meu unico problema tah sendo a área de click...

No bendito IE6 eu nem consigo selecionar os submenus da esquerda e direita porque o submenu desaparace....

o CSS é esse agora:

 

/*MENU*/

 

.pro_line2 {

/*height:31px;

width:559px;

position:absolute;

 

font-size:15px;

z-index:500;*/

font-family: Arial, Helvetica, verdana, sans-serif;

position:absolute;

left:199px;

top:128px;

width:559px;

height:88px;

font-size:15px;

z-index:5;

}

 

.pro_line2 .select {

margin:0;

padding:0 0 0 0px;

list-style:none;

white-space:nowrap;

}

 

.pro_line2 li {

float:left;

background:#FF0000; /*red*/

}

 

.pro_line2 .select a {

display:inline;

height:31px;

float:left;

background:none; /*green > none*/

padding:0 0px 0px 0px;

text-decoration:none;

line-height:31px;

white-space:nowrap;

color:#4661a8; /*cor da letra*/

}

 

.pro_line2 .select a b {

display:block;

 

padding:0px 19px 0px 19px;

background:#FFFFFF; /*blue > white*/

}

 

.pro_line2 .select a:hover,

.pro_line2 .select li:hover a {

background:#FFFF00; /*yellow*/

padding:0 0 0 0px;

line-height:31px;

cursor:pointer;

color:#fff; /*cor do texto "hover"*/

}

 

.pro_line2 .select a:hover b,

.pro_line2 .select li:hover a b {

display:block;

padding:0px 19px 0px 19px;

background:#e4e3e3 right top; /*pink > cinza*/

cursor:pointer;

}

 

.pro_line2 .sub {

display:none;

}

 

/* IE6 only */

.pro_line2 table {

border-collapse:collapse;

margin:-1px;

font-size:1em;

width:0px;

height:0px;

 

}

 

.pro_line2 .sub {

 

margin:2px;

padding:2px 0px 0px 0px;

margin-left:90px;

list-style:none;

font-family: Arial, Helvetica, verdana, sans-serif;

}

.pro_line2 .sub li {

height:20px;

background:none;/*black > none*/

}

 

.pro_line2 .select :hover .sub {

 

display:block;

position:absolute;

float:left;

width:400px;

height:20px;

top:28px;

left:4px;

text-align:center;

}

 

.pro_line2 .select :hover .sub li a

{display:block;height:16px; line-height:16px; float:left; background:none; padding:0 20px; margin:0px; white-space:nowrap; border:0px solid; border-left-color:#FFFFFF; border-bottom:hidden; border-right-color:#FFFFFF; border-top:hidden; /*border-color:#e4e3e3 #FFF #e4e3e3 #FFF;*/ color:#FFF; font-size:12px;}

 

.pro_line2 .select :hover .sub li a:hover

{color:#9F9F9F; background:#FFFFFF; line-height:15px; font-size:12px;}

 

/*FIM DO MENU*/

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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