Alinaer imagen y texto...

[American2010]

Hola gente del foro CSS, recurro a su ayuda para ver si me dan una mano para poder dejar estas cosas alineadas bien, tanto en IE como en FF

Primero las screens de lo que pasa y como lo quiero yo, y luego les paso los códigos...




style-sepa.css

Código PHP:

  /* RESET */
 
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, center, u, b, i {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: normal;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
 
body { line-height: 1; }
 
:focus { outline: 0; }
 
ol, ul { list-style: none; }
 
table { border-collapse: collapse; border-spacing: 0; }
 
input, textarea { margin: 0; padding: 0; }
 
/* COMIENZO */
 
body {
    background-color: #050;
    font-family: "Trebuchet MS", Arial;
    font-size: 16px;
    color: #FFF;
    }
 
b {
    font-weight: bold;
    }
 
#home p {
    padding-bottom: 10px;
    }
 
small {
    font-size: 12px;
    }
 
#contenido {
    width: 950px;
    padding: 5px;
    margin:  0px auto;
    position: relative;    
    }
 
#cabecera {
    width: 950px;
    height: 105px;
    padding: 5px 0;
    margin:  0px auto;
    position: relative;    
    }
 
#cabecera img {
    display: block;
    margin: auto;
    border: none;
    }
 
 
#separador {
    width: 100%;
    height: 25px;
    position: relative;    
    background-color: #020;
    border-top: #fff solid 4px;
    border-bottom: #fff solid 4px;
    padding: 0px 2px;
    }
    
#separador ul li {
    width: 157px;
    float: left;
    height: 25px;
    }
 
#separador ul li a {
    color: #FFF;
    text-decoration: none;
    display: block;
    }
 
#separador ul li a:hover {
    color: #FC0;
    display: block;
    }
 
#separador p {
    margin-top: 3px;
    }
 
#separador img {
    margin-right: 3px;
    }
 
#home {
    width: 930px;
    padding: 10px 10px 30px 10px;
    margin:  0px auto;
    position: relative;    
    min-height: 350px;
    } 
   

separador.php

Código PHP:

  <?php
$time=date('j M Y H:i:s');
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="es-ES">
 
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>GO</title>
<link rel="stylesheet" href="style-sepa.css" type="text/css" media="screen" />
 
<script language="JavaScript" type="text/JavaScript">
    var Hoy = new Date("<?php echo $time; ?>");
function Reloj(){ 
    Hora = Hoy.getHours() 
    Minutos = Hoy.getMinutes() 
    Segundos = Hoy.getSeconds() 
    if (Hora<=9) Hora = "0" + Hora 
    if (Minutos<=9) Minutos = "0" + Minutos 
    if (Segundos<=9) Segundos = "0" + Segundos 
    var Mes = new Array("Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","Sep","Oct","Nov","Dic"); 
    var Anio = Hoy.getFullYear(); 
    var Fecha = Hoy.getDate() + " " + Mes[Hoy.getMonth()] + " "; 
    var Inicio, Script, Final, Total 
    var Inicio, Script, Final, Total 
    Inicio = "" 
    Script = Fecha + Hora + ":" + Minutos + ":" + Segundos 
    Final = "" 
    Total = Inicio + Script + Final 
    document.getElementById('Fecha_Reloj').innerHTML = Total 
    Hoy.setSeconds(Hoy.getSeconds() +1)
    setTimeout("Reloj()",1000) 
} 
</script>
</head>
 
<body onload="Reloj()">
<div id="contenido">
<div id="cabecera">
</div>
 
<div id="separador">
<ul>
<li><img align="left" src="images/turnos.gif" /><p>Turno</p></li>
<li><p><div id="Fecha_Reloj"></div></p></li>
<li><a href="logout.php"><img align="left" src="images/logout.gif" /><span>Log-out</span></a></li>
</ul>
</div>  

El problema que no logro que los textos queden alineados al centro del ul li junto con las imagenes o cuando sólo hay texto...

¿Saben que estoy haciendo mal?

Gracias...

[kseso?]

¿has probado a añadir un padding-top a '#separador ul li a' ?
Y para la imagen de los ¿dados? un 'display: inline'

[Mikmoro]

Podrías empezar por estos cambios:
eliminas cosas que te sobran (como las P) del HTML

<div id="separador">
<ul>
<li><img align="left" src="images/turnos.gif" />Turno</li>
<li><div id="Fecha_Reloj"></div></li>
<li><a href="logout.php"><img align="left" src="images/logout.gif" /><span>Log-out</span></a></li>
</ul>
</div>

Y cambia esto en la CSS:

#separador img {
margin-right: 3px;
vertical-align: middle;
}

A partir de ahí vemos cómo va.

[American2010]

Bueno, poniendo esto...

#separador ul li span {
padding-top: 3px;
display: block;
}

Logro que el texto que dice Log-out baje para quedar alineado, el problema es que en IE pega un salto de linea...

Si le pongo a todo display: inline; no pega el salto de linea, pero tampoco queda centrado...

[American2010]

Bueno, Mikmoro, es lo que me pasa a veces pienso que por poner Spans o P y darles propiedades solucionare el tema, pero veo que no hago más que complicarla, para la proxima seguiré tu metodo, deshacernos de lo innecesario y tratar de solucionarlo con lo básico...

Gracias por la respuesta, podemos decir que quedo quasi-perfecto, estamos hablando de unos 2px de diferencia, pero a lo que era antes, ahora está hermoso...



Dejé como decías vos y al div que contiene fecha y hora le puse

#Fecha_Reloj {
padding-top: 3px;
}

[tux2003]

Hola:

No se si aun pueda servirte o solo queda como comentario general, estoy haciendo un portal y en el diseño y desarrollo tuve problemas con la orientacion de las listas y sus elementos, problema que resolvi quitando lo siguiente:

Código:

 
 margin:0;
 padding:0;

y asignando a la lista la posicion en la que deseaba apareciera

Código:

 position:absolute; 
 left:390px;
 top:30px;

con eso logre que quedaran en la posicion deseada y se ve exactamente igual en FireFox, IExplorer, Opera entre otros.... saludos y ojala sirva de algo si no pues ni modo

[w0rldart]

Una pregunta ya que estamos hablando del IE

vosotros para probar el css en IE 5, 6, 7, 8 (saldra pronto) los instalais en el PC, o teneis algun software simulador de eso??

[kseso?]

ie5: ya es historia (de la mala)
ie6: esperando a que dentro de un año ya sea historia (de la mala) pero todavía tiene su cuota.
ie7: muy alta cuota
ie8: ya hace un tiempo que está lanzado

Tienes varios "emuladores", como "múltiple ie".

[American2010]

Yo testeo contra IE 6... Ya si en IE7 u 8 mi sitio se verá mal será trabajo para más adelante, aunque quizás deba ya instalarme el 7, pero me resisto...


Gracias por el dato TUX2003, lo tendré en cuenta...