Volver al Programación / Codificación foro

Firefox / IE Alineación de emisión

  • HollyHunter
  • Newbie
  • Newbie
  • Avatar de Usuario
  • Registrado: Jun 02, 2009
  • Mensajes: 13
  • Status: Offline

Nota Junio 23rd, 2009, 3:35 am

Hola Todos

Tengo un problema en los enlaces en mi menú de navegación se alinean correctamente en Firefox (en el centro vertical), pero en Internet Explorer que se están alineando en la parte inferior y no puedo averiguar por qué mi conocimiento como CSS no es grande - la esperanza de que alguien puede ayudar me un poco.

Este es el código para el menú de navegación en la plantilla:

Código: [ Select ]
<!-- IF loggedin -->
  <br>   
  <table width="900" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td height="20" bgcolor="#CCCCCC">
 
            <div id="usernav_wrap">
                <div id="usernav">
                    <ul>
                        <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
                        <!-- IF settings.enable_messaging -->
                            <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_guestbooks -->
                            <!-- IF session.new_guestbooks > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_blogs -->
                            <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_pictures -->
                            <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_videos -->
                            <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_audio -->
                            <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_events -->
                            <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
                        <!-- ENDIF -->
                        <!-- IF settings.enable_friends -->
                            <!-- IF session.new_friends > "0" -->
                                <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
                            <!-- ELSE -->
                                <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
                            <!-- ENDIF -->
                        <!-- ENDIF -->
                        <!-- IF settings.enable_favorites -->
                            <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
                        <!-- ENDIF -->
                        <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
                        <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
                    </ul>
                </div>
            </div>
    </tr>
  </table>
</div>
<!-- ENDIF -->
  1. <!-- IF loggedin -->
  2.   <br>   
  3.   <table width="900" border="0" cellspacing="0" cellpadding="0">
  4.     <tr>
  5.       <td height="20" bgcolor="#CCCCCC">
  6.  
  7.             <div id="usernav_wrap">
  8.                 <div id="usernav">
  9.                     <ul>
  10.                         <li class="first">{anchor:url1="account/home/",url2="index.php?m=account_home",name="core|usermenu_profile"}</li>
  11.                         <!-- IF settings.enable_messaging -->
  12.                             <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/messages/","index.php?m=account_messages"}" title="{lang:"core","usermenu_messages"}">{lang:"core","usermenu_messages"}<!-- IF session.new_messages > "0" --> ({session.new_messages})<!-- ENDIF --></a></li>
  13.                         <!-- ENDIF -->
  14.                         <!-- IF settings.enable_guestbooks -->
  15.                             <!-- IF session.new_guestbooks > "0" -->
  16.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/guestbook/unapproved/","index.php?m=account_guestbook&p=unapproved"}" title="{lang:"core","usermenu_guestbook"}">{lang:"core","usermenu_guestbook"} ({session.new_guestbooks})</a></li>
  17.                             <!-- ELSE -->
  18.                                 <li>{anchor:url1="account/guestbook/",url2="index.php?m=account_guestbook",name="core|usermenu_guestbook"}</li>
  19.                             <!-- ENDIF -->
  20.                         <!-- ENDIF -->
  21.                         <!-- IF settings.enable_blogs -->
  22.                             <li>{anchor:url1="account/blog/",url2="index.php?m=account_blog",name="core|usermenu_blog"}</li>
  23.                         <!-- ENDIF -->
  24.                         <!-- IF settings.enable_pictures -->
  25.                             <li>{anchor:url1="account/albums/",url2="index.php?m=account_albums",name="core|usermenu_pictures"}</li>
  26.                         <!-- ENDIF -->
  27.                         <!-- IF settings.enable_videos -->
  28.                             <li>{anchor:url1="account/videos/",url2="index.php?m=account_videos",name="core|usermenu_videos"}</li>
  29.                         <!-- ENDIF -->
  30.                         <!-- IF settings.enable_audio -->
  31.                             <li>{anchor:url1="account/audio/",url2="index.php?m=account_audio",name="core|usermenu_audio"}</li>
  32.                         <!-- ENDIF -->
  33.                         <!-- IF settings.enable_events -->
  34.                             <li>{anchor:url1="account/events/",url2="index.php?m=account_events",name="core|usermenu_events"}</li>
  35.                         <!-- ENDIF -->
  36.                         <!-- IF settings.enable_friends -->
  37.                             <!-- IF session.new_friends > "0" -->
  38.                                 <li><a href="{virtual_path}{ifelse:settings.fancy_urls,"1","account/friends/requests/","index.php?m=account_friends&p=requests"}" title="{lang:"core","usermenu_friends"}">{lang:"core","usermenu_friends"} ({session.new_friends})</a></li>
  39.                             <!-- ELSE -->
  40.                                 <li>{anchor:url1="account/friends/",url2="index.php?m=account_friends",name="core|usermenu_friends"}</li>
  41.                             <!-- ENDIF -->
  42.                         <!-- ENDIF -->
  43.                         <!-- IF settings.enable_favorites -->
  44.                             <li>{anchor:url1="account/favorites/",url2="index.php?m=account_favorites",name="core|usermenu_favorites"}</li>
  45.                         <!-- ENDIF -->
  46.                         <li>{anchor:url1="account/settings/",url2="index.php?m=account_settings",name="core|usermenu_settings"}</li>
  47.                         <li>{anchor:url1="account/logout/",url2="index.php?m=account_logout",name="core|usermenu_logout"}</li>
  48.                     </ul>
  49.                 </div>
  50.             </div>
  51.     </tr>
  52.   </table>
  53. </div>
  54. <!-- ENDIF -->



Y este es el CSS asociada:


Código: [ Select ]
/* ********** [ USER NAVIGATION ] ********** */
 
div#usernav_wrap {
    height: 20px;
    background: ##CCCCCC }
 
    div#usernav {
        margin: 0px auto;
        width: 900px; }
 
        div#usernav ul {
            list-style: none; }
 
            div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left; }
 
            div#usernav li.first {
                padding: 0px 0px 0px 10px;
                background: none; }
 
                div#usernav ul li a {
                    padding: 6px 10px 0px 18px;
                    height: 20px;
                    display: block;
                    float: left;
                    font: 10px Verdana, Arial, Helvetica, sans-serif;
                    color: #666666;
                    text-decoration: none; }
 
                    div#usernav ul li a:hover {
                        text-decoration: underline; }
  1. /* ********** [ USER NAVIGATION ] ********** */
  2.  
  3. div#usernav_wrap {
  4.     height: 20px;
  5.     background: ##CCCCCC }
  6.  
  7.     div#usernav {
  8.         margin: 0px auto;
  9.         width: 900px; }
  10.  
  11.         div#usernav ul {
  12.             list-style: none; }
  13.  
  14.             div#usernav li {
  15.                 padding: 0px 0px;
  16.                 background: url("usermenu_div.gif") no-repeat;
  17.                 float: left; }
  18.  
  19.             div#usernav li.first {
  20.                 padding: 0px 0px 0px 10px;
  21.                 background: none; }
  22.  
  23.                 div#usernav ul li a {
  24.                     padding: 6px 10px 0px 18px;
  25.                     height: 20px;
  26.                     display: block;
  27.                     float: left;
  28.                     font: 10px Verdana, Arial, Helvetica, sans-serif;
  29.                     color: #666666;
  30.                     text-decoration: none; }
  31.  
  32.                     div#usernav ul li a:hover {
  33.                         text-decoration: underline; }


Y el problema en forma de imagen:



¿Alguna idea muy apreciada.

Gracias

Holly x
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Junio 23rd, 2009, 3:35 am

  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de Usuario
  • Registrado: Nov 18, 2007
  • Mensajes: 429
  • Status: Offline

Nota Junio 23rd, 2009, 2:06 pm

Intente quitar la etiqueta de lista desordenada.

Puede que tenga que añadir

display: inline;

a su li así: Im no está seguro de por qué sus enlaces se muestran en una línea.

Código: [ Select ]

div#usernav li {
                padding: 0px 0px;
                background: url("usermenu_div.gif") no-repeat;
                float: left;
                display:inline;
}
  2. div#usernav li {
  3.                 padding: 0px 0px;
  4.                 background: url("usermenu_div.gif") no-repeat;
  5.                 float: left;
  6.                 display:inline;
  7. }


Id primero sólo eliminar el <ul> </ ul>.
  • HollyHunter
  • Newbie
  • Newbie
  • Avatar de Usuario
  • Registrado: Jun 02, 2009
  • Mensajes: 13
  • Status: Offline

Nota Junio 23rd, 2009, 3:26 pm

Gracias por la sugerencia devilwood, que acaba de extraer todo el formato de los vínculos y agrupado juntos, lamentablemente no es la respuesta.

Tratando de obtener verticalmente centrada.

Agradecemos el esfuerzo, aunque :)

Todas las ideas apreciado....?


Holly x
  • devilwood
  • Silver Member
  • Silver Member
  • Avatar de Usuario
  • Registrado: Nov 18, 2007
  • Mensajes: 429
  • Status: Offline

Nota Junio 24th, 2009, 12:48 pm

Debo ser capaz de obtener esta pronto para tratar de Heres #2. Ive tenía el mismo problema que tiene, pero no puedo recordar qué proyecto que finalmente lo conseguimos trabajando. Pruebe lo siguiente como creo que su similar a la estructura del HTML que usted está buscando.

Código: [ Select ]

<div id="navigation">
<div align="center">    
<li><a href="main.html" target="_self">Home</a></li>
<li><a href="about.html" target="_self">About</a></li>
<li><a href="properties.html" target="_self">Properties</a></li>
<li><a href="sprojects.html" target="_self">Special Projects</a></li>
<li><a href="videos.html" target="_self">Videos</a></li>
<li><a href="news.php" target="_self">News and Events</a></li>
<li><a href="testimonials.html" target="_self">Testimonials</a></li>
<li><a href="links.php" target="_self">Links</a></li>         
</div>
</div>
  2. <div id="navigation">
  3. <div align="center">    
  4. <li><a href="main.html" target="_self">Home</a></li>
  5. <li><a href="about.html" target="_self">About</a></li>
  6. <li><a href="properties.html" target="_self">Properties</a></li>
  7. <li><a href="sprojects.html" target="_self">Special Projects</a></li>
  8. <li><a href="videos.html" target="_self">Videos</a></li>
  9. <li><a href="news.php" target="_self">News and Events</a></li>
  10. <li><a href="testimonials.html" target="_self">Testimonials</a></li>
  11. <li><a href="links.php" target="_self">Links</a></li>         
  12. </div>
  13. </div>


Código: [ Select ]

#navigation {
background-color:#6d6d4a;
border-top: 1px #999967 solid;
border-bottom: 1px #999967 solid;
border-left: 2px #999967 solid;
border-right: 2px #999967 solid;
padding-left:0;
margin-left:0;
float: left;
left: 0px;
width: 99.5%;
height: 20px;
}

#navigation li {
top:0;
border:none;
position: relative;
padding:0;
display:inline;
margin-right: .75em;
}

#navigation li a{
    font: 14px/18px Arial, Helvetica, sans-serif;
    color: #48231A;
    text-decoration: none;
}

#navigation li a:hover {
    color: #000000;
}
  2. #navigation {
  3. background-color:#6d6d4a;
  4. border-top: 1px #999967 solid;
  5. border-bottom: 1px #999967 solid;
  6. border-left: 2px #999967 solid;
  7. border-right: 2px #999967 solid;
  8. padding-left:0;
  9. margin-left:0;
  10. float: left;
  11. left: 0px;
  12. width: 99.5%;
  13. height: 20px;
  14. }
  16. #navigation li {
  17. top:0;
  18. border:none;
  19. position: relative;
  20. padding:0;
  21. display:inline;
  22. margin-right: .75em;
  23. }
  25. #navigation li a{
  26.     font: 14px/18px Arial, Helvetica, sans-serif;
  27.     color: #48231A;
  28.     text-decoration: none;
  29. }
  31. #navigation li a:hover {
  32.     color: #000000;
  33. }
  • Rabid Dog
  • Web Master
  • Web Master
  • Avatar de Usuario
  • Registrado: May 21, 2004
  • Mensajes: 3229
  • Loc: South Africa
  • Status: Offline

Nota Junio 30th, 2009, 1:40 pm

establecer la altura de div y establecer su altura de la línea en el mismo valor. a continuación, establezca su vertical alinear a media

Código: [ Select ]
 
#usernav{
line-height: 30px;
height: 30px;
vertical-align: middle;
}
 
  1.  
  2. #usernav{
  3. line-height: 30px;
  4. height: 30px;
  5. vertical-align: middle;
  6. }
  7.  
Watch me grow

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: No hay usuarios registrados visitando el Foro y 125 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC