Perdón por las faltas de ortografia, pero es que estoy un poco ofuscado ultimamente.
Hos dejo aqui mi css, la el problema no era que no se viera bién, sino que los tamaños de los pixeles no me los hacen igual.
Y tengo las ultimas versiones de estos navegadores, aunque en el html he escrito un codigo para que me lo lea como explorer 7 si és ie8.
Código HTML:
#tot {
position:absolute;
top:50%;
left:50%;
margin-left:-350px;
margin-top:-250px;
width: 700px;
height: 500px;
background: transparent 8px 8px no-repeat ;
font-family: Futura, Helvetica, Arial, Sans-serif;
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
box-shadow: 0 0 10px rgb(0,0,0);
-o-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
}
#fondoverd {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background.png') bottom left repeat-x;
background-color: rgb(3, 212, 0);
width: 700px;
height: 500px
}
#fondoblau {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background.png') bottom left repeat-x;
background-color: rgb(0, 153, 255);
width: 700px;
height: 500px
}
#fondogroc {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background.png') bottom left repeat-x;
background-color: rgb(255, 204, 51);
width: 700px;
height: 500px
}
#fondotronja {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background.png') bottom left repeat-x;
background-color: rgb(255, 97, 0);
width: 700px;
height: 500px
}
#nom {
position: absolute;
text-align: center;
top: 28px;
left: 40px;
font-weight: bold;
font-size: 3em;
width: 700px;
height: 100px;
color: white;
}
#elementverd {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background2.png') 0px 0px repeat-x;
background-color: rgb(3, 212, 0);
box-shadow: 0 0 10px rgb(0,0,0);
-o-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
width: 120px;
height: 120px;
position: absolute;
top: 25px;
left: 25px;
*top: 10px;
*left: 10px;
z-index:100;
}
#elementblau {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background2.png') bottom left repeat-x;
background-color: rgb(0, 153, 255);
box-shadow: 0 0 10px rgb(0,0,0);
-o-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
width: 120px;
height: 120px;
position: absolute;
top: 25px;
left: 25px;
*top: 10px;
*left: 10px;
z-index:100;
}
#elementgroc {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background2.png') bottom left repeat-x;
background-color: rgb(255, 204, 51);
box-shadow: 0 0 10px rgb(0,0,0);
-o-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
width: 120px;
height: 120px;
position: absolute;
top: 25px;
left: 25px;
*top: 10px;
*left: 10px;
z-index:100;
}
#elementtronja {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background: url('../images/background2.png') bottom left repeat-x;
background-color: rgb(255, 97, 0);
box-shadow: 0 0 10px rgb(0,0,0);
-o-box-shadow: 0 0 10px rgb(0,0,0);
-moz-box-shadow: 0 0 10px rgb(0,0,0);
-webkit-box-shadow: 0 0 10px rgb(0,0,0);
width: 120px;
height: 120px;
position: absolute;
top: 25px;
left: 25px;
*top: 10px;
*left: 10px;
z-index:100;
}
#abrebiacio {
position: absolute;
text-align: center;
top: 26px;
left: 0px;
width: 120px;
height: 120px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-serif;
font-size: 4em;
color: white;
}
noindex:-o-prefocus, #abrebiacio {
position: absolute;
text-align: center;
top: 33px;
left: 0px;
width: 120px;
height: 120px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-serif;
font-size: 4em;
color: white;
}
#abrebiacio, x:-moz-any-link {
position: absolute;
text-align: center;
top: 35px;
left: 0px;
width: 120px;
height: 120px;
font-weight: bold;
font-family: Helvetica, Arial, Sans-serif;
font-size: 4em;
color: white;
*top: 26px;
}
#blanc {
border-radius: 0.5em;
-o-border-radius: 0.5em;
-moz-border-radius: 0.5em;
-webkit-border-radius: 0.5em;
background-color: #f2f2f2;
width: 565px;
height: 371px;
position: absolute;
top: 100px;
left: 110px;
z-index:50;
}
#info {
position: absolute;
margin-top:12px;
text-align: left;
line-height: 41px;
top: 0px;
font-size: 2em;
width: 565px;
height: 317px;
opacity: 0.5;
color : a0a0a0;
}
#tipetext {
margin-left:40px;
font-size: 0.8em;
line-height: 36px;
*color:rgb(115,115,115);
}
noindex:-o-prefocus, #tipetext {
margin-left:40px;
font-size: 0.8em;
line-height: 30px;
}
#tipetext, x:-moz-any-link {
margin-left:40px;
font-size: 0.8em;
line-height: 35px;
}
#bold {
font-weight:bold;
}
#mes {
position:absolute;
width:30px;
height:30px;
top:15px;
right:15px;
display: none;
}
#sombraexplorer {
*background: url('../images/sombraexplorer.png') bottom left repeat-x;
*width: 140px;
*height: 140px;
*position: absolute;
*top: 20px;
*left: 20px;
*z-index:90;
}
hr {
color: #000000;
*color: #a0a0a09;
font-size: 15px;
*font-size: 5px9;
}
html { overflow-y:hidden; }
Si para entenderlo mejor necesitais el html me avisais.
Muchas gracias por todo