Foros del Web » Creando para Internet » HTML »

Incompatibilidad

 Estas en el tema de Incompatibilidad en el foro de HTML en Foros del Web. Buenas, he creado un sitio web mediante capas (div) y el cual veo perfectamente en navegadores como Safari y Chrome, pero no en Firefox ¿por ...
  #1 (permalink)  
Antiguo 09/12/2010, 18:51
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Incompatibilidad
Buenas, he creado un sitio web mediante capas (div) y el cual veo perfectamente en navegadores como Safari y Chrome, pero no en Firefox ¿por que motivo? ni idea, lo que si me he percatado es que el problema se encuentra un solo cuatro capas, las últimas, las cuales se montan la una encima de la otra.

Saludos y gracias.
  #2 (permalink)  
Antiguo 09/12/2010, 18:56
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: Incompatibilidad
tienes error de linea 13, hay un simbolo raro invisible, tienes que eliminarlo.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #3 (permalink)  
Antiguo 09/12/2010, 19:02
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: Incompatibilidad
Mil disculpas.

Código: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" href="css/index.css" type="text/css" media="screen" />
<title>HostPlanet.es - Inicio -</title>
</head>

<body text="555555" alink="#00AEEF">
<div id="cabecera">
<div class="img">
  <p>&nbsp;</p>
  <p><img src="css/img/banner.png" alt="banner"/></p>
</div>
<div class="btn">
  <p>&nbsp;</p>
  <p>Inicio - Sobre Nosotros - Servicios - Portafolio - Contacto </p>
  </div>
</div>
<div id="contenido">
  <div class="tit">
  <p>
  <br />
  <img src="img/titulo.png" alt="titulo" /></p>
  <div align="left"><img src="img/subtitulo.png" alt="subtitulo"/>
  </div>
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><img src="img/lineado.png" alt="separador" /></p>
  <p style="text-align:justify" class="entrada">Proporcionamos soluciones de <strong style="color:#000000">primera clase</strong> web para organizaciones y peque&ntilde;as empresas <br />
    que buscan hacer un <strong style="color:#000000">gran impacto </strong>en Internet. Nuestros servicios incluyen dise&ntilde;o de p&aacute;ginas <br />
  web, campa&ntilde;as de marketing online y posicionamiento en buscadores.</p>
   <p><img src="img/lineado.png" alt="separador" /></p>
   <p>&nbsp;</p>
  <div class="bloque1" ><p>&nbsp;</p>
     <p><img src="img/caja1.png" alt="webdesign" /></p>
     <p><img src="img/lineadobox.png" alt="lineadobox" /></p>
     <p style="color:#FFFFFF">Ofrecemos soluciones de dise&ntilde;o <br /> 
	 web de la m&aacute;s alta calidad. <br />
       Vamos a trabajar con usted desde <br />
       el principio para que entienda los <br />
       requisitos exactos y continuamente<br />
	se trabajar&aacute; con para <br />
	asegurarse de que est&aacute; contento <br />
	con el sitio final que usted compra.       </p>
<img src="img/detalles.png" alt="detalles" />
  </div>
  <div class="bloque2" ><p>&nbsp;</p>
     <p><img src="img/caja2.png" alt="webdesign" /></p>
     <p><img src="img/lineadobox.png" alt="lineadobox" /></p>
     <p style="color:#FFFFFF">Podemos ayudarle a promocionar <br />
       su negocio, tanto en los mundos <br />
       online y offline. Nos especializamos en<br />
una amplia gama de campos de <br />
campa&ntilde;as de marketing viral, con <br />
grandes facilidades para pagar la <br />
publicidad para usted. Su marca estar&aacute; <br />
en buenas manos con nosotros.</p>
<img src="img/detalles.png" alt="detalles" />
  </div>
  <div class="bloque3"><p>&nbsp;</p>
     <p><img src="img/caja3.png" alt="webdesign" /></p>
     <p><img src="img/lineadobox.png" alt="lineadobox" /></p>
     <p style="color:#FFFFFF">&iquest;Quieres atraer m&aacute;s tr&aacute;fico a su sitio? <br />
       Usted ha venido al lugar correcto! <br />
       Podemos aumentar el tr&aacute;fico a su sitio <br />
       de una manera org&aacute;nica y eficaz que <br />
       garantice un mayot n&uacute;mero de visitas <br />
       conscientes de su negocio y los <br />
     productos / servicios que ofrece.</p><br />
<img src="img/detalles.png" alt="detalles" />
  </div>
  <p>&nbsp;</p>
  <br />



  <p><img src="img/lineado.png" alt="separador" /></p><br />
</div>
<div id="informacion">
<div class="clientes">
  <p><img src="img/testimonio.png" alt="testimonio de clientes" />
    </p>
  <p>
    </p>
  <p align="left" style="font-size:14px"><img src="img/caja.png" alt="caja" align="left" style="margin-right:30px">&quot;HostPlanet.es cre&oacute; un sitio web hermoso y fue un <br />placer trabajar durante todo el proceso ...&quot;</p>
  <p align="left" style="font-size:15px"><b>Sarah Jhonson</b> <br />
Web Design Media</p><br />
  <p align="left" style="font-size:14px"><img src="img/caja.png" alt="caja" align="left" style="margin-right:30px">&quot;HostPlanet.es cre&oacute; un sitio web hermoso y fue un <br />placer trabajar durante todo el proceso ...&quot;</p>
  <p align="left" style="font-size:15px"><b>Sarah Jhonson</b> <br />
Web Design Media</p>
<br />
  <p align="left" style="font-size:14px"><img src="img/caja.png" alt="caja" align="left" style="margin-right:30px">&quot;HostPlanet.es cre&oacute; un sitio web hermoso y fue un <br />placer trabajar durante todo el proceso ...&quot;</p>
  <p align="left" style="font-size:15px"><b>Sarah Jhonson</b> <br />
Web Design Media</p>
</div>
<div><img src="img/separadorh.png" alt="separador horizontal" align="left" /></div>
<div class="proyecto">
  <p><img src="img/destacado.png" alt="testimonio de clientes" />
<p>  <img src="img/subtituloproy.png" alt="subtitulo proyecto destacado" /></p>
    </p>
  <p><img src="img/screen.png" alt="screen" />
    </p>
  <p align="left">Este proyecto consisti&oacute; en la organizaci&oacute;n de una campa&ntilde;a de <br />
    marketing en l&iacute;nea para ayudar a promover la marca Yoshi. <br />
    El resultado de esta campa&ntilde;a result&oacute; en un incremento del 200% <br />
    en las ventas de Yoshi en un per&iacute;odo de seis meses de tiempo.</p>
  <p align="left">Haga clic aqu&iacute; para obtener m&aacute;s detalles&gt;&gt;</p>
  <p align="left">&nbsp;</p>
  <p align="left" style="font-size:15px">&nbsp;</p>
</div>

</div>
<div id="sitemap"><table width="754" border="0" align="center" cellspacing="0" style="text-align:left; font-size:18px;">
  <tr style="color:#FFFFFF">
    <th>Sobre nosotros </th>
    <th>Servicios</th>
    <th>Portafolio</th>
    <th>Contacto</th>
  </tr>
  <tr>
    <td style="vertical-align:top; color:#afafaf">
      <p>Nosotros<br />
        Clientes<br />
        Empleo<br />
        Opini&oacute;n<br />
        Legal<br />
      Cantacto</p></td>
    <td style="vertical-align:top; color:#afafaf"> <p>Alojamiento<br />
      Marketing<br />
      Posicionamiento<br />
      Dise&ntilde;o<br />
      Dise&ntilde;o web<br />
      Promociones<br />
      Aplicaciones</p></td>
    <td style="vertical-align:top; color:#afafaf"><p>Dise&ntilde;o web<br />
      Artes gr&aacute;ficas<br />
      Logotipos<br />
      Carteler&iacute;a</p></td>
    <td style="vertical-align:top; color:#afafaf"><p>Informaci&oacute;n<br />
      Soporte t&eacute;cnico<br />
      Feedbac<br />
      Gesti&oacute;n<br />
      Empleo</p></td>
  </tr>
</table>
</div>
<div id="pie">
 <table border="0" cellspacing="0" align="center" width="918">
  <tr>
    <td width="457" align="left">Copyright &copy; 2011 ~ HostPlanet.es ~ Todos los derechos registrados</td>
    <td width="247" align="right"><font color="#afafaf" size="+2">Encuentranos en:</font></td>
    <td width="208" align="right"><img src="img/email_32.png" alt="correo" />&nbsp;<img src="img/skype_32.png" alt="skype" />&nbsp;<img src="img/facebook_32.png" alt="facebook" />&nbsp;<img src="img/flickr_32.png" alt="flick" />&nbsp;<img src="img/twitter_32.png" alt="twitter" />&nbsp;</td>
  </tr>
</table>
</div>
	
</body>
</html>
  #4 (permalink)  
Antiguo 09/12/2010, 19:13
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: Incompatibilidad
veras, tampoco se puede hacer mucho porque solo has mostrado el html y el problema esta en css. por lo que este tema no va en html, sino en css. de todos modos, seria mas facil si indicas la url donde se pueda ver el problema.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #5 (permalink)  
Antiguo 10/12/2010, 00:34
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: Incompatibilidad
Código: 
/* CSS Document */

/* BODY */
BODY {background-image: url(img/bg1.jpg);
text-align:center;
margin:0 auto;
}

/* CABECERA */

#cabecera{
	left:0px;
	top:0px;
	width:918px;
	height:131px;
	margin:0 auto 0 auto; 	
	float: center}
.btn
{
	width:613px;
	height:131px;
	text-align:right;
	float:right;
	font-size: 18px;
	color: #FFFFFF;
}
.img
{
width:305;
height:131px;
float:left;
}
/* CONTENIDO */

#contenido{
	left:0px;
	top:0px;
	width:918px;
	margin:0 auto 0 auto; 	
	float: center}
.tit
{
	width:633;
	height:44;
	float:left;
}
.sep
{
	height:72px;
}
.entrada
{font-size: 24px}
.bloque1
{
	width:306px;
	height:350px;
	float: left;
	background-image: url(../img/bloque.png);
	background-repeat: no-repeat;
	background-position: center;
	}
.bloque2
{
	width:306px;
	height:350px;
	float: left;
	background-image: url(../img/bloque.png);
	background-repeat: no-repeat;
	background-position: center;
	}
.bloque3
{
	width:306px;
	height:350px;
	float: left;
	background-image: url(../img/bloque.png);
	background-repeat: no-repeat;
	background-position: center;
	}
#informacion{
left:0px;
	top:0px;
	width:918px;
	margin:0 auto 0 auto; 	
	float: center}
.clientes{
	width: 440px;
	float: left;
	text-align: left;
}
.proyecto
{
	float:right;
	text-align:left;
	width: 440px;
}
#sitemap{
	width:918px;
	float:center;
	left: 0px;
	margin: 0 auto 0 auto;
	top: 0px;
	}
#pie{
width:918;
float:center;
lext:0px;
margin:0 auto 0 auto;
}
.derechos
{
width:300;
float:left;
}
.redes{
float:right;
width:600px;
margin:0 auto 0 auto;
}
  #6 (permalink)  
Antiguo 10/12/2010, 02:15
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: Incompatibilidad
fijate que tienes elementos flotando. cuando se flota un elemento, estas cambiando el flujo del rendimiento normal y eso, ademas de afectar al propio elemento, tambien afecta a los elementos contiguos. cuando quieres que los elementos contiguos no sean afectado por este comportamiento, tienes que indicarselo con clear. por cierto, limpia el css de los errores. pasalo por el validador para que descubras los errores, pues tienes valores que jamas he visto.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #7 (permalink)  
Antiguo 10/12/2010, 04:11
 
Fecha de Ingreso: noviembre-2010
Mensajes: 234
Antigüedad: 14 años
Puntos: 2
Respuesta: Incompatibilidad
No comprendo lo de clear, he sustituido los floats por los clears y la verdad es que se ha deformado bastante mas jejeje.
Creo que no he comprendido bien el concepto.
  #8 (permalink)  
Antiguo 10/12/2010, 04:21
Avatar de zerokilled
Javascripter
  
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 6 meses
Puntos: 1485
Respuesta: Incompatibilidad
si no tienes idea de css, te recomiendo que comiences por algun tutorial. no tienes que cambiar los float por clear. es solamente aplicarle la propiedad clear al elemento que esta fallando para obligarlo a que baje en una nueva linea. http://librosweb.es/css/capitulo5/po..._flotante.html
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.

Etiquetas: incompatibilidad
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 12:01.