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...