Posicionar menu dropdown ao centro no IE6

Fagner Sutel · June 30, 2011

Pessoal,

Estou com site rodando normalmente no IE 8 e 9 e no Firefox, no entando os problemas se apresentam no IE 6 quero fazer um hack para IE 6, mas não consigo arranajar meu css de forma a manter o menu dropdawn centralizado no IE6.

Seguem os códigos, se alguém puder me ajudar a centralizar o menu no Ie ficarei muito agradecido!

ele esta rodando nesse link: http://www.sutel.com.br/ppgcm2.html

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Programa de Pós-Graduação em Medicina: Ciências Médicas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/ppgcm.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
&lt;script type="text/javascript" src="js/url.js"></script> <!-- JS para abrir forms na div cont por meio do comandos [ java script:ajax_url('areasDeConcentracao-f.php', 'conteudo' ); ] -->

<!--[if lt IE 7]>
&lt;script type="text/javascript" src="js/jquery/jquery.js"></script>
&lt;script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->

<!-- / END -->
</head>
<body>
<!-- <SPAN style="position: absolute; top: 100 px; left: 25px; width: 100px; height: 150px"> 
<IMG SRC="css/images/ufrgslogo.gif" > 
</SPAN>  -->
<div id="total">
<div id="topo">
<h1><img id="img" src="css/images/ufrgslogo.gif" width="100" height="75" alt="PPGCM" /> <img src="css/images/ppgcm.jpeg" width="500" height="75" alt="PPGCM" /> <img src="css/images/famed.gif" width="100" height="75" alt="FAMED" />
                                                                                        
</h1>
</div>
<!-- Beginning of compulsory code below -->
<div id="menu">
<ul id="nav" class="dropdown dropdown-horizontal">
        <li id="n-music"><a href="ppgcm2.html">  Home  </a></li>
        <li id="n-music"><a href="./" class="dir">Equipe </a>
                <ul>
                        <li class="first"><a href="./" class="dir">Coordenação</a>
                                <ul>
                                        <li><a href="java script:ajax_url('wc.html', 'cont' );">Wolnei Caumo</a></li>
                                        <li><a href="./">Vice-Coordenador</a></li>
                                        <li><a href="./">Suplente 1</a></li>
                                        <li><a href="./">Suplente 2</a></li>
                                        <li><a href="java script:ajax_url('credenciamentos2.html', 'cont' );" title="Categorias" alt="credenciamentos">Credenciamentos</a></li>                                  
                                </ul>
                        </li>
                        <li class="first"><a href="./" class="dir">Secretaria</a>
                                <ul>
                                        <li class="first"><a href="./">Vera</a></li>
                                        <li><a href="./">Estagiário 1</a></li>
                                        <li><a href="./">Estagiário 2</a></li>
                                        <li><a href="./">Estagiário 3</a></li>
                                </ul>
                        </li>
                        
                
                        
                </ul>
        </li>
        <li id="n-music"><a href="./" class="dir">Cursos </a>
                <ul>
                        <li class="first"><a href="./"><strong>Mestrado</strong></a></li>
                        <li><a href="./">Doutorado</a></li>
                </ul>
        </li>
        <li id="n-music"><a href="./" class="dir">Documentos</a>
                <ul>
                        <li class="first"><a href="./">Geral</a></li>
                        <li><span class="dir">Editais</span>
                                <ul>
                                        <li class="first"><a href="./">Doutorado Fluxo Contínuo</a></li>
                                        <li><a href="./">Doutorado, ingresso direto</a></li>
                                        <li><a href="./">Edital CNPq Nº 10/2010 - Bolsas de Apoio Técnico</a></li>
                                        <li><a href="./">Edital MCT/CNPq N º 12/2010- Bolsas de Iniciação Cientifica</a></li>
                                        <li><a href="./">Programa CAPES/NUFFIC </a></li>
                                </ul>
                        </li>
                        <li><span class="dir">Formulários</span>
                                <ul>
                                        <li class="first"><a href="./">Solicitação de Banca de Mestrado</a></li>
                                        <li><a href="./">Solicitação de Banca de Doutorado</a></li>
                                        <li><a href="./">Solicitação de Exame de Qualificação de Doutorado</a></li>
                                        <li><a href="./">Formulário Solicitação de Bolsa e Termo de Compromisso</a></li>
                                        <li><a href="./">Ficha para Estagio Docente</a></li>
                                </ul>
                        </li>
                        <li><span class="dir">Legislação UFRGS</span>
                                <ul>
                                        <li class="first"><a href="./">Regimento do PPGCM</a></li>
                                        <li><a href="./">Normas para apresentação de dissertações e teses</a></li>
                                        <li><a href="./">Normas para apresentação de projetos de pesquisas (mestrado, doutorado e exame geral de qualificação)</a></li>
                                        <li><a href="./">Normas Pós-Doutorado - UFRGS</a></li>
                                </ul>
                        </li>
                </ul>
        </li>
        <li id="n-music"><span class="dir">Ensino </span>  <!-- PRIMEIRO NIVEL -->
                <ul>
                        <li class="first"><a href="./" class="dir">Professores</a>
                                <ul>
                                        <li class="first"><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                        <li><a href="./">xxx</a></li>
                                </ul>
                        </li>
                        <li><a href="./" class="dir">Disciplinas</a>
                                <ul>
                                        <li class="first"><span class="dir">Mestrado</span>
                                                <ul>
                                                        <li class="first"><a href="./">MED 074</a></li>
                                                        <li><a href="./">MED 062</a></li>
                                                        <li><a href="./">MED 110</a></li>
                                                        <li><a href="./">MED 099</a></li>
                                                        <li><a href="./">MED 085</a></li>
                                                        <li><a href="./">MED 120</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="./" class="dir">Doutorado</a>
                                                <ul>
                                                        <li class="first"><a href="./">MED 077</a></li>
                                                        <li><a href="./">MED 000</a></li>
                                                        <li><a href="./">MED 111</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="./">xxxx</a></li>
                                </ul>
                        </li>
                        <li><a href="./" class="dir">YYY</a>
                                <ul>
                                        <li class="first"><a href="./">YYY</a></li>
                                        <li><a href="./">YYY</a></li>
                                        <li><a href="./">YYY</a></li>
                                        <li><a href="./">YYY</a></li>
                                </ul>
                        </li>
                        <li><a href="./">ZZZ</a></li>
                        <li><a href="./" class="dir">TTT</a>   <!-- SEGUNDO NIVEL -->
                                <ul>
                                        <li class="first"><span class="dir">LLL</span>  <!-- TERCEIRO NIVEL -->
                                                <ul>
                                                        <li class="first"><a href="./">AAA</a></li> <!-- QUERTO NIVEL -->
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                        <li><a href="./">AAAL</a></li>
                                                        <li><a href="./">AAA</a></li>
                                                </ul>
                                        </li>
                                        <li><a href="./">FFF</a></li>
                                        <li><a href="./">DDD</a></li>
                                        <li><a href="./">KKK</a></li>
                                        <li><a href="./">III</a></li>
                                        <li><a href="./">MMM</a></li>
                                </ul>
                        </li>
                        <li><a href="./">QQQ</a></li>
                </ul>
        </li>
        <li id="n-music"><span class="dir">Contato </span>  <!-- PRIMEIRO NIVEL -->
</ul>
</div>

<div id="cont">
CONTEUDO
</div>

<div id="base">
                                        <center>
                                                <div id="base2"><font size="1"><b> PPG em Ciências Médicas - Rua Ramiro Barcelos, 2400 - 2º andar • Tel.:             51 3308-5605       • Porto Alegre - RS - Brasil • ppgcm@ufrgs.br</b></font></div>
                                                
                                        </center>
                                </div>

</div>
<!-- / END -->
</body>
</html>

default.css

@charset "UTF-8";

/*------------------------------------------------------------------------------------------------------/
        @section        Style Framework  */


        /* First-level expected directory tag - li */

        ul.dropdown li {
         padding: 5px;
        }

        ul.dropdown *.dir {
         padding-right: 30px;
         background-image: none;
         background-position: 100% 50%;
         background-repeat: no-repeat;
        }

                /* Non-first level */
                ul.dropdown ul *.dir {
                 padding-right: 15px;
                 background-image: url(images/nav-arrow-right.png);
                 background-position: 100% 50%;
                 background-repeat: no-repeat;
                }

                ul.dropdown ul ul *.dir {
                 background-image: url(images/nav-arrow-right2.png);
                }


        /* Components override */

        ul.dropdown-vertical *.dir {
         background-image: url(images/nav-arrow-right.png);
        }

        ul.dropdown-vertical-rtl *.dir {
         padding-right: 15px;
         background-image: url(images/nav-arrow-left.png);
         background-position: 0 50%;
        }



/*------------------------------------------------------------------------------------------------------/
        @section        Base Drop-Down Styling  */



        /* ALL LEVELS (incl. first) */

        ul.dropdown {
         font: bold 17px/normal Arial, Helvetica, sans-serif;
        }

                ul.dropdown li {
                 background-color: #333;
                 color: #fff;
                }

                ul.dropdown li.hover,
                ul.dropdown li:hover {
                }

                /* Links */

                ul.dropdown a:link,
                ul.dropdown a:visited { color: #fff; text-decoration: none;}
                ul.dropdown a:hover {
                 border-top-color: #5db1e0 !important;
                 border-left-color: #5db1e0;
                 background-color: #4498c7;
                 color: #fff;
                }

                ul.dropdown ul a.dir:hover { /* proposal */
                 background-color: #4698ca;
                 background-image: url(images/comnav-arrowon.png);
                 color: #fff;
                }

                ul.dropdown a:active {
                 background: #058acf url(images/nav-sub-press.png) 0 0 repeat-x !important;
                 color: #fff;
                }


                /* NON-FIRST LEVEL */

                ul.dropdown ul {
                 left: auto;
                 right: 0;
                 width: 150px;
                 margin-top: -1px;
                 border-top: 1px solid #1a1a1a;
                 border-left: solid 1px #4c4c4c;
                 font: bold 11px/1em Tahoma, Geneva, Verdana, sans-serif;
                }

                        ul.dropdown ul li {
                         background-color: #3a3a3a;
                        }

                ul.dropdown ul ul {
                 top: 0;
                 right: auto;
                 left: 100%;
                 margin-top: 0;
                 border-top: none;
                 border-left: none;
                 font-weight: normal;
                }

                        ul.dropdown ul ul li {
                         background-color: #4c4c4c;
                        }

                ul.dropdown ul ul ul li {
                 background-color: #595959;
                }



/* Mixed */

ul.dropdown li a,
ul.dropdown *.dir {
 border-style: solid;
 border-width: 1px;
 border-color: #404040 #1a1a1a #1a1a1a #505050;
}

ul.dropdown ul li a,
ul.dropdown ul *.dir { border-color: #4a4a4a #242424 #242424; border-left: none; }

ul.dropdown ul ul li a,
ul.dropdown ul ul *.dir { border-color: #595959 #333 #333; }

ul.dropdown ul ul ul li a,
ul.dropdown ul ul ul *.dir { border-color: #767676 #404040 #404040; }



/* Custom elements */

#n-movies { width: 250px; text-align: center; }
#n-movies ul { right: auto; left: 0; width: 249px; text-align: left; }
#n-movies ul ul { left: 249px; width: 150px; }
#n-movies ul a { width: 232px; }
#n-movies ul a.dir { width: 210px; }
#n-movies ul ul a { width: 133px; }
#n-movies ul ul a.dir { width: 111px; }
#n-movies ul ul ul { left: 100%; }

default.ultimate.css

@import "default.css";


/*------------------------------------------------------------------------------------------------------/
 * @section             Base Style Extension
 */

ul.dropdown a,
ul.dropdown span {
 display: block;
 padding: 5px 30px;
}



/*------------------------------------------------------------------------------------------------------/
 *      @section        Base Style Override
 */


ul.dropdown li {
 padding: 0;
}

ul.dropdown ul a,
ul.dropdown ul span { /* POI, proposal: override abstract a, span */
 padding: 8px;
}



/*------------------------------------------------------------------------------------------------------/
 * @section             Base Style Reinitiate: post-override activities
 */


ul.dropdown *.dir { /* POI */
 padding: 5px 30px;
}

ul.dropdown ul *.dir {
 padding: 8px 30px 8px 8px;
}



/*------------------------------------------------------------------------------------------------------/
 *      @section        Custom Styles
 */


ul.dropdown ul a {
 width: 133px;
}

ul.dropdown ul a.dir {
 width: 111px;
}



/*------------------------------------------------------------------------------------------------------/
 * @section             Support Class `open` Usage
 * @source              js, artificial
 *
 */


ul.dropdown *.open {
 background-color: #3d3d3d;
}
ul.dropdown ul *.open {
 background-color: #4c4c4c;
 background-image: url(images/comnav-arrowover.png);
 color: #fff;
}
ul.dropdown ul ul *.open {
 background-color: #595959;
 background-image: url(images/comnav-arrowover2.png);
 color: #fff;
}
/* Override UPPER TWO definitions */
ul.dropdown a.open:hover {
 background-color: #4698ca;
 color: #fff;
}
ul.dropdown ul a.open:hover {
 background-image: url(images/comnav-arrowon.png);
 color: #fff;
}


/* Clone in CSS 2 */

ul.dropdown li:hover > *.dir {
 background-color: #3d3d3d;
}
ul.dropdown ul li:hover > *.dir {
 background-color: #4c4c4c;
 background-image: url(images/comnav-arrowover.png);
}
ul.dropdown ul ul li:hover > *.dir {
 background-color: #595959;
 background-image: url(images/comnav-arrowover2.png);
 color: #fff;
}

/* Override UPPER TWO definitions */
ul.dropdown li:hover > a.dir:hover {
 background-color: #4698ca;
 color: #fff;
}
ul.dropdown ul li:hover > a.dir:hover {
 background-image: url(images/comnav-arrowon.png);
 color: #fff;
}

dropdown.css

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style: none;
 margin: 0;
 padding: 5;
}

ul.dropdown {
 position: absolute;
 z-index: 597;

}

ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
 zoom: 1;
}

ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 599;
 cursor: default;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 top: 100%;
 left: 0;
 z-index: 598;
 width: 100%;
}

ul.dropdown ul li {
 float: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 99%;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ppgcm.css

* { margin: 0;
   padding: 0; }

body { 
 margin:0 auto;
 position:relative;
 padding: 10px 15px;
 text-align: center;
 background: #FFFFFF  0 0 repeat-x;
 color: black; 
 font: 14px/normal Tahoma, Arial, Helvetica, sans-serif;
 width: 784px;
 }

#total{
width: 250; 
padding: 0;
background: #2696B8;
text-align: center;
display: block;
color: black;
font-size: 13px;
margin-top: 10px;
line-height: 32px;
}

 #topo{
margin-top: 10PX;
width: 784px; 
background: white;
line-height:15px;
text-align: center;
letter-spacing: 1px;
display: block;
color: black;
font-size: 13px;
margin-top: 0px;
line-height:30px;
}

#topo#ufrgs {
vertical-align: left;
text-align: left;
}

#img{
position:relative;
left:-4%;
top:50%;
padding-top: 5px;
}

span.diferente {
 vertical-align: 21px;
 margin-left: 1px;
 }

 span.diferente2 {
 vertical-align: 1px;
 font-weight: 101;
 }

#cont{  
                background: white;
                margin-top: 40PX;
                width: 750;
                float:right;
                position:relative;
                text-align:center;
                font-size: 18px;
                border:4px;
                border-color:#000000;
                line-height:30px;
}                               

#form{
        background: url(images/cinza2.jpg);
        min-height: 900px;
        position:relative;
        text-align:center;
        font-size: 18px;
        border:4px;
        border-color:#000000;
        line-height:30px;
}

 #base{ 
        background: white;
        width:780;
        height:80px;
        top:500px;
        text-align:center;
        margin:0px;
        line-height:37px;
        clear:both;
}

 #base2{        
        background: #2696B8;

h1 { 
 margin-bottom: .5em;
 border-bottom: solid 1px #FFFFFF;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: normal;
 font-size: 180%; 
 text-indent: 5px;
 letter-spacing: -1px; }


cite { float: right; }
ul.classic { list-style: disc;
 margin-bottom: 1em;
 padding-left: 2em; }
div.section { clear: both;
 padding-top: 50px; }

.table1 { float: right; margin-bottom: 2em; border: solid 1px #eee; }
.table1 caption { color: #fff; text-align: center; padding-bottom: 5px; }
.table1 th, .table1 td { padding: 7px; }
.table1 th, .table1 thead td { background-color: lightyellow; color: #000; }
.table1 tbody td { background-color: #fff; color: #000; }
.table1 tbody th { text-align: right; }

Sign In

Posicionar menu dropdown ao centro no IE6

Question

Fagner Sutel

Link to comment

Share on other sites

0 answers to this question

Recommended Posts

Join the conversation

Forum Statistics

Browse

Activity