Foros del Web » Creando para Internet » CSS »

Div en FF e IE

 Estas en el tema de Div en FF e IE en el foro de CSS en Foros del Web. Hola Soy nuevo en el foro, asi les pido paciencia. Ademas soy autodidacta asi que seguramente bastante desprolijo en CSS. Tengo un sitio que tiene ...
  #1 (permalink)  
Antiguo 28/02/2011, 15:53
 
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 13 años, 1 mes
Puntos: 0
Div en FF e IE
Hola

Soy nuevo en el foro, asi les pido paciencia. Ademas soy autodidacta asi que seguramente bastante desprolijo en CSS.
Tengo un sitio que tiene 4 divs sobre un grafico (esto ultimo dentro de una tabla generada por photoshop) es decir que la grafica la hice en photoshop) Hagamos de cuenta que son 4 lugares exactos donde tiene que ir el texto que los puse en DW dentro de divs. Hice un contenedor y luego los div hijos.
Al verse cualquier resolucion siempre el texto sale donde tiene que salir, (simpre en IE) pero al abrilo en FF o Chrome sale desplazados. Aca el codigo

Quien tenga una idea sera valorada. Gracias de antemano.

En rojo esta lo importante. El resto es codigo de la pagina. Espero me entiendan.
Se puede postear un enlace? Porque el error se ve mejor yendo al sitio.
Igual inserto un jpg

http://www.internetpublicidad.net/error.jpg

<style type="text/css">

<!--


#apDiv1 {
position:absolute;
left:142px;
top:295px;
width:181px;
height:475px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:602px;
top:285px;
width:172px;
height:333px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:380px;
top:287px;
width:169px;
height:370px;
z-index:3;
}
.Estilo3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
}
.Estilo6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
#apDiv4 {
position:absolute;
left:838px;
top:298px;
width:157px;
height:353px;
z-index:4;
}
.Estilo7 {
color: #0000FF
}
.Estilo8 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; }
-->
</style>
><BODY BGCOLOR=#FFFFFF LEFTMARGIN=100 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div style="width:1000px; ">

<div id="apDiv1" style="position:absolute">
<p align="left" class="Estilo8"> Su sitio en la primera<br>
p&aacute;gina del Google</p>
<p align="left" class="Estilo3">Desarrollamos, optimiza-<br>
mos e implementamos su<br>
publicidad en el buscador<br>
Google, donde miles de<br>
personas a diario buscan<br>
su producto o servicio;<br>
las 24 horas, en todo el <br>
pais.</p>
<p align="left" class="Estilo8">Para estar en Internet,<br>
hay que estar en Google.</p>
<p align="left" class="Estilo3">Nuestros servicios inclu-<br>
yen: an&aacute;lisis de la com-<br>
petencia, elecci&oacute;n de pa-<br>
labras clave, monitoreo <br>
de resultados, informes<br>
mensuales.<br>
</p>
<p align="center" class="Estilo3">&nbsp;</p>
</div>
<div id="apDiv2" style="position:absolute">
<p class="Estilo8"> Telemarketing</p>
<p class="Estilo6">Contacte a sus clientes <br>
a trav&eacute;s de operadores <br>
especializados en televen-<br>
tas.<br>
Controle la evoluci&oacute;n de<br>
su estrategia desde su <br>
propia PC. <br>
Le proveemos listados con <br>
tel&eacute;fonos, n&uacute;meros y au-<br>
dio de todos los llamados.</p>
<p class="Estilo6">Proyectos desde 1 hasta <br>
30 operadores.<br>
Contacto permanete con<br>
un ejecutivo asignado a <br>
su proyecto.</p>
<p class="Estilo6"></p>
<p class="Estilo6">&nbsp;</p>
<p class="Estilo6"></p>
</div>
<div id="apDiv3" style="position:absolute">
<p class="Estilo3"> <strong>E-Mail Marketing</strong><br>
</p>
<p class="Estilo3">Nuestro programa de<br>
e-mail maketing consiste <br>
en el env&iacute;o peri&oacute;dico <br>
de informaci&oacute;n a sus <br>
clientes (Newsletters) <br>
con el objetivo de<br>
fidelizar a su cartera de<br>
clientes existente y<br>
generar nuevas altas por<br>
los productos o servicios <br>
que ud. ofrece.</p>
<p class="Estilo3">Tambi&eacute;n permite apoyar <br>
otras campa&ntilde;as promo-<br>
cionales o publicitarias<br>
respetando su identidad <br>
gr&aacute;fica, y en todo caso,<br>
mejorandola.</p>
<p></p>
</div>
<div id="apDiv4" style="position:absolute">
<p align="center" class="Estilo7">Sin costo inicial</p>
<p align="center" class="Estilo7">Proyectos integrales</p>
<p align="center" class="Estilo7">Sin riesgo laboral</p>
<p align="center" class="Estilo7">R&aacute;pida implementaci&oacute;n</p>
<p align="center" class="Estilo7">Resultados medibles</p>
<p align="center" class="Estilo7">Profesionales altamente <br>
capacitados</p>
</div>
<font color="#999999" size="-1">
<!-- ImageReady Slices (index.psd) -->
</font><font size="-1">
<div align="center">
<p><font color="#333333">publicidad en internet publicidad web marketing digital
promocion de sitios e marketing publicidad y marketing poscicionamiento de
sitios en internet promocion de sitios webs internet y publicidad promocion
de sitios por internet- internet marketing publicidad digital publicidad google
promocion digital marketing en buscadores etrategias posicionamiento internet
publicidad y marketing</font></p>
<p><font color="#7D4735" size="4" face="Arial, Helvetica, sans-serif"><a name="inicio"></a></font></p>
</div>
</font>

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="59%">&nbsp;</td>
<td width="13%"><font size="2" face="Times New Roman, Times, serif"><a href="#faq">Pregunta
Frecuentes</a></font></td>
<td width="28%"><a href="javascript:window.external.AddFavorite('http ://www.internetpublicidad.net', 'Publicidad en Internet InternetPublicidad.net')"><font size="2">Ctrl+D
o click aqui para agregarnos a sus favoritos</font></a><font size="2">&nbsp;</font></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<TABLE WIDTH=1000 BORDER=0 CELLPADDING=0 CELLSPACING=0 >
<TR>
<TD COLSPAN=9>
<IMG SRC="Images/index_01.gif" WIDTH=1000 HEIGHT=16 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=16 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=7>
<IMG SRC="Images/index_02.gif" WIDTH=616 HEIGHT=4 ALT=""></TD>

<TD ROWSPAN=3> <a href="contactenos.html"><IMG SRC="Images/index_03.gif" ALT="" WIDTH=189 HEIGHT=55 border="0"></a></TD>
<TD ROWSPAN=7>
<IMG SRC="Images/index_04.gif" WIDTH=195 HEIGHT=601 ALT="marketing digital"></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=4 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=4>
<IMG SRC="Images/index_05.gif" WIDTH=294 HEIGHT=38 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="Images/index_06.gif" WIDTH=199 HEIGHT=167 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=5>
<IMG SRC="Images/index_07.gif" WIDTH=123 HEIGHT=552 ALT="publicdad"></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=38 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=5>
<IMG SRC="Images/index_08.gif" WIDTH=24 HEIGHT=559 ALT=""></TD>
<TD ROWSPAN=3>
<IMG SRC="Images/index_09.gif" WIDTH=151 HEIGHT=155 ALT=""></TD>
<TD COLSPAN=2 ROWSPAN=4>
<IMG SRC="Images/index_10.gif" WIDTH=119 HEIGHT=514 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=13 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=4>
<IMG SRC="Images/index_11.gif" WIDTH=189 HEIGHT=546 ALT="publicidad en internet"></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=116 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="Images/index_12.gif" WIDTH=199 HEIGHT=385 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=26 ALT=""></TD>
</TR>
<TR>
<TD ROWSPAN=2>
<IMG SRC="Images/index_13.gif" WIDTH=151 HEIGHT=404 ALT="publicidadengoogle"></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=359 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/index_14.gif" WIDTH=91 HEIGHT=45 ALT=""></TD>

<TD COLSPAN=3> <a href="mailto:[email protected]"><IMG SRC="Images/index_15.gif" ALT="" WIDTH=239 HEIGHT=45 border="0"></a></TD>
<TD>
<IMG SRC="Images/index_16.gif" WIDTH=111 HEIGHT=45 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=1 HEIGHT=45 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=24 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=151 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=91 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=28 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=199 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=12 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=111 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=189 HEIGHT=1 ALT=""></TD>
<TD>
<IMG SRC="Images/spacer.gif" WIDTH=195 HEIGHT=1 ALT=""></TD>
<TD></TD>
</TR>
</TABLE>
  #2 (permalink)  
Antiguo 28/02/2011, 16:08
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.458
Antigüedad: 15 años, 9 meses
Puntos: 53
Respuesta: Div en FF e IE
Para no molestarte con lo que hiciste bien y lo que hiciste mal, vamos a lo concreto.
El problema se debe al posicionamiento con absolute. Para que puedan acomodarse los div donde quieres lo mejor es que elimines la posición y
acomodes los div con margenes y con el selector float.
Asi bateando un poco con tu codigo te deberia quedar algo asi:

Código CSS: 
Ver original
  1. #apDiv1 {
  2. width: 181px;
  3. height: 475px;
  4. margin: 20px 5px 20px 10px;  /* donde el primer valor es el margen de arriba, luego a la derecha, abajo y a la izquierda */
  5. float: left;  /* le permite a los otros div colocarse al lado iz del anterior */
  6. z-index:1;
  7. }
  8. #apDiv2 {
  9. width:172px;
  10. height:333px;
  11. margin: 20px 5px 20px 10px; 
  12. float: left;
  13. z-index:2;
  14. }
  15. #apDiv3 {
  16. width:169px;
  17. height:370px;
  18. margin: 20px 5px 20px 10px; 
  19. float: left;
  20. z-index:3;
  21. }

el último div deberia flotarse solo. Pero quitale la posicion u los margenes que le pusiste.

Las medidas estan hechas a simple vista, ya te tocará poner los valores que necesites.

Espero te sirva de guia.

Saludos,
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
Última edición por gVenom; 28/02/2011 a las 16:26
  #3 (permalink)  
Antiguo 28/02/2011, 18:52
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Div en FF e IE
Se puede postear un enlace y es muy recomendable hacerlo para darte la respuesta más acertada.
Yo no estoy en contra del uso de la posición absoluta. Es muy buen método en ocasiones y una alternativa a los elementos flotantes para hacer columnas. Podrías habers usado posiciones absolutas en lugar de una tabla también en el fondo. Puedes usarla diréctamente en las imágenes en lugar de usar divs.
Retomando lo del problema, todo indica a que no has incluido una cabecera <!DOCTYE> o es incompleta. Prueba a usar la siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://w3.org/TR/REC-html40/loose.dtd">

En mi ordenador sólo reproduzco tu problema en ausencia del DOCTYPE.
  #4 (permalink)  
Antiguo 28/02/2011, 19:06
Avatar de sanxuan  
Fecha de Ingreso: enero-2011
Ubicación: Gijón
Mensajes: 671
Antigüedad: 13 años, 3 meses
Puntos: 36
Respuesta: Div en FF e IE
Corrijo lo anterior, creo que esta otra puede ser la causa de tu problema:
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=100 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>

Te recomiendo usar css para las propiedades anteriores. Usa lo siguiente:
body {
background-color:#ffffff;
margin: 0 0 0 100px;
}

He comprobado que Firefox no acepta ese margen en HTML para el body.

Etiquetas: fire, fox
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 23:52.