Firefox Me rompe la pagina

elburdel · #1 (**permalink**) 14/12/2010, 22:26

Que tal gente

Tengo el siguiente problema:

Realice esta pagina en photoshop, flash y dreamweaver.

El problema lo tengo que a la hora de visualizarlo en Firefox me rompe toda la pagina.

Y no se como arreglarlo.

Aca les dejo el link de la pagina para que opbserven como me lo rompe, y tambien para que puedan observar el codigo fuente.

http://www.poetasdenadie.com.ar/pagi.../template.html

Espero que me puedan ayudar.
Saludos
Matias.

caricatos · #2 (**permalink**) 15/12/2010, 00:24

Hola:

Por lo visto no tienes una hoja de estilos, y cada navegador usa sus estilos por defecto... puedes probar con algo así:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>

Saludos

emprear · #3 (**permalink**) 15/12/2010, 02:45

elburdel:

Es que realmente te estás complicando las cosas, prueba este código

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>XHTML 1.0 transitional</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html * {
margin: 0px;
padding: 0px;
border: none;
}
#tabla_uno{
border: 20px solid #000;
}
td {
vertical-align: top;
}
/*]]>*/
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="tabla_uno">
<tr>
<td colspan="2"><object type="application/x-shockwave-flash" data="http://www.poetasdenadie.com.ar/pagina-empresarial/banner.swf" width="812" height=
"98"><param name="movie" value="http://www.poetasdenadie.com.ar/pagina-empresarial/banner.swf" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<param name="play" value="false" />
<param name="wmode" value="opaque" />
<p class="getadobe">Flash Palyer no se encuentra o la versión no es compatible, utiliza el icono para ir a la página de descarga<br />
<a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a></p>
</object></td>
</tr>
<tr>
<td><object type="application/x-shockwave-flash" data="http://www.poetasdenadie.com.ar/pagina-empresarial/home.swf" width="126" height=
"346"><param name="movie" value="http://www.poetasdenadie.com.ar/pagina-empresarial/home.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="play" value="true" />
<param name="wmode" value="opaque" />
<p class="getadobe">Flash Palyer no se encuentra o la versión no es compatible, utiliza el icono para ir a la página de descarga<br />
<a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a></p>
</object></td>
<td><img src="http://www.poetasdenadie.com.ar/pagina-empresarial/imagenes/template_10.jpg" alt="" width="686" height="346" /></td>
</tr>
</table>
</body>
</html>

Saludos

elburdel · #4 (**permalink**) 15/12/2010, 07:45

El tema que es un TP para la facultad y la tematica es resolverlo con Tablas, ya que fue lo unico que aprendimos no nos enseñaron nada de CSS.
Ya vere si lo puda resolver de alguna manera sino lo terminare agregando tal como me recomendaron ustedes.

Saludos!

emprear · #5 (**permalink**) 15/12/2010, 09:13

elburdel

Si te fijas, y adaptando a tu diseño original, yo tambien use tablas, con el css lo unico que hice en realidad fue darle el borde negro.

Saludos

elburdel · #6 (**permalink**) 15/12/2010, 20:28

Con el primer código no me funciono.

Con el ultimo se me arreglo el problema, pero el banner, lo que va arriba de todo Firefox no me lo lee. En Explorer se sigue viendo tal cual le dije que se vea. No se cual será el problema. El codigo es exactamente el mismo que me pasaste vos, no le modifique nada.

emprear · #7 (**permalink**) 15/12/2010, 20:43

elburdel

ahi está funcionando, es que equivoque los parametros, al ser una animación y repetir el efecto habia que poner

play value="true"
y
loop="true"

aqui la demo

http://foros.emprear.com/flash/t1.html
mira el código

algo que se me paso
bajate esta script
http://foros.emprear.com/flash/fix-object.js
y ponela en la misma carpeta del html
Sirve para corregir un bug de Opera que muestra el mensaje""Haga Clcik aqui para activar este control"

Ya le inclui la llamada a la script en el HTML

Saludos

elburdel · #8 (**permalink**) 15/12/2010, 20:53

Muchsa gracias, ahi lo veo perfecto. Nunca supe porque el dreamweaver te creaba por defecto esa carpeta, ahora lo se, jaja.

Saludos!

elburdel · #9 (**permalink**) 15/12/2010, 23:22

Si quisiera escribir texto o ponerle una imagen encima de la barra negra, podría?¿De que forma?
Saludos.

emprear · #10 (**permalink**) 16/12/2010, 07:53

Estudiando un poco

elburdel · #11 (**permalink**) 16/12/2010, 17:01

OK, es que como yo el texto que hiria en las barras, lo habia armado por separado en Photoshop, no me había puesto a pensar en aquello.
Ya investigaré.
Saludos!

Portgaz · #12 (**permalink**) 16/12/2010, 20:39

Cita:

Iniciado por elburdel

Si quisiera escribir texto o ponerle una imagen encima de la barra negra, podría?¿De que forma?
Saludos.

¿¿BARRA NEGRA??
Pues dejame decirte que no podras, ya que esta "BARRA NEGRA" es el borde de la tabla que le has dado con CSS

border: 20px solid #000;

Asi que no podras escribir texto encima de este

emprear · #13 (**permalink**) 16/12/2010, 20:51

Portgaz:

Si que puede, utilizando la etiqueta "caption", el caso es que no se lo expliqué, ya que como verás se supone que es un trabajo práctico para la facultad, algo al menos, tendría que quedar librado a su iniciativa, no crees?

Saludos

elburdel · #14 (**permalink**) 16/12/2010, 21:17

jaja, concuerdo totalmente. Pero el trabajo tendria que hacerlo en HTML porque no vimos CSS,pero de todas maneras lo voy a investigar porque me interesa. Ya que esta Web va a ser mi carta de presentación para futuros trabajos.

Gracias de todas formas.

Saludos!

emprear · #15 (**permalink**) 16/12/2010, 21:25

elburdel:
Me alegra que concuerdes, y te aclaro un detalle, la parte del CSS, ya la resolvimos al principio, lo del atributo "caption" es estrictamente html, y esa etiqueta en particular, se aplica específicamente a las tablas, que según entendí, era la temática del trabajo

Saludos

Portgaz · #16 (**permalink**) 17/12/2010, 09:53

Cita:

Iniciado por emprear

Portgaz:

Si que puede, utilizando la etiqueta "caption", el caso es que no se lo expliqué, ya que como verás se supone que es un trabajo práctico para la facultad, algo al menos, tendría que quedar librado a su iniciativa, no crees?

Saludos

Pues por mas que trato de decir, tienes razon.
No sé, no se puede poner texto dentro del border negro.

Proceso distinto seria agregarle el texto pegado al borde y dale background negro.

Ya que <caption> a lo poco que lo vi, era para darle un titulo a la tabla.

No sé en realidad como es posible añadir texto dentro del border.

emprear · #17 (**permalink**) 17/12/2010, 10:09

Portgaz:

elburdel dijo literalmente

Cita:

Si quisiera escribir texto o ponerle una imagen encima de la barra negra, podría?¿De que forma?
Saludos.

Yo por encima, entiendo "sobre", "arriba", no "dentro". y eso es lo que hice, en este caso tambien le di a caption un color de fondo y un color de texto.
Incluso si lo desea, puede remover el borde superior fijando
border-left
border-rigth
border-bottom

en lugar de simplemente border

saludos

Portgaz · #18 (**permalink**) 17/12/2010, 10:26

Asi que todo es rollo y simplemente hablamos de un error de lectura o error de comprensión.

Bueno emprear, tienes razón, encima de la barra negra.
Aunque no todos los entendemos de la misma forma, he vuelto a leer lo que el dijo, y sigo con que "ENCIMA" es algo como, pon esta taza encima de la mesa.

Por lo que mi comprension fue, que el texto quedara dentro de este border.

Y si, efectivamente esa era la solucion que tenia quitar el borde de encima y darle ese background negro.

Pero en fin... Ya no se hable más, sera o no error mio. Siento que tienes mas razón.
Saludos

marim · #19 (**permalink**) 17/12/2010, 11:35

Bueno, a mi a veces me confunde eso, pero lo pensé por otro lado,
por ejemplo cuando digo que pongo un texto dentro de un div estoy usando la palabra dentro y no sobre o encima o arriba. ademas probé y tambien se puede poner un <img> dentro del caption

chau chicos

elburdel · #20 (**permalink**) 17/12/2010, 16:34

Perdon por la mala expresion. Pero por encima me referia a esto.

Portgaz · #21 (**permalink**) 17/12/2010, 19:01

Cita:

Iniciado por elburdel

Perdon por la mala expresion. Pero por encima me referia a esto.

Entonces esto quere decir que yo estaba acertado.
Pues efectivamente no se puede escribir en el borde (dentro de este)

Pero si se puede lograr un efecto parecido como lo ha dicho emprear
Que seria dando el borde solo a left, right y bottom y en la parte de arriba con un caption o div, poneis el texto que quereis y darle un background negro.

P.D: aunque creo que seria mejor el div que el caption, para poder darle las propiedades de 20px de altura y el fondo negro y a la ves darle un margin entre la parte de arriba de la tabla y el texto, que queden pegados.

Saludos.

Portgaz · #22 (**permalink**) 17/12/2010, 19:13

Mira el codigo:

http://html09.freeiz.com/border-title/index.html

Saludos

P.D: He hecho lo siguiente:

1) dar borde, como lo dijo "emprear" a left, right & bottom
2) crear una celda colspan 2 con 100 de ancho arriba de la cabezera.
3) con CSS dandole altura de 20px y dandole background de color negro.

Saludos

emprear · #23 (**permalink**) 17/12/2010, 19:24

Portgaz:

Como te noto muy entusiasta en tu participación en este y otros posts en los que nos hemos cruzado. te voy a explicar una vez más, y de paso, vemos si elburdel logra por fin presentar su trabajo práctico

Yo no se si es encima, atrás, al costado, solo te infortmo que para corregir su código y lograr lo que desea con la menor cantidad de modificaciones posibles, esta es una solución más que válida

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>XHTML 1.0 transitional</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
html * {
margin: 0px;
padding: 0px;
border: none;
}
#tabla_uno{
border: 20px solid #000;
}
td {
vertical-align: top;
}
caption{
color: #FFF;
background-color: #000;
}
#tabla_uno{
border-top: 0px solid #000;
}
/*]]>*/
</style>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0" id="tabla_uno">
<caption><img src="http://www.poetasdenadie.com.ar/encima.jpg" alt="" /></caption>
<tr>
<td colspan="2"><object type="application/x-shockwave-flash" data="http://www.poetasdenadie.com.ar/pagina-empresarial/banner.swf" width="812" height=
"98"><param name="movie" value="http://www.poetasdenadie.com.ar/pagina-empresarial/banner.swf" />
<param name="loop" value="true" />
<param name="menu" value="false" />
<param name="play" value="true" />
 
<p class="getadobe">Flash Palyer no se encuentra o la versión no es compatible, utiliza el icono para ir a la página de descarga<br />
<a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a></p>
</object></td>
</tr>
<tr>
<td><object type="application/x-shockwave-flash" data="http://www.poetasdenadie.com.ar/pagina-empresarial/home.swf" width="126" height=
"346"><param name="movie" value="http://www.poetasdenadie.com.ar/pagina-empresarial/home.swf" />
<param name="loop" value="false" />
<param name="menu" value="false" />
<param name="play" value="true" />
<param name="wmode" value="opaque" />
<p class="getadobe">Flash Palyer no se encuentra o la versión no es compatible, utiliza el icono para ir a la página de descarga<br />
<a href="http://get.adobe.com/es/flashplayer/" onclick="this.target='_blank'">Descargar Flash Player</a></p>
 
</object></td>
<td><img src="http://www.poetasdenadie.com.ar/pagina-empresarial/imagenes/template_10.jpg" alt="" width="686" height="346" /></td>
</tr>
</table>
</body>
</html>

copia y pega ese html en una página y observa los resultados

como verás sobreescribí el valor para border-top hacia el final del Css y puse el caption con la imagen en cuestion adentro. El código es 100% válido y no veo que haya que ir poniendo capas u otros elementos.

Por supuesto, Estás Acertado, no se puede escribir un texto dentro del borde !!!, pero nadie tampoco afirmó eso en ningún momento.

Para terminar y que experimentes un poco, date una vuelta por
http://www.css3.info/preview/border-image/

y quien te dice puedas poner una imagen como borde... pero eso, ya es otra historia

Saludos

Portgaz · #24 (**permalink**) 17/12/2010, 19:39

-yo quite el border general y agregue 3 para L, R y B
-Tu dejaste el border general y solo agregaste el T con 0px para quitarlo

-yo cree una nueva celda, meti texto y le di el color de fondo negro.
-tu solo agregaste el captio y de igual manera le diste el fondo negro (en este caso usaste la imagen)

Pues no me queda nada decir, hay miles maneras de hacerlo y en verdad el tuyo tiene menos codigo y modificaciones.
Probablemente aprenda de ti

Saludos

elburdel · #25 (**permalink**) 19/12/2010, 13:41

Emprear: Sinceramente no entiendo tu codigo CSS.

Tu codigo CSS seria el siguiente:

Código:

html * {
margin: 0px;
padding: 0px;
border: none;
}
#tabla_uno{
border: 20px solid #000;
}
td {
vertical-align: top;
}
caption{
color: #FFF;
background-color: #000;
}
#tabla_uno{
border-top: 0px solid #000;
}
/*]]>*/
</style>

#tabla_uno{
border: 20px solid #000;
}
Entiendo aca que le estas diciendo que a la tabla que tengo como ID: tabla_uno le asigne un borde de 20px con un color de #000;
td
{
vertical-align: top;
}
Entiendo que le asignas la alineacion:
caption{
color: #FFF;
background-color: #000;
}
Comprendo que aca le estas asignando un caption para poder escribir sobre encima. Pero lo que no entiendo es como el navegador entiende que lo que se escriba alli va a ser la barra de arriba y no la de la derecha o la de la izquierda o la de la abajo.

Saludos!

emprear · #26 (**permalink**) 19/12/2010, 14:02

elburdel:

hombre, es que tienes una confusión de aquellas.

vamos por partes

Primero el "<caption>" y la imagen dentro se establecen en el HTML no en el css

Código HTML:

Ver original<table border="0" cellspacing="0" cellpadding="0" id="tabla_uno">
<caption><img src="http://www.poetasdenadie.com.ar/encima.jpg" alt="" /></caption>
.... sigue

Ahora el CSS
Lo primero que tenes que entender es que el css lo lee el navegador desde el principo hacia el final. si yo pongo

.menu{
color: red;
}

.menu {
color: blue;
}

El que prevalece es el "blue", porque redefimió el valor red del primer .menu

ahora sigamos con el mio

Con esto quitamos todos los margenes y paddings a todo los elementos y conseguimos que tu tabla comience en el extremo superior izquierdo de la pantalla

html * {
margin: 0px;
padding: 0px;
border: none;
}

Para reconstruir tu diseño original sacando todo lo que tenias demas
#tabla_uno{
border: 20px solid #000;
}

td {
vertical-align: top;
}

Después quiziste agregar un texto puse caption en el html y le di estilo con esto
caption{
color: #FFF;
background-color: #000;
}

Para que nuestro amigo Portgaz se quede tranquilo con sus bordes, arriba, encima ,a bajo, etc. Le quite el borde superior, "REDEFINIENDO" el border-top con un ancho de 0px, con lo cual obviamente no se ve
#tabla_uno{
border-top: 0px solid #000;
}
/*]]>*/
</style>

No sé que es lo que no entiendes

Cita:

que se escriba alli va a ser la barra de arriba y no la de la derecha o la de la izquierda o la de la abajo.

el contenido va en el CAPTION, en este caso una imagen. ninguna barra de ningún lado.

Te sugiero un par de manuales básicos de HTML y CSS

Saludos

elburdel · #27 (**permalink**) 19/12/2010, 14:12

Si, comprendo que dentro del Caption se escribe lo que quiero que aparezca, eso lo tengo claro.

Lo que no logro entender es el navegador como interpreta que este código:

caption{
color: #FFF;
background-color: #000;
}

Corresponde al Margen Superior, Inferior, Izquierdo, o Derecho.

emprear · #28 (**permalink**) 19/12/2010, 14:19

Si en css pongo el valor de una etiqueta, no su id o clase (id="xxx", o class="xxx") la propiedad se aplica sobre todas las etiquetas "<caption> " Además en tu caso, si lo que va a ir dentro es una imagen que efectivamente ya es algo blanco sobre negro, esa parte del css la podes borrar, yo la use porque en mi primer ejemplo puse ahi un texto. la imagen la puse mas tarde.

una cosa es que me preguntes como se hace tal cosa, y yo te demuestre como, y otra que preguntes el porque, porque quizás eso lleve una respuesta de páginas y páginas.

Ves el por que de los manuales...

Saludos

elburdel · #29 (**permalink**) 19/12/2010, 21:17

Ami manera lo logre.
Lo que hice fue darle un borde de 0 pixeles a lo que sería el Pie de Página. y ahi le cree otra tabla donde coloque la imágen.

Ahora tengo otro problema. Centre las dos tablas. Y en explorer lo veo centrado y otra vez en firefox no. ¿Podrían decirme a que se podría deber esto?

Este es el enlace que pueden comprobar lo que digo:

http://74.53.5.24/~matiasclemente.com.ar/

Muchas gracias por la ayuda que me han brindado durante todo este post.

Saludos!

Edit: Solucionado. Les elimine las siguientes lineas de código.

html * {
margin: 0px;
padding: 0px;
border: none;
}