[Ovillo] CSS:Visualización de formulario en firefox
Verónica Fernández
veritofr en gmail.com
Mie Jul 19 22:24:28 UTC 2006
Hola a Todos!!!
Abajo les copio el código css con el cual estoy trabajando pero en la página
donde tengo armado un formulario , en el IE no tengo problemas para verlo
pero cuando lo veo en el Firefox, parte del formulario pisa por afuera el
div contenido2 y por ende el div que tengo como footer.
El formulario lo tengo incluido en el div contenido2. Espero puedan
ayudarme, Saludos! Vero
body {
background-image: url(fondo1.gif);
background-repeat: repeat-x;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
padding:0px;
margin:0px;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #CCCCCC;
}
h1 {
font-size: 1.4em;
color:#CC3333;
padding:0px;
margin:0px }
h2 {
font-size: 1.2em;
color:#000000;
padding:0px;
margin:0px }
h3 {
font-size: 1.1em;
color:#666666;
padding:0px;
margin:0px }
form {
border: thin dotted #CCCCCC;
height: 500px;
padding: 10px;
overflow:visible;
}
label {
font-family: Arial, Helvetica, sans-serif;
margin-left:30px;
font-size: 1em;
color: #CC0000;
size:50px;
}
h4 {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #333333;
list-style-type: decimal;
list-style-position: outside;
}
#contenedor {
position:relative;
width: 760px;
padding:0px;
margin: 0 auto;
height:auto;
background-image: url(fondo1.gif);
background-repeat: repeat-x;
}
#cabezal {
margin: 0px 0px 0px 0px;
padding-top:2px;
text-align: right;
border: 0px dotted #ccc;
background: #000;
height: 34; /* Comienza hack para IE 5 */
voice-family: "\"}\"";
voice-family:inherit;
height: 20px;
}
html>body #cabezal {
height: 20px; /* Fin hack para IE 5 */
}
#menuizquierda {
position: absolute;
top: 150px;
left: 0px;
padding-top:20px;
border: 1px solid #fff;
background: #d3d3d3;
width: 180px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background-image:url(Imagenes/images/servicios_01.gif);
background-position:top;
background-repeat:no-repeat;
float:left;
overflow:auto;
}
html>body #menuizquierda {
width: 160px; /* fin del hack para IE5 - Windows */
}
#menuizquierda2 {
position: absolute;
top: 290px;
left: 0px;
padding-top:20px;
border: 1px solid #fff;
background: #d3d3d3;
width: 180px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background-image:url(Imagenes/images/presupuesto_01.gif);
background-position:top;
background-repeat:no-repeat;
float:left;
overflow:hidden;
}
html>body #menuizquierda2 {
width: 160px; /* fin del hack para IE5 - Windows */
}
#menuizquierda3 {
position: absolute;
top: 410px;
left: 0px;
padding-top:20px;
border: 1px solid #fff;
background: #d3d3d3;
width: 180px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background-image:url(Imagenes/images/noticias_01.gif);
background-position:top;
background-repeat:no-repeat;
float:left;
overflow:hidden;
}
html>body #menuizquierda3 {
width: 160px; /* fin del hack para IE5 - Windows */
}
#menuizquierda4 {
position: absolute;
top: 480px;
left: 0px;
padding-top:20px;
border: 1px solid #fff;
background: #d3d3d3;
width: 180px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background-image:url(Imagenes/images/colaboradores_01.gif);
background-position:top;
background-repeat:no-repeat;
float:left;
overflow:hidden;
}
html>body #menuizquierda4 {
width: 160px; /* fin del hack para IE5 - Windows */
}
#menuizquierda5 {
position: absolute;
top: 530px;
left: 0px;
padding-top:20px;
border: 1px solid #fff;
background: #d3d3d3;
width: 180px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 160px;
background-image:url(Imagenes/images/testimoniales_01.gif);
background-position:top;
background-repeat:no-repeat;
float:left;
overflow:hidden;
}
html>body #menuizquierda5 {
width: 160px; /* fin del hack para IE5 - Windows */
}
#contenido {
top:190px;
margin: 20px 190px 20px 190px;
padding: 10px;
border: 1px solid #ccc;
background: #fff;
clear:both;
}
#contenido2 {
margin: 10px 0px 20px 190px;
padding: 10px;
background: #fff;
list-style-type:square;
clear:both;
}
.lista {
list-style-type:square;
}
.ubicacion {
color:#cc0000;
}
#derecha {
position: absolute;
top: 180px;
right: 0px; /* Opera5.02 mostrar un espacio a la derecha si no hay
barra de scroll porque el contenido es corto */
margin: 10px;
padding: 5px;
border: 1px solid #ccc;
background: #fff;
width: 160px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 145px;
}
html>body right {
width: 145px; /* fin del hack para IE5 - Windows */
}
#derecha2 {
position: absolute;
top: 340px;
right: 0px; /* Opera5.02 mostrar un espacio a la derecha si no hay
barra de scroll porque el contenido es corto */
margin: 10px;
padding: 5px;
border: 1px solid #ccc;
background: #fff;
width: 160px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 145px;
}
html>body right {
width: 145px; /* fin del hack para IE5 - Windows */
}
#derecha3 {
position: absolute;
top: 500px;
right: 0px; /* Opera5.02 mostrar un espacio a la derecha si no hay
barra de scroll porque el contenido es corto */
margin: 10px;
padding: 10px;
border: 1px dotted #ccc;
width: 160px; /* Empieza el hack para IE Windows: */
voice-family: "\"}\"";
voice-family:inherit;
width: 140px;
background-color:#ffffff;
}
html>body right {
width: 140px; /* fin del hack para IE5 - Windows */
}
#pie { clear:both;
margin:10px;
}
#curriculum {
display:block;
margin-right:5px;
}
#boton_enviar {
background-color:#cccccc;
border-color:#333333;
border-style:solid 1px;
}
#boton_borrar {
background-color:#cccccc;
border-color:#333333;
border-style:solid 1px;
}
#boton_enviardos {
background-color:#cccccc;
border-color:#333333;
border-style:solid 1px;
}
#boton_borrardos {
background-color:#cccccc;
border-color:#333333;
border-style:solid 1px;
}
#enviar {
background-color:#cccccc;
border-color:#333333;
border-style:solid 1px;
}
a.menu {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
margin-left:-20px;
width: 120px;
text-align:left;
}
a.menu:link {
color: #2f2f2f;
background-color: #d3d3d3;
border-right: 3px solid #6a6a6a;
margin-bottom:1px;
}
a.menu:visited {
color: #2f2f2f;
background-color: #d3d3d3;
border-right: 3px solid #6a6a6a;
margin-bottom:1px;
}
a.menu:hover {
color: #ffffff;
background-color: #CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
a.menu:active {
color: #ffffff;
background-color:#CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
ul {
list-style-type: none;
}
a.menu2 {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
display: block;
margin-left:-20px;
width: 120px;
text-align:left;
}
a.menu2:link {
color: #ffffff;
background-color: #CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
a.menu2:visited {
color: #ffffff;
background-color: #CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
a.menu2:hover {
color: #ffffff;
background-color: #CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
a.menu2:active {
color: #ffffff;
background-color:#CC0000;
border-right: 3px solid #999;
margin-bottom:1px;
}
ul {
list-style-type: none;
}
a.icono {
font-size:1em;
background-repeat:no-repeat;
background-position:left center;
text-decoration:none;
margin-left:1px;
padding-left:20px;
}
a.icono:link {
color:#999999;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono:visited {
color:#999999;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono:hover{
color:#cc0000;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono:active {
color:#cc0000;
background-image:url(Imagenes/images/flecha_der.gif);
}
ul {
list-style-type: none;
}
a.icono2 {
font-size:1em;
background-repeat:no-repeat;
background-position:left center;
text-decoration:none;
margin-left:-15px;
padding-left:20px;
}
a.icono2:link {
color:#999999;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono2:visited {
color:#999999;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono2:hover{
color:#cc0000;
background-image:url(Imagenes/images/flecha_der.gif);
}
a.icono2:active {
color:#cc0000;
background-image:url(Imagenes/images/flecha_der.gif);
}
ul {
list-style-type: none;
}
a.pie {
font-size:1em;
text-decoration:none;
}
a.pie:link {
color:#666666;
}
a.pie:visited {
color:#666666;
}
a.pie:hover{
color:#cc0000;
}
a.pie:active {
color:#cc0000;
}
a.idioma {
font-size:0.8em;
text-decoration:none;
}
a.idioma:link {
color:#fff;
}
a.idioma:visited {
color:#fff;
}
a.idioma:hover{
color:#cc0000;
}
a.idioma:active {
color:#cc0000;
}
.letracapital {
text-transform:capitalize;
font-size:2.4em;
font-family:Georgia, "Times New Roman", Times, serif;
color:#666666;
}
.migajas {
font-size:0.9em;
}
.campo {
border: 0.05em solid #999999;
margin-left:20px;
}
option {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
option.uno {
background-color:#CCCCCC;
}
select.formSelect {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
background-color: #ffffff;
color:#000000;
}
select.formSelect:hover {
background-color:#CC0000;
color:#FFFFFF;
}
Más información sobre la lista de distribución Ovillo