No se ve bien en navegador de mala calidad (css) Buenos días/noches/tardes/trasnoches/madrugadas/tardecitas señores miembros del sacro foro. Es este mi primer alunizaje. Tengo un problema con un navegador de décima que es, verosímilmente, el más utilizado en estos pagos (Internet Explorer). Con el zorro ardiente no tengo problemas. Paso el código y unos screenshots. Si algún alma caritativa me da una mano, le prometo que le corto las uñas y se la devuelvo.
CSS
body {
font-family: Verdana, Arial, Helvetica, Helv, sans-serif;
font-size: 12px;
}
a:active {
color: #ec8643;
}
a, a:visited {
color: red;
}
h1 {
font-size: 15px;
margin: 0;
}
h2 {
margin-top: 0;
color: #ec8643;
text-decoration: underline;
font-weight: bolder;
font-size: 18px;
text-align: left;
}
h3 {
font-size: 16px;
font-weight: 700;
}
h4 {
font-size: 12px;
font-weight: 400;
text-align: right;
}
em {
text-decoration: underline;
font-style: normal;
}
#contenedor {
margin: 0 auto;
width: 800px;
height: auto;
}
#barra_lateral {
width: 200px;
height: 600px;
float: left;
}
#barra_lateral p {
font-size: 18px;
margin-top: 30px;
}
#barra_lateral ul {
margin-top: 20px;
}
#barra_lateral li {
font-size: 15px;
list-style-type: square;
}
#barra_lateral a {
color: black;
line-height: 165%;
text-decoration: none;
}
#barra_lateral img {
z-index: -1;
position: absolute;
margin-top: 50px;
}
#barra_horizontal {
border-bottom-style: solid;
border-bottom-color: #ec8643;
background-color: #ec8643;
width: 800px;
text-align: right;
}
#barra_horizontal a {
color: #fff;
font-size: 17px;
font-weight: bolder;
margin-right: 12px;
text-decoration: none;
}
#barra_horizontal a:hover, #barra_lateral a:hover {
text-decoration: underline;
}
#barra_inferior {
border-bottom-style: solid;
border-bottom-color: #ec8643;
background-color: #ec8643;
width: 800px;
text-align: center;
margin-top: 630px;
border-top-style: solid;
border-top-color: #ec8643;
border-width: 6px;
color: #fff;
font-size: 12px;
}
#enlaces_inferiores {
width: 800px;
text-align: center;
margin-top: 6px;
margin-bottom: 10px;
}
#enlaces_inferiores a {
margin: 0 4px;
}
#columna_uno {
width: 290px;
margin: 0 0 0 210px;
height: 600px;
position: absolute;
}
#columna_uno img {
float: left;
margin: 0 10px 10px 0;
border: 3px solid #ec8643;
height: auto;
width: auto;
}
#columna_uno_sector2 {
padding-top: 10px;
border-top: 1px dashed #ec8643;
}
#columna_dos {
width: 280px;
margin: 0 0 0 20px;
float: right;
height: 583px;
}
#columna_dos img {
float: right;
margin-right: 10px;
border: 3px solid #ec8643;
height: auto;
width: auto;
}
#columna_dos_sector2 {
width: 280px;
padding-top: 10px;
position: absolute;
text-align: justify;
border-top: 1px dashed #ec8643;
}
#columna_dos_sector2 img {
float: left;
}
#imagen_sinborde img {
border: 0;
}
#columna_dos_sector3 {
margin-top: 210px;
width: 280px;
padding-top: 10px;
position: absolute;
border-top: 1px dashed #ec8643;
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="estilo.css" media="screen" type="text/css" title="estilo">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="estilo_ie.css" />
<![endif]-->
<title>SanJustoEnLinea.com.ar</title>
</head>
<body>
<div id="contenedor">
<img src="sanjustoenlinea.png" alt="SanJustoenlinea.com.ar">
<div id="barra_lateral">
<img src="barra_lateral.png" alt="Barra de menu">
<p>Encontrá en San Justo:</p>
<ul>
<li><h1><a href="la-ciudad.html" name="la ciudad"> la ciudad </a></h1></li>
<li><h1><a href="mapa.html" name="mapa"> mapa </a></h1></li>
<li><h1><a href="noticias.html" name="noticias"> noticias </a></h1></li>
<li><h1><a href="remises.html" name="remises"> remises </a></h1></li>
<li><h1><a href="chat.html" name="chat"> chat </a></h1></li>
<li><h1><a href="inmobiliarias.html" name="inmobiliarias"> inmobiliarias </a></h1></li>
<li><h1><a href="restaurantes.html" name="restaurantes"> restaurantes </a></h1></li>
<li><h1><a href="boliches.html" name="boliches"> boliches </a></h1></li>
<li><h1><a href="bares.html" name="bares"> bares </a></h1></li>
<li><h1><a href="bandas.html" name="bandas"> bandas </a></h1></li>
<li><h1><a href="deportes.html" name="deportes"> deportes </a></h1></li>
<li><h1><a href="cursos.html" name="cursos"> cursos </a></h1></li>
<li><h1><a href="cines.html" name="cines"> cines </a></h1></li>
<li><h1><a href="deliverys.html" name="deliverys"> deliverys </a></h1></li>
<li><h1><a href="tramites.html" name="tramites"> trámites </a></h1></li>
<li><h1><a href="farmacias.html" name="farmacias"> farmacias </a></h1></li>
<li><h1><a href="comercios.html" name="comercios"> comercios </a></h1></li>
<li><h1><a href="profesionales.html" name="profesionales"> profesionales </a></h1></li>
<li><h1><a href="empleos.html" name="empleos"> empleos </a></h1></li>
</ul>
</div>
<div id="barra_horizontal">
<a href="index.html" name="inicio"> inicio </a>
<a href="publicar.html" name="publicar"> publicar </a>
<a href="foro.html" name="foro"> foro </a>
</div>
<div id="columna_uno">
<h2>Estreno en San Justo</h2>
<img src="pelicula_portada.jpeg" alt="Kung Fu Panda">
<h3><a href="http://www.kungfupanda.com" name="Kung Fu Panda">Kung Fu Panda</a></h3>
<p>
en <a href="http://www.cinemark.com.ar/complejodetalle.php?idcomplejo=6"
name="Cinermark 5">Cinemark 5</a>
</p>
<p>
(<a href="http://www.sanjustoenlinea.com.ar" name= "San Justo">San Justo</a>)
</p>
<p>
El Panda Po es el más vago de los animales del Valle de la Paz, sin embargo, se convierte
en el elegido para defender al Valle cuando su estilo de vida es amenazado por los enemigos.
Y con un sabio maestro será entrenado pese a que el duda de sus capacidades.
</p>
<div id="columna_uno_sector2">
Esto es texto en la segunda columna. Esto es texto en la segunda columna.
Esto es texto en la segunda columna. Esto es texto en la segunda columna.
</div>
</div>
<div id="columna_dos">
<h2>Delíverys en San Justo</h2>
<img src="pizza.jpg" alt="pizza">
<h3><a href="http://www.empanatta.com.ar" name="Empanatta">Empanatta</a></h3>
4651-2220 (Ocampo 2818)
<h3><em>Todo Relleno</em></h3>
4139-8390 (Hipólito Irigoyen 2312)
<h4><a href="deliverys.html" name="Deliverys en San Justo">Más delíverys en San Justo</a></h4>
<div id="columna_dos_sector2">
<h2>Cursos en San Justo</h2>
<div id="imagen_sinborde"><img src="teatro.jpg" alt="Teatro"></div>
<h3>
<a href="teatro.html" name="Teatro">Teatro</a>,
<a href="idiomas.html" name="Idiomas">Idiomas</a>,
<a href="coro.html" name="Coro">Coro</a>,
<a href="danza.html" name="Danza">Danza</a>,
<a href="taller-literario.html" name="Taller literario">Taller literario</a>,
<a href="dibujo-y-pintura.html" name="Dibujo y Pintura">Dibujo y Pintura</a>,
<a href="guitarra.html" name="Guitarra">Guitarra</a>...
</h3>
<h4><a href="cursos.html" name="Cursos en San Justo">Más cursos en San Justo</a></h4>
</div>
<div id="columna_dos_sector3">
<h2>Espectáculos en San Justo</h2>
<img src="espectaculo.jpg" alt="Espectáculos en San Justo">
<h3>Opera "Aída" de G. Verdi</h3> El 6 de septiembre en la UNLAM. Entrada libre.
<h4><a href="espectaculos.html" name="Espectáculos en San Justo">Más espectálos en San Justo</a></h4>
</div>
</div>
<div id="barra_inferior">
Todo lo que esta en San Justo, esta en SanJustoEnLinea.com.ar
</div>
<div id="enlaces_inferiores">
<a href="acerca-de.html" name="Acerca de">acerca de</a>
<a href="contacto.html" name="Contacto">contacto</a>
<a href="publicar.html" name="Publicar">publicar</a>
</div>
</div>
</body>
</html>
AMBOS PASAN LOS TEST DE LA W3C
En firefox se ve perfecto, en ie:
http://www.subirimagenes.com/imagen-pantallazo-848734.html
