Estoy colocando unos elementos con DIVs en una pagina web pero tengo unas diferencias de colocación a la hora de visualizar la pagina en IE o FIREFOX 2.
Además no se por qué no funciona la alineación vertical en el texto de los divs.
¿Alguien podría echarme una mano?
La pagina está en:
http://guiasmedicos.dnsempresas.com/...zul-condiv.asp
He reseteado primero todos los estilos para dejarlos con valor cero, siguiente el reseteo de Eric Meyer.
Luego he empezado a adaptar los estilos que son los siguientes:
Código:
Gracias /*Principio: Reseteo de estilos*/ 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 { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: top; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: White; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; vertical-align: top; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } table { width: 768px; margin: auto; } /*Fin: Reseteo de estilos*/ /*Principio: Layout Principal para medicos con div*/ div#contenedor { width: 768px; height: 520px; margin: auto; } div#cabecera { width: 768px; height: 79px; } div#izquierda { width: 227px; height: 377px; float: left; } div#datos { width: 391px; height: 377px; background-image: url(../../../Images/clinica_sectores_03.jpg); float: left; } div#derecha { width: 150px; height: 377px; float: right; } div#pie { width: 768px; height: 64px; clear: both; } div#itemespecialidad { /*anchura total: 391 altura total: 25px*/ width: 383px; height: 16px; margin-top: 7px; padding-left: 3px; padding-right: 3px; color: #669ACC; border: 1px solid #669ACC; background-color: White; font: normal normal bold 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: middle; text-transform: uppercase; text-align: justify; float: left; clear: both; } div#itemhorario, div#itemobservaciones{ /*anchura total: 391 altura total: 25px*/ width: 383px; height: 19px; margin-top: 4px; padding-left: 3px; padding-right: 3px; color: #669ACC; border: 1px solid #669ACC; background-color: White; font: normal normal bold 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: middle; text-transform: uppercase; text-align: justify; float: left; clear: both; } div#itemlogotipo{ /*anchura total: 391 altura total: 25px*/ width: 383px; height: 100px; margin-top: 4px; padding-left: 3px; padding-right: 3px; color: #669ACC; border: 1px solid #669ACC; background-color: White; font: normal normal bold 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: middle; text-transform: uppercase; text-align: justify; float: left; clear: both; } .item { /*anchura total: 391 altura total: 25px*/ width: 61px; height: 22px; margin-top: 3px; color: Black; font: normal normal bold 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: bottom; text-transform: uppercase; float: left; clear: both; } .datos { /*anchura total: 391 altura total: 25px*/ width: 319px; height: 20px; margin-left: 3px; padding-left: 3px; padding-right: 3px; margin-top: 3px; color: #669ACC; border: 1px solid #669AC C; background-color: White; float: left; font: normal normal bold 9px/normal Verdana, Geneva, Arial, Helvetica, sans-serif; vertical-align: middle; text-transform: uppercase; text-align: justify; } /*Fin: Layout Principal para médicos con div*/