Hola a todos!!! Me estoy comiendo la cabeza por intentar que mis pags se vean igual con firefox que con internet explorer. He ido cambiando cosas en la hoja de estilos, y he conseguido que se parezcan algo más... pero hay dos cosas que se me resisten, y por horas que me paso mirando la hoja de estilos no logro corregirlo (al menos, sin estropear otra cosa). Os copio aquí lo que tengo en la hoja de estilos a ver si me podéis ayudar:
Os dejo tmb el código de la pag html:
Las dos cosas que no logro igualar son:
1. la anchura de la pag: yo pretendo ponerle 1000px; y así puse. En IE se me ve bien, está a 1000px, y no me aparece ninguna barra de desplazamiento abajo, porque no hay nada que desplazar (todo esto a pantalla completa). En cambio con firefox, si que me aparece la barra de desplazamiento, por que la pag no está a 1000px. Esto hace que las cosas queden mal colocadas, por ej, todo lo que va en center, no está en el centro de lo que ves, (como pasa en IE).
2. Con firefox el texto está desplazado un poco más abajo que con el explorer abajo. Se nota, por que a los divs, les tengo fondos, uno para cada uno, que son justos en medida. Con internet explorer quedan todos los párrafos en su sitio, y con firefox, el último se sale del fondo.
últimamente, le estoy echando la culpa al margin y al padding, creo que aun no me ha quedado claro como funcionan. Y e probado a quitar todo el contenido, y quitandolo, queda bien.
Me podéis ayudar? A ver que es lo que estoy poniendo mal.
gracias, bsiños
body { margin: 0;
width: 1000px;
background:#FFFFFF;
outline: none;
padding: 0;}
a {outline: none;}
#top { background: #FFFFFF url(objetos/capii.jpg) no-repeat ; width:1000px;
height:200px;
}
#curva-superior { background-image: url(objetos/curva-superior.png) ;
background-repeat: no-repeat ;
width:981px ;
height: 14px ;
overflow: hidden;
}
#cabecera {
width: 1000px;
height: 100px;
background-image: #FF8C00
}
#menu {
background:#000000 ;
margin:0px 10px 0px 10px;
padding:0;
text-align:center;
height:25px;
}
#menu ul{
width:900px;
margin:0px auto;
padding:0px;
list-style-type:none;
font-family:Cooper black;
font-weight:normal;
font-size:13px;
text-align: left
}
#menu ul li{
position:relative;
display:inline;
float:left;
}
#menu ul li a {
display:block;
padding:5px 6px 5px 6px;
text-decoration:none;
color:#FFFFFF;
background-color:#FFFFFF repeat-x;
height: auto ! important;
}
#menu ul li a:hover {
background-position:0% -26px;
color:#EE0000;
}
#curva-inferior { background-image: url(objetos/curva-inferior.png) ;
background-repeat: no-repeat ;
width:981px ;
height: 14px;
overflow: hidden }
#contenido {width:1000px ;
height:2000px ;
background-color:#FFFFFF ;
text-align:left;
padding:30px 30px 30px 30px;
font-family:Bookman old style;
font-size:14px
}
#contenido a {color: #000000; }
#menus1 {
background: #ffffff;
width: 115;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus2 {
background: #ffffff;
width: 410;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus2 h1 {
background: #FF0000 ;
text-align: center; font-family: Amerika Sans; color: #FFD700; font-size: 22px;padding: 10px 15px 10px 15px;
}
#menus3 {
background: #ffffff url(objetos/8.png) no-repeat left bottom;
width: 270;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus3 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans; font-size: 30px;
}
#menus4 {
background: #FFFFFF url(objetos/1.png) no-repeat left bottom;
width: 270;
height: 430;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus4 h1 {
background: none;
text-align: center;padding: 20px 0px 0px 0px; font-family: Amerika Sans;color: #8B0000; font-size: 27px
}
#menus5 {
background: #ffffff url(objetos/2.png) no-repeat left bottom;
width: 270;
height: 430;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus5 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px;font-family: Amerika Sans;color:#FF1493;font-size: 27px
}
#menus6 {
background: #ffffff url(objetos/3.png) no-repeat left bottom;
width: 270;
height: 430;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus6 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans;color: #160808; font-size: 27px
}
#menus7 {
background: #ffffff url(objetos/4.png) no-repeat left bottom;
width: 270;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus7 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans;color: #7BC605; font-size: 27px
}
#menus8 {
background: #ffffff url(objetos/5.png) no-repeat left bottom;
width: 270;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus8 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans;color: #FF7F00; font-size: 30px
}
#menus9 {
background: #ffffff url(objetos/6.png) no-repeat left bottom;
width: 270;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus9 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans; color: #1C1C1C; font-size: 30px
}
#menus10 {
background: #ffffff url(objetos/7.png) no-repeat left bottom;
width: 270;
height: 400;
float: left;
margin: 20px;
margin-bottom: 10px;
}
#menus10 h1 {
background: none;
text-align: center;padding: 20px 10px 0px 10px; font-family: Amerika Sans;color: #00008B; font-size: 27px }
#pieuno { background-color: #ffffff; height: 50px; width: 980px;margin: 10px 10px 10px 10px; padding:20px 20px 20px 20p; text-position:justify}
a {color: red; text-decoration: none}
a:link {}
a:visited {}
a:hover {color:darkorange ; text-decoration:none ; background-color: none}
a:active {}
#piedos {background-color: #DDA0DD; height: 50px; width: 980px; margin: 10px 10px 10px 10px}
#pietres {background-color: #CAE1FF; height: 50px; width: 980px; margin: 10px 10px 10px 10px }Os dejo tmb el código de la pag html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>El CLICK: </title>
<link rel="stylesheet" href="estiloscapitulos.css" type="text/css" media="all">
<meta content="text/html; charset=iso-8859-1" http-equiv=Content-Type>
</head>
<body>
<div id="top">
<div id="cabecera"></div>
<center><div id="curva-superior"></div></center>
<div id="menu">
<ul id="menuh">
[*][url="index.html"]INICIO[/url]
[*][url="#"]secc 1[/url]
[*][url="#"]secc 2[/url]
[*][url="#"]secc 3[/url]
[*][url="#"]secc 4[/url]
[*][url="#"]secc 5[/url]
[*][url="#"]secc 6[/url]
[*][url="#"]secc 7[/url]
[/list]
</div>
<div id="menu">
<ul id="menuh">
[*][url="#"]secc 8...[/url]
[*][url="#"]secc 9[/url]
[*][url="#"]secc 10[/url]
[*][url="#"]secc 11...[/url]
[*][url="#"]secc 12[/url]
[*][url="#"]secc 13[/url]
[*][url="#"]secc 14[/url]
[*][url="#"]FORO[/url]
[/list]
</div><center><div id="curva-inferior"></div></center>
</div>
<div id="contenido">
<div id="menus1">
[img]objetos/proxaa.png[/img]
</div>
<div id="menus2">
<h1>Último capítulo emitido</h1>
<object width="450" height="330"><param name="movie" value="http://www.megavideo.com/v/L1RUBSLZ875268acdde6af6fef3aa039b347765b"></param><param name="allowFullScreen" value="true"></param><embed src="http://www.megavideo.com/v/L1RUBSLZ875268acdde6af6fef3aa039b347765b" type="application/x-shockwave-flash" allowfullscreen="true" width="410" height="330"></embed></object>
</div>
<div id="menus3">
<h1>Temporada actual</h1>
<ul>
[*][url="#"]93 ..[/url]
[*][url="#"]94 .[/url]
[*][url="#"]95 Título deconocido.[/url]
[*][url="#"]96 Título desconocido.[/url]
[*][url="#"]97 Título deconocido.[/url]
[*][url="#"]98 Título desconocido.[/url]
[*][url="#"]99 Título deconocido.[/url]
[*][url="#"]100 Título desconocido.[/url]
[*][url="#"]101 Título deconocido.[/url]
[/list]
</div>
<div id="menus4">
<h1>Primera temporada</h1>
<ul>
[*][url="#"]01 .[/url]
[*][url="#"]02 .[/url]
[*][url="#"]03 .[/url]
[*][url="#"]04.[/url]
[*][url="#"]05 [/url]
[*][url="#"]06 .[/url]
[*][url="#"]07 .[/url]
[*][url="#"]08 .[/url]
[*][url="#"]09 .[/url]
[*][url="#"]10 [/url]
[*][url="#"]11 .[/url]
[*][url="#"]12 [/url]
[*][url="#"]13 .[/url]
[*][url="#"]14 .[/url]
[*][url="#"]15 .[/url]
[/list]
</div>
<div id="menus5">
<h1>Segunda temporada</h1>
<ul>
[*][url="#"]16 .[/url]
[*][url="#"]17 .[/url]
[*][url="#"]18 .[/url]
[*][url="#"]19 .[/url]
[*][url="#"]20 .[/url]
[*][url="#"]21 .[/url]
[*][url="#"]22 .[/url]
[*][url="#"]23 .[/url]
[*][url="#"]24 .[/url]
[*][url="#"]25 .[/url]
[*][url="#"]26 .[/url]
[*][url="#"]27 .[/url]
</div>
<div id="menus6">
<h1>Tercera temporada</h1>
<ul>
[*][url="#"]28 [/url]
[*][url="#"]29 .[/url]
[*][url="#"]30 .[/url]
[*][url="#"]31 .[/url]
[*][url="#"]32 [/url]
[*][url="#"]33 .[/url]
[*][url="#"]34 .[/url]
[*][url="#"]35 .[/url]
[*][url="#"]36 ..[/url]
[*][url="#"]37 El .[/url]
[*][url="#"]38 .[/url]
[*][url="#"]39 .[/url]
[*][url="#"]40 .[/url]
[/list]
</div>
<div id="menus7">
<h1>Cuarta temporada</h1>
<ul>
[*][url="#"]41.[/url]
[*][url="#"]42 .[/url]
[*][url="#"]43 .[/url]
[*][url="#"]44 .[/url]
[*][url="#"]45 .[/url]
[*][url="#"]46 .[/url]
[*][url="#"]47 .[/url]
[*][url="#"]48 .[/url]
[*][url="#"]49 [/url]
[*][url="#"]50 .[/url]
[*][url="#"]51 .[/url]
[*][url="#"]52 .[/url]
[*][url="#"].[/url]
[/list]
</div>
<div id="menus8">
<h1>Quinta temporada</h1>
<ul>
[*][url="#"]54 .[/url]
[*][url="#"]55 .[/url]
[*][url="#"]56 .[/url]
[*][url="#"]57 .[/url]
[*][url="#"]58 .[/url]
[*][url="#"]59 .[/url]
[*][url="#"]60 .[/url]
[*][url="#"]61 .[/url]
[*][url="#"]62 ....[/url]
[*][url="#"]63 ...[/url]
[*][url="#"]64.[/url]
[*][url="#"]65 ..[/url]
[*][url="#"]66 ..[/url]
[/list]
</div>
<div id="menus9">
<h1>Sexta temporada</h1>
<ul>
[*][url="#"]67 [/url]
[*][url="#"]68 .[/url]
[*][url="#"]69 .[/url]
[*][url="#"]70 .[/url]
[*][url="#"]71 .[/url]
[*][url="#"]72 .[/url]
[*][url="#"]73 .[/url]
[*][url="#"]74 .[/url]
[*][url="#"]75 .[/url]
[*][url="#"]76 .[/url]
[*][url="#"]77...[/url]
[*][url="#"]78 .[/url]
[*][url="#"]79 .[/url]
[/list]
</div>
<div id="menus10">
<h1>Séptima temporada</h1>
<ul>
[*][url="#"]80 .[/url]
[*][url="#"]81 .[/url]
[*][url="#"]82 .[/url]
[*][url="#"]83 .[/url]
[*][url="#"]84 .[/url]
[*][url="#"]85 .[/url]
[*][url="#"]86 .[/url]
[*][url="#"]87 .[/url]
[*][url="#"]88 .[/url]
[*][url="#"]89 .[/url]
[*][url="#"]90 .[/url]
[*][url="#"]91 .[/url]
[*][url="#"]92 .[/url]
[/list]
</div>
<div id="enque">[img]objetos/guia.jpg[/img][img]objetos/enque.jpg[/img]
</div>
</div>
<div id="pie">
<div id="piedos">pie dos</div>
<div id="pietres">pie tres</div>
<div id="pieuno">Copyright[img]objetos/copyright.png[/img] 2007-2009. Todos los derechos reservados. [url="legal.html"]Información legal.[/url] [url="agra.html"]Agradecimientos.[/url] [url="contacto.html"]Contacto.[/url] El click</div>
</div>
</body>
</html>Las dos cosas que no logro igualar son:
1. la anchura de la pag: yo pretendo ponerle 1000px; y así puse. En IE se me ve bien, está a 1000px, y no me aparece ninguna barra de desplazamiento abajo, porque no hay nada que desplazar (todo esto a pantalla completa). En cambio con firefox, si que me aparece la barra de desplazamiento, por que la pag no está a 1000px. Esto hace que las cosas queden mal colocadas, por ej, todo lo que va en center, no está en el centro de lo que ves, (como pasa en IE).
2. Con firefox el texto está desplazado un poco más abajo que con el explorer abajo. Se nota, por que a los divs, les tengo fondos, uno para cada uno, que son justos en medida. Con internet explorer quedan todos los párrafos en su sitio, y con firefox, el último se sale del fondo.
últimamente, le estoy echando la culpa al margin y al padding, creo que aun no me ha quedado claro como funcionan. Y e probado a quitar todo el contenido, y quitandolo, queda bien.
Me podéis ayudar? A ver que es lo que estoy poniendo mal.
gracias, bsiños