CSS y WEB :( por favor ayuda...

16/12/2006 - 18:42 por Marcos Galaviz | Informe spam

Hola a todos aunque soy nuevo en esto del rollo web he intentado emplear los
CSS que me parece lo mejor para el diseño web sin embargo tengo algunos
problemillas y aun me resultan confusas algunas cosas como por ejemplo en
como se muestra la pagina en IE6 y en firefox, adjunto imagenes (espero no
se molesten) donde en firefox el estilo del "Contenido" comienza mas arriba
que en IE6 ¿hay alguna forma de homologar esto? les copio los estilos que
intervienen en esta parte:

/* CSS Document */
#Encabezado{position:absolute; height:140px; width:770px;
background-color:#666666; z-index:20}
#Busqueda{position:absolute; top:49px; width:100px; height:40px; left:55%;
z-index:21}
#Margen_izquierdo{position:absolute; top:140px; width:140px; height:470px;
background-color:#FFFFFF ; z-index:19; border-right-color:#95C845;
border-right-width:10px; border-right-style:solid}

#Centrado{top:0px; height:600px; width: 770px; margin:auto; text-align:left;
background-color:#ECECEC}

#Contenido{position:relative; top:140px; left:150px; height:444px;
width:620px; text-align:center; overflow:auto; background-color:#ECECEC;
z-index:18}

ahora como estan en la pagina:

<body>
<DIV id="Centrado">
<DIV id="Encabezado">
<p align="center"><img src="/autos/IMAGES/imagen_encabezado.jpg"
width="770" height="140"></p>
</DIV>

<div id="Busqueda">
<p align="left"></p>
</div>

<DIV id="Margen_izquierdo"> <br>


</DIV>

<div id="Contenido">
</div>
</DIV>
</body>

Siga el debate

1 respuesta

Tengo una respuesta

Preguntas similare

Mostrar todos los temas similares

Leer las respuestas

#1 Miguel Gonzalez

17/12/2006 - 18:07 | Informe spam

Hola Marcos.

Creo que el culpable es el párrafo que contiene la imagen: tiene un
margen propio.

Prueba a establecer su margen a 0.

#Encabezado p{margin:0;}

Por otro lado, ten en cuenta que las CSS "vierten" sus estilos en
cascada. Es posible que otras reglas (incluyendo las que por defecto
tienen los diversos elementos HTML en cada navegador) influyan en la
visualización del documento.

Por último, recordarte que IE tiene su "peculiar" manera de interpretar
los estándares CSS (Firefox también tiene alguna "iniciativa" parecida,
aunque menos) con lo que es bastante difícil que te quede igual en ambos
navegadores (si testeas además con Opera, Safari, Konqueror y las
diferentes versiones de IE y Netscape/Mozilla es para volverse loco).
Una solución que tiene sus pros y sus contras es utilizar "CSS hacks",
es decir, escribir las reglas de estilo de forma que algunos navegadores
no las entiendan y otros sí, creando una especie de "filtros CSS" (en
internet puedes encontrar abundante información sobre esta técnica)

Una regla básica: Cuanto más sencilla es la estructura de una página,
tanto más cómodo es darle un formato que quede aproximadamente igual en
(casi) cualquier navegador.

Saludos!
Miguel

Marcos Galaviz escribió:

Hola a todos aunque soy nuevo en esto del rollo web he intentado emplear los
CSS que me parece lo mejor para el diseño web sin embargo tengo algunos
problemillas y aun me resultan confusas algunas cosas como por ejemplo en
como se muestra la pagina en IE6 y en firefox, adjunto imagenes (espero no
se molesten) donde en firefox el estilo del "Contenido" comienza mas arriba
que en IE6 ¿hay alguna forma de homologar esto? les copio los estilos que
intervienen en esta parte:

/* CSS Document */
#Encabezado{position:absolute; height:140px; width:770px;
background-color:#666666; z-index:20}
#Busqueda{position:absolute; top:49px; width:100px; height:40px; left:55%;
z-index:21}
#Margen_izquierdo{position:absolute; top:140px; width:140px; height:470px;
background-color:#FFFFFF ; z-index:19; border-right-color:#95C845;
border-right-width:10px; border-right-style:solid}

#Centrado{top:0px; height:600px; width: 770px; margin:auto; text-align:left;
background-color:#ECECEC}

#Contenido{position:relative; top:140px; left:150px; height:444px;
width:620px; text-align:center; overflow:auto; background-color:#ECECEC;
z-index:18}

ahora como estan en la pagina:

<body>
<DIV id="Centrado">
<DIV id="Encabezado">
<p align="center"><img src="/autos/IMAGES/imagen_encabezado.jpg"
width="770" height="140"></p>
</DIV>

<div id="Busqueda">
<p align="left"></p>
</div>

<DIV id="Margen_izquierdo"> <br>


</DIV>

<div id="Contenido">
</div>
</DIV>
</body>

Siga el debate Respuesta

Responder a este mensaje

Ads by Google

Hacer una pregunta

Tengo una respuesta

Busqueda sugerida