Tema: Maquetación falla en Iexplore y Chrome
Ver Mensaje Individual
  #9 (permalink)  
Antiguo 15/01/2012, 03:34
Legolas_Bilbao
 
Fecha de Ingreso: mayo-2005
Mensajes: 423
Antigüedad: 19 años
Puntos: 1
Respuesta: Maquetación falla en Iexplore y Chrome
Buenos Días Isabel,

Primero disculpas por tardar en contestar ya que está pagina web la estoy haciendo por hobby y tengo bastantes lagunas con este tema.

1º he limpiado todos los position absolute y relative salvo los del menu

El problema que surge entre diferentes navegadores es el siguiente:

En firefox y Chrome


En Iexplore


En firefox y chrome me pone un salto de linea que no consigo quitar, mientras que en iexplore me coloca bien el menu pero me lo mueve a la izquierda.

El codigo global de la pagina es el siguiente
Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3. body{
  4.       margin: 0;
  5.       padding: 0;
  6.       font-family: Arial, Helvetica, Sans-Serif;
  7.       width:100%;
  8.       height:100%;
  9.       overflow-x:hidden;
  10.       -ms-overflow-x:hidden;
  11.     
  12.     }
  13.  
  14. #main{
  15.   left: 0;
  16.   top: 0;
  17.   cursor:default;
  18.   height:100%
  19. }
  20.  
  21. #cab_aux{
  22.     width:100%;
  23.     height:40px;
  24.     background-color:#060;
  25.     }
  26.     
  27. #pie_aux{
  28.         width:100%;
  29.         height:40px;
  30.         background-color:#060;
  31.     }   
  32. #logo{
  33.     
  34.     margin-left:18%;
  35.     width:860px;
  36.     height:150px;
  37.     }
  38.     
  39. #logo_cab{
  40.     
  41.     padding:1;
  42.     }   
  43.     
  44. #cuerpo{
  45.     background:#FFF;
  46.     margin-left:18%;
  47.     width:860px;
  48.     font-size:12px;
  49.     height:100%;
  50.     padding:0;
  51.     }   
  52.  
  53. #cuerpo_noticias{
  54.         width:840px;
  55.         background-color:#FFFFFF;
  56.         margin:4px 0px 28px 8px;
  57.         -moz-box-shadow: 0 0 5px #888;
  58.         -webkit-box-shadow: 0 0 5px#888;
  59.         box-shadow: 0 0 5px #888;
  60.         -webkit-border-radius: 15px;
  61.         -moz-border-radius: 15px;
  62.         border-radius: 15px;
  63.  
  64. }
  65.     
  66. .boton{
  67.     background:url(../img/noticia.gif)  no-repeat center;
  68.     text-align:center;
  69.     font-weight:bold;
  70.     color:#fff;
  71.     height:40px;
  72.     width:40px;
  73.  
  74.     }   
  75.     
  76. .boton:hover{
  77.     background:url(../img/noticia_2.gif)  no-repeat center;  text-align:center;
  78.     }   
  79.     
  80. .enlaces{
  81.     color:#FFF;
  82.     text-decoration:none;
  83. }
  84.  
  85. #menu{
  86.     width:860px;
  87.     height:40px;
  88.     background-color:#fff;
  89.     margin-left:18%;
  90.  
  91. }
  92.     
  93.     
  94. #cuerpo_pat{
  95.         width:840px;
  96.         background-color:#FFFFFF;
  97.         height:200px;
  98.         padding:2;
  99.         margin:4px 8px 28px 8px;
  100.         -moz-box-shadow: 0 0 5px #888;
  101.         -webkit-box-shadow: 0 0 5px#888;
  102.         box-shadow: 0 0 5px #888;
  103.         -webkit-border-radius: 15px;
  104.         -moz-border-radius: 15px;
  105.         border-radius: 15px;
  106. }
  107.     
  108. #cuerpo_post{
  109.     
  110.         width:840px;
  111.         background-color:#FFFFFF;
  112.         height:140px;
  113.         padding:2;
  114.         margin:4px 8px 28px 8px;
  115.         -moz-box-shadow: 0 0 5px #888;
  116.         -webkit-box-shadow: 0 0 5px#888;
  117.         box-shadow: 0 0 5px #888;
  118.     
  119.         -webkit-border-radius: 15px;    
  120.         -moz-border-radius: 15px;   
  121.         border-radius: 15px;
  122.     
  123. }   
  124.  
  125. .titulo_post{
  126.     font-weight:bold; font-size:16px; background-color:#033; color:#FFF; height:30px; 
  127.     background:-webkit-linear-gradient(#033,#036D2E); 
  128.     background: -moz-linear-gradient(#033,#036D2E);
  129.     background: -o-linear-gradient(#033,#036D2E);
  130.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#036D2E');
  131.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#36D2E')";
  132.     -webkit-border-top-left-radius: 15px;
  133.         -webkit-border-top-right-radius: 15px;
  134.         -moz-border-radius-top-left: 15px;
  135.         -moz-border-radius-top-right: 15px;
  136.         border-top-left-radius: 15px;
  137.         border-top-right-radius: 15px;
  138.     }
  139.  
  140. .pie_titulo{
  141.     background:-webkit-linear-gradient(#036D2E,#033); 
  142.     background: -moz-linear-gradient(#036D2E,#033);
  143.     background: -o-linear-gradient(#036D2E,#033);
  144.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#036D2E', endColorstr='#036D2E');
  145.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#036D2E', endColorstr='#003300')";
  146.     -webkit-border-bottom-left-radius: 15px;
  147.         -webkit-border-bottom-right-radius: 15px;
  148.         -moz-border-radius-bottom-left: 15px;
  149.         -moz-border-radius-bottom-right: 15px;
  150.         border-bottom-left-radius: 15px;
  151.         border-bottom-right-radius: 15px;
  152.     
  153.     }
  154.  
  155. a {
  156.     color:#fff;
  157.     text-decoration:none;
  158.  
  159. }
  160.  
  161. #menus{
  162.     
  163.     color:#FFF; font-weight:bold;
  164.     -webkit-border-radius: 5px;
  165.     -moz-border-radius: 5px;
  166.     border-radius: 5px;
  167.     behavior: url(border-radius.htc);
  168.     border: 1px solid #030;
  169.     cursor : pointer;
  170.     padding:5px 19px 0px;
  171.     background:-webkit-linear-gradient(#033,#036D2E);
  172.     background: -moz-linear-gradient(#033,#036D2E);
  173.     background: -o-linear-gradient(#033,#036D2E);
  174.     filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#036D2E');
  175.     -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#003300', endColorstr='#36D2E')";
  176.     font-size:14px;
  177.  
  178.     }
  179.  
  180. #menus li{
  181.     float:left;
  182.     position:relative;
  183.     list-style:none;
  184.     margin:0 10px;
  185.     padding:0 0 8px;
  186.     }
  187.  
  188. #menus a{
  189.     
  190.     font-weight: bold;
  191.     color: #e7e5e5;
  192.     text-decoration: none;
  193.     display: block;
  194.     padding:  0px 5px;
  195.     margin: 0;
  196.     -webkit-border-radius: 1.6em;
  197.     -moz-border-radius: 1.6em;
  198.  
  199.     
  200.     }
  201.  
  202. #menus .current a, #menus li:hover > a {
  203.  
  204.     background: #090; /* for non-css3 browsers */
  205.     border-top: solid 1px #f8f8f8;
  206.     -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  207.     -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  208.     box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
  209.     
  210. }
  211.  
  212. #menus ul li:hover a, #menus li:hover li a {
  213.     border: none;
  214.     color: #FFF;
  215.     -webkit-box-shadow: none;
  216.     -moz-box-shadow: none;
  217. }
  218.  
  219. #menus ul a:hover {
  220.     
  221.  
  222.   color: #fff !important;
  223.  
  224.     background: #090;
  225.     -webkit-border-radius: 1.0em;
  226.     -moz-border-radius: 1.0em;
  227.  
  228. }
  229. /* level 2 list */
  230. #menus ul {
  231.     top: 25px;
  232.     z-index: 1000;
  233.     display: none;
  234.     margin: 0;
  235.     padding: 0;
  236.     width: 185px;
  237.     position: absolute;
  238.     left: 0;
  239.     border: solid 1px #b4b4b4;
  240.     -webkit-border-radius: 10px;
  241.     -moz-border-radius: 10px;
  242.     border-radius: 10px;
  243.     background-color:#036D2E;
  244.     
  245. }
  246. /* dropdown */
  247. #menus li:hover > ul {
  248.     display: block;
  249. }
  250.  
  251. #menus ul li {
  252.   float: none;
  253.   margin: 0;
  254.   padding: 4px;
  255. }
  256. #menus ul a {
  257.   font-weight: bold;
  258.   color:#FFF;
  259.   
  260. }
  261.  
  262. /* las definiciones de los submenues internos */
  263. #menus ul ul {
  264.   left: 181px;
  265.   top: -3px;
  266. }
  267.  
  268. /* rounded corners for first and last child */
  269. #menus ul li:first-child > a {
  270.     -webkit-border-top-left-radius: 9px;
  271.     -moz-border-radius-topleft: 9px;
  272.     -webkit-border-top-right-radius: 9px;
  273.     -moz-border-radius-topright: 9px;
  274. }
  275. #menus ul li:last-child > a {
  276.     -webkit-border-bottom-left-radius: 9px;
  277.     -moz-border-radius-bottomleft: 9px;
  278.     -webkit-border-bottom-right-radius: 9px;
  279.     -moz-border-radius-bottomright: 9px;
  280. }
  281.  
  282. #menus { display: inline-block; } 
  283. html[xmlns] #menus { display: block; }
  284. * html #menus { height: 1%; }
  285.  
  286. #fondo{
  287.     left:0;
  288.     top:0;
  289.     height:100%;
  290.     width:100%; 
  291.     z-index:-1;
  292.     position:fixed;
  293.     min-width:600px;
  294.     }

y el de la página es

Código PHP:
<!-- logo -->

<div id="logo">

        <img src="./img/cabecera/cab1.gif" title="Logo Club Norte&ntilde;o" alt="logo" id="logo_cab"/>

</div>

<!-- fin logo -->



<!-- menu -->

<div id="menu">

 <ul id="menus" >

  <li>

    <a href="index_nuevo.php" class="enlaces" title="inicio">Inicio</a>

  </li>

  <li>

      <a href="#">Club Norte&ntilde;o</a>

    <ul>

        <li><a href="origenClubNortenyo.php" title="Origen CNG">Origen</a></li>

        <li><a href="colaboradores.php" title="Acuerdos y Colaboradores">Colaboradores</a></li>

        <li><a href="./foro" title="Foro">Foro</a></li>

        <li><a href="./noticias" title="Noticias">Noticias</a></li>

    </ul>    

  </li>  

  <li>

    <a href="#">Liga Norte&ntilde;a</a>

  </li>  

  <li>

      <a href="#">Eventos</a>

  </li> 

 </ul>  

 </div>

 

<!-- fin menu -->



<!-- cuerpo -->

<div id="cuerpo"> 
¿porque puede ser ese error?

mucha sgracias
__________________
Dios creo un equipo perfecto a los demas los lleno de extranjeros