Foros del Web » Creando para Internet » CSS »

Problema compatibilidad

Estas en el tema de Problema compatibilidad en el foro de CSS en Foros del Web. Buenas. En primer lugar agradecer a los usuarios de este foro que me han ayudado bastante. Soy muy novato en cuanto a programación, este es ...
  #1 (permalink)  
Antiguo 29/12/2010, 21:42
 
Fecha de Ingreso: diciembre-2010
Mensajes: 1
Antigüedad: 7 años
Puntos: 0
Problema compatibilidad

Buenas.

En primer lugar agradecer a los usuarios de este foro que me han ayudado bastante. Soy muy novato en cuanto a programación, este es el primer proyecto que realizo y me encuentro atascado en un problema de compatibilidad en un menu desplegable. En Firefox se ve tal y como quiero, pero en otros navegadores que también probé como Safari, Chrome o IE no logró que surja igual.

Lo podeis ver en esta imágenes:
Firefox:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadobien.jpg[/URL]
Los otros navegadores:
[URL="http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg"] http://www.fileden.com/files/2010/12/6/3032410//navegadormal.jpg[/URL]

En la lista desplegable de la segunda imagen se ve como los objetos ("fotos" y "videos") se ven más desplazados hacia arriba, aparte de que la flecha que coloqué se descoloca.

Los códigos del navegador y la lista son los siguientes (es posible que haya cosas innecesarias y se note mi innexperiencia xD):
Estilo CSS:
Código CSS:
Ver original
  1. #navegador ul {
  2.     width:100%;
  3.     height:25px;
  4.     background-color:#000;
  5.     margin-top:0px;
  6. }
  7. #navegador li {
  8.     display:block;
  9.     position:relative;
  10.     float:left;
  11.     list-style:none;
  12.  
  13. }
  14. #navegador li a {
  15.     font-family:arial;
  16.     font-weight:bold;
  17.     font-size:13px;
  18.     text-decoration:none;
  19.     color:#FFF;
  20.     padding-left:10px;
  21.     padding-right:10px;
  22.     background-color:#000;
  23. }
  24. #navegador li a:hover {
  25.     padding-bottom:6px;
  26.     padding-top:3px;
  27.     padding-right:10px;
  28.     padding-left:10px;
  29.     background-color:#999;
  30. }
  31. #navegador li ul{
  32.     position:absolute;
  33.     list-style-type:none;
  34.     display:none;
  35.     float:left;
  36.     margin-left:-170px;
  37.     padding-left:170px;
  38.     margin-top:5px;
  39. }
  40.  
  41. #navegador li:hover ul, #navegador li.hover ul {
  42.     display:block;
  43.     width:9000px;
  44.     float:left;
  45.     background-color:#CCC;
  46.     height:15px;
  47.    
  48. }
  49. #navegador li ul li{
  50.     margin-top:-4px;
  51.     padding-right:0px;
  52.     margin-left:0px;
  53. }
  54.  
  55. #navegador li ul li a {
  56.     font-family:arial;
  57.     font-weight:lighter;
  58.     font-size:75%;
  59.     color:#1e6060;
  60.     background-color:#CCC;
  61. }
  62. #navegador li ul li a:hover, #navegador li ul li a.hover {
  63.         padding-right: -2px;
  64.         padding-left:-2px;
  65.         padding-top:0px;
  66.         padding-bottom:0px;
  67.         background-color:#AAA;
  68. }
  69. #navegador ul li ul span.nosotros {
  70.      background:url(images/flechanav.png);
  71.      margin-left:-425px;
  72.      margin-top:-5px;
  73.      width: 20px;
  74.      height: 10px;
  75.      position: absolute;
  76. }
  77. #navegador ul li ul span.galeria {
  78.      background:url(images/flechanav.png);
  79.      margin-left:-95px;
  80.      margin-top:-5px;
  81.      width: 20px;
  82.      height: 10px;
  83.      position: absolute;
  84. }
  85. #navegador li.foros a{
  86.     color:#FF3;
  87. }
  88. #navegador li.foros a:hover{
  89.     color:#CCC;
  90.     background-color:#000;
  91. }

Lista HTML:
Código HTML:
Ver original
  1. <div id="navegador">
  2.        <ul>
  3.          <li><a href="index.php?pagina=inicio">Inicio</a></li>
  4.          <li><a href="index.php?pagina=nosotros">Nosotros</a>
  5.             <ul><span class="nosotros"></span>
  6.                <li><a href="index.php?pagina=inicio">Dreams</a></li>
  7.                <li><a href="index.php?pagina=inicio">Basem</a></li>
  8.                <li><a href="index.php?pagina=inicio">Tango</a></li>
  9.                <li><a href="index.php?pagina=inicio">BPA</a></li>
  10.                 <li><a href="index.php?pagina=inicio">Chumy</a></li>
  11.                <li><a href="index.php?pagina=inicio">BAT</a></li>
  12.                <li><a href="index.php?pagina=inicio">Lil Monkey</a></li>
  13.                 <li><a href="index.php?pagina=inicio">TIK</a></li>
  14.             </ul>  
  15.          </li>      
  16.          <li><a href="index.php?pagina=galeria">Galeria</a>
  17.              <ul><span class="galeria"></span>
  18.                <li><a href="index.php?pagina=inicio">Fotos</a></li>
  19.                <li><a href="index.php?pagina=inicio">Videos</a></li>
  20.             </ul>  
  21.          </li>
  22.          <li><a href="index.php?pagina=agradecimientos">Agradecimientos</a></li>
  23.          <li class="foros"><a href="#">Foros</a></li>
  24.       </ul>
  25.   </div>

Esta es mi duda... por el momento. He estado buscando por todas partes pero en ningún sitio encuentro la solución. Como ya he dicho soy novato y cojo información de aquí y de allí, pero siempre redactando la codificación desde cero, por lo que pido perdón si lo que he mostrado es un desastre, y espero que puedan ayudarme.

Gracias :). Saludos! (y felices fiestas!).

Última edición por alexwdreams; 29/12/2010 a las 22:21

Etiquetas: compatibilidad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:44.