Foros del Web » Creando para Internet » CSS »

li en explorer

Estas en el tema de li en explorer en el foro de CSS en Foros del Web. Hola me he estado rompiendo el coco y no le hallo. Tengo una lista de titulos, pero ocupan dos lineas, les he puesto una imagen ...
  #1 (permalink)  
Antiguo 02/03/2011, 11:38
 
Fecha de Ingreso: junio-2010
Mensajes: 117
Antigüedad: 7 años, 6 meses
Puntos: 1
li en explorer

Hola me he estado rompiendo el coco y no le hallo.

Tengo una lista de titulos, pero ocupan dos lineas, les he puesto una imagen como list-style pero cuando lo veo en explorer la la segunda linea se pone debajo de la viñeta y lo que quiero es que el texto este alineado igual:

Esto es lo que pasa:

>> Avalúos a embarcaciones
de todo tipo, trafico y servicio

Esto es lo que quiero:

>>Avalúos a embarcaciones
de todo tipo, trafico y servicio

Alguien sabe como puedo componerlo??????
  #2 (permalink)  
Antiguo 02/03/2011, 11:52
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: li en explorer

te recomiendo resetear el css
Código CSS:
Ver original
  1. html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, pre,
  2. dd, dl, dt, a, cite, code, img, tt, legend, fieldset, label {margin: 0; padding: 0; text-align:left;}
  3.  
  4. img, a img, form, fieldset {border: 0;}
  5.  
  6. body            {
  7.                 font-size:72%;
  8.                 font-family:Arial, Helvetica, sans-serif;
  9.                 line-height:1.9em;
  10.                 color:#434343;
  11.                 background:#FCFCFC;
  12.                 }
  13.                
  14. a               {outline:none;}
  15.  
  16. a:hover         {
  17.                 text-decoration:none;
  18.                 color:#7B7B7F;
  19.                 }
  20.  
  21. p               {
  22.                 margin:0 0 1em 0;
  23.                 padding:0;
  24.                 }
  25.  
  26. small           {font-size:0.8em;}
  27.  
  28. h1              {
  29.                 font:3.45em Arial, Helvetica, sans-serif;
  30.                 color:#000000;
  31.                 line-height:0.9em;
  32.                 *line-height:1em;
  33.                 padding-bottom:15px;
  34.                 }
  35.                
  36. h2              {
  37.                 font:2.5em Arial, Verdana, Helvetica, sans-serif;
  38.                 line-height:1.2em;
  39.                 color:#2A313A;
  40.                 padding-top:5px;
  41.                 padding-bottom:20px;
  42.                 }
  43.                 h2 a    {
  44.                 color:#2A313A;
  45.                 text-decoration:none;
  46.                 }
  47.  
  48. h3              {
  49.                 font:2em Arial, Verdana, Helvetica, sans-serif;
  50.                 color:#2A313A;
  51.                 padding-bottom:10px;
  52.                 }
  53.                
  54. h4              {
  55.                 font:1.25em Arial, Helvetica, sans-serif;
  56.                 line-height:1em;
  57.                 padding-bottom:8px;
  58.                 text-transform:uppercase;
  59.                 }
  60.  
  61. h5, h6          {
  62.                 font:1.3em Arial, Helvetica, sans-serif;
  63.                 color:#2A313A;
  64.                 padding-bottom:8px;
  65.                 }
  66.                
  67. ul, ol          {
  68.                 margin:0;
  69.                 padding:0 0 20px;
  70.                 }
  71.                
  72. ul              {list-style:none;}
  73.                
  74. ul li           {
  75.                 margin:0;
  76.                 padding:5px 0;
  77.                 color:#434343;
  78.                 }
  79.                
  80. ul.unordered li {
  81.                 margin:0;
  82.                 padding:5px 0 5px 21px;
  83.                 background:url(../images/arr.gif) 0 9px no-repeat;
  84.                 }
  85.                
  86. ul li a         {
  87.                 color:#434343;
  88.                 text-decoration:none;
  89.                 }
  90.  
  91. ol li           {
  92.                 margin:0 0 0 2em;
  93.                 padding:0;
  94.                 color:#434343;
  95.                 }
  96.                
  97. blockquote      {
  98.                 margin:0 0 20px;
  99.                 padding:0 0 0 60px;
  100.                 color:#959595;
  101.                 font-size:1.3em;
  102.                 font-style:italic;
  103.                 background:url(../images/quotes.png) 10px 5px no-repeat;
  104.                 }
  105.                
  106. .quoteleft      {
  107.                 width:240px;
  108.                 margin:0 30px 10px 0;
  109.                 float:left;
  110.                 }
  111.                
  112. .quoteright     {
  113.                 width:240px;
  114.                 margin:0 0 10px 30px;
  115.                 float:right;
  116.                 }
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #3 (permalink)  
Antiguo 02/03/2011, 12:08
 
Fecha de Ingreso: junio-2010
Mensajes: 117
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: li en explorer

Ya lo logré, pero ahora me pasa esto, este es mi html:

<ul>
<li>Consultor Naval, Tramites ante DGMM, calculos de Arqueo, Francobordo, Cuaderno de Estabilidad, Planos en General</li>
<div style="background-image:url(punteado.png); height:1px; margin-left:15px;"></div>
<li>Consultor Naval, Tramites ante DGMM, calculos de Arqueo, Francobordo, Cuaderno de Estabilidad, Planos en General</li>
<div style="background-image:url(punteado.png); height:1px; margin-left:15px;"></div>
</ul>

y lo que hago es que despues de un li me ponga una linea de un pixel como divisor, y lo que quiero es que el texto quede en medio de las lineas divisoras de los li ejemplo:

esto quiero:
------------------------------------
asasffas
------------------------------------
asdasfaf
------------------------------------


Esto es lo que me sucede hay mucho espacio en la parte de arriba como lo puedo solucionar?:
------------------------------------

asdasdf
------------------------------------

asffsfafa
------------------------------------



Les muestro mi css

ul{padding-left: 0px;margin-left:0px;}
li{background: url(../img/vineta.jpg) no-repeat ;margin-bottom: 10px;list-style:none; margin-top:10px;}
  #4 (permalink)  
Antiguo 02/03/2011, 14:05
Avatar de LinkLooker  
Fecha de Ingreso: agosto-2002
Mensajes: 136
Antigüedad: 15 años, 4 meses
Puntos: 3
Respuesta: li en explorer

Intenta quitandole al margin top
  #5 (permalink)  
Antiguo 02/03/2011, 14:11
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: li en explorer

el problema puede ser que le estas aplicando 20px de margen:
Código CSS:
Ver original
  1. [B]margin-bottom: 10px[/B];list-style:none; [B]margin-top:10px[/B];}
10 para arriba y 10 para abajo. Trata poniendole unos 4px nada mas
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr

Etiquetas: explorer
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 11:02.