Foros del Web » Creando para Internet » CSS »

menu lista

Estas en el tema de menu lista en el foro de CSS en Foros del Web. buenas estoy haciendo un menu que necesito que vaya pegado, en explorer si se ve pero no en firefox, como que me queda un espacio ...
  #1 (permalink)  
Antiguo 03/11/2011, 14:50
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 14 años, 9 meses
Puntos: 4
menu lista

buenas

estoy haciendo un menu que necesito que vaya pegado, en explorer si se ve pero no en firefox, como que me queda un espacio y no logro pegarlo.

como esta explicacion esta tan clara como el petroleo, mejor les dejo la imagen para que vean lo que pretendo y de paso el codigo

[IMG][/IMG]

Código:
body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	
	margin:0px;
	padding:0px;
	
}

#gallery{
	width:840px;
	
}

#slides{
	height:280px;
	width:980px;
	overflow:hidden;
}

.slide{
	float:left;
	
}

#menu{
	height:23px;
	margin:10px 0 0 0;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	width:120px;
	display: inline-block;
	list-style:none;
	height:23px;
	overflow:hidden;
	background-color:#CCC;
}

li.inact:hover{
	background:url(img/pic_bg.png);
}

li.act,li.act:hover{
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	width:0;
	
}

li a{
	display:block;
	height:23px;
	padding-top:1px;
}

#main{
	margin:15px auto;
	text-align:center;
	width:920px;
	position:relative;
}

a, a:visited {
	color:#0196e3;
	text-decoration:none;
	outline:none;
}

a:hover{
	text-decoration:underline;
}

p{
	padding:10px;
	text-align:center;
}
#main #gallery #slides .slide img {
	margin-right: 180px;
	padding-left:auto;
	
}

a img {
	border:0;
	outline: none;

   
}

 a {
	border:0;
	outline: none;
	border: 0;
   margin: 0;
   padding: 0;
   
}
lo que necesito es que vaya pegado para poder diseñarlo bien pero no se porque me deja ese espacio.

gracias!
  #2 (permalink)  
Antiguo 03/11/2011, 16:27
 
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 295
Antigüedad: 13 años, 6 meses
Puntos: 12
Respuesta: menu lista

Si el menú está dentro de una tabla hay una propiedad de HTML dentro de <table> que es cellspacing, es decir, espacio entre celdas. Si pones
Código HTML:
<table cellspacing=0> 
en ambos navegadores lo verá como que no hay que dejar espacio entre las celdas y, por tanto, se pegarán todas las celdas.

El problema te ha surgido porque los valores predeterminados para las tablas y otros elementos html no son los mismos en unos navegadores y en otros.
Espero que te haya servido
  #3 (permalink)  
Antiguo 03/11/2011, 17:06
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: menu lista

Cita:
Iniciado por educacanis Ver Mensaje
Si el menú está dentro de una tabla hay una propiedad de HTML dentro de <table> que es cellspacing, es decir, espacio entre celdas. Si pones
Código HTML:
<table cellspacing=0> 
en ambos navegadores lo verá como que no hay que dejar espacio entre las celdas y, por tanto, se pegarán todas las celdas.

El problema te ha surgido porque los valores predeterminados para las tablas y otros elementos html no son los mismos en unos navegadores y en otros.
Espero que te haya servido

gracias por responder pero no estoy usando tablas.

mejor te pongo el codigo

Código:
    
    <div id="menu">
    
    <ul>
        <li class="fbar">&nbsp;</li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
        <li class="menuItem"><a href=""><img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
    </ul>
    
    
    </div>
el menu esta dentro de ese div
  #4 (permalink)  
Antiguo 03/11/2011, 17:58
 
Fecha de Ingreso: julio-2011
Mensajes: 220
Antigüedad: 12 años, 8 meses
Puntos: 72
Respuesta: menu lista

Creo que esto se debe a que FireFox considera como nodo de texto los saltos de linea que hay en le código fuente, entonces hay que evitar los saltos de linea en el código HTML entre el cierre y la apertura de los elementos <li> para eliminar ese espacio indeseado. Se puede poner todos los elemento <li> en una sola linea o para que no quede una linea tan larga ponerlos de una forma parecida a esta.

Código HTML:
Ver original
  1. <ul>
  2. <li class="fbar">&nbsp;</li><li class="menuItem"><a href="">
  3. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li><li class="menuItem"><a href="">
  4. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li><li class="menuItem"><a href="">
  5. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li><li class="menuItem"><a href="">
  6. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li><li class="menuItem"><a href="">
  7. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li><li class="menuItem"><a href="">
  8. <img src="img/sample_slides/Untitled-1.png" alt="thumbnail" /></a></li>
  9. </ul>

Lo importante es evitar el salto de linea entre </li> y <li>
  #5 (permalink)  
Antiguo 03/11/2011, 20:24
Avatar de walterfcr  
Fecha de Ingreso: julio-2009
Ubicación: Costa Rica
Mensajes: 148
Antigüedad: 14 años, 9 meses
Puntos: 4
Respuesta: menu lista

gracias funcionó a la perfección!

Etiquetas: firefox, hover, lista, fondo
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 09:53.