Problemas con CSS y JQuery (scroll de imágenes) Que tal todo ??
Bueno pues os comento, tengo un pequeño problema con el CSS y el Jquery (la verdad que no sabía donde poner el post xD )
Os explico. Tengo un scroll de 3 imágenes echo en Jquery. En Firefox y Chrome se ve de lujo (como no) pero en IE se ve mal, ya que se desfasa. Dejo la URL para que lo comprueben ustedes mismos:
http://pruebas.zemula.net/autoescuelaronda/
Y aquí dejo el código CSS, el HTML no lo puedo poner porque excedo el número de caractéres en el mensaje por lo que lo pondré abajo si puedo :).
CSS
Código:
A ver si entre todos podemos sacar una solución porque me está volviendo loco :S ! Es más, si agrando la celda del div que contiene las imágenes, aunque solo sea un píxel, se deforma y se pone en mitad de la página. Si tienen firebug prueben a aumentar un pixel en esta clase:* {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
body{
background:url(images/bg.jpg);
*text-align:center;
}
a {color:#cd2800}
a:hover{text-decoration:none;}
img {border:0px;}
br {line-height:0px;}
input {vertical-align:middle; padding:0px 0px 0px 4px;}
.dt {
/*display:table; */
width:766px;
margin:0 auto;
/* Hack para IE * */
*margin:0 auto 0 auto;
*width:390px;
*text-align:left;
/* position: relative;
left: 200px;*/
}
.dr {
display:table-row;
width:100%;
height:100%;
}
.dc {
display:table-cell;
text-align:left;
vertical-align:top;
/*width:100%; */
}
.main_text, input, textarea, body, select{
font:normal 11px Arial, Helvetica, sans-serif;
line-height:15px;
color:#000;
}
font {
font:normal 13px Tahoma, Arial;
color:#D12C00;
}
.input, .ta {
border:1px solid #999;
width:211px;
}
.input {
height:20px;
}
.ta {
height:80px;
overflow:auto;
padding:2px 0px 0px 5px;
}
b {color:#d92b00; font-size:12px}
b a{color:#390}
b h1 {color:#d92b00;}
font {font:bold 11px Arial, Helvetica, sans-serif; color:#5486a9}
.nn a{text-decoration:none}
.nn a:hover{text-decoration:underline}
ul {list-style:none}
.main {
width:100%;
background:url(images/tal.jpg) top left repeat-x #FFF;
}
.main_t {
background:#fafaf0;
}
.x {
margin:0px 46px 0px 49px;
width:671px;
}
/*••••••••••••••HEADER•••••••••••••*/
.header {
height:139px;
background:url(images/hbg.jpg) 0 0 no-repeat;
}
.top_l {
background:url(images/top.jpg) 0 0 repeat-x;
}
.top {
height:63px;
}
.menu {
height:76px;
}
.umenu {
width:288px;
height:20px;
background:url(images/g.jpg) 0 0 no-repeat;
font:normal 10px Arial, Helvetica, sans-serif;
color:#FFF;
margin:0px 0px 0px 22px;
}
.umenu2 {
width:144px;
height:20px;
background:url(images/g2.jpg) 0 0 no-repeat;
font:normal 10px Arial, Helvetica, sans-serif;
color:#FFF;
}
.mpct {
width:766px;
height:191px;
background:url(images/mpct.jpg) 0 0 no-repeat
}
.block {
margin:0px 0px 0px 521px;
width:200px;
}
.block b {
color:#5486a9;
}
#pie{
position:relative;
left: -20px;
*left: -20px;
}
.admin{
margin:0 auto;
width:750px;
/* Hack para IE * */
*margin:0 auto 0 auto;
*width:750px;
*text-align:left;
height: 200px;
}
.caja_admin{
border:dotted 1px #7b7b75;
text-align: center;
background-color:#eeeee4;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#e47760;
}
/*••••••••••••••CONTENT•••••••••••••*/
.mrg {
margin:0px 0px 0px 8px; width:720px;
}
.cont {
width:735px;
margin:0px 0px 0px 14px;
background:url(images/cont_bg.jpg) 0 0 repeat-x
}
.cb {
margin:0px 0px 0px 20px;
width:200px;
}
li {
list-style:none;
line-height:10px;
padding:5px 0px 3px 0px;
}
li a {
padding:0px 0px 0px 17px;
color:#000;
background:url(images/0blt1.jpg) 0 0 no-repeat;
font:bold 11px Arial, Helvetica, sans-serif;
}
.l {background:url(images/l.gif) top right repeat-y}
.r {background:url(images/l.gif) 0 0 repeat-y}
.rdmr {
color:#cb2700;
font:bold 10px Tahoma, Arial;
background:url(images/0blt1.jpg) 0 0 no-repeat;
padding:0px 0px 0px 10px;
text-transform:uppercase;
}
.ftr {color:#c0c0c0;}
.ftr a{color:#c0c0c0;}
.ftr1 {color:#9a9a9a;}
.ftr1 a{color:#9a9a9a;}
/***** Javascript ****
div.demoElement {
width: 200px;
height: 150px;
border: 1px solid black;
background-color: #f9f9f9;
font-size: 12px;
color: #000000;
padding: 5px;
position:relative;
top:13px;
right:5px;
}*/
.container {
width: 94px;
padding: 0;
margin: 0 auto;
}
.folio_block {
position: relative;
left: 0%; top: 0%;
margin: 14px 0 0 10px;
}
/*--Main Container--*/
.main_view {
float: left;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:121px;
width: 222px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
bottom: 5px;
right: 80px;
}
.image_reel {
position: absolute;
top: 0;
left: 0;
}
.image_reel img {float: left;}
/*--Paging Styles--*/
.paging {
position: relative;
bottom: 2px;
right: 22px;
width: 178px;
height:47px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
line-height: 40px;
background: url(images/paging_bg2.png) no-repeat;
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 5px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
background: #920000;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;}
/***** IE *******/
.window {
*height:121px;
*width: 205px;
*overflow: hidden; /*--Hides anything outside of the set width/height--*/
*position: relative;
*bottom: 5px;
*right: 20px;
}
.image_reel {
*position: relative;
*top: 0;
*left: -20px;
}
.image_reel img {
*float: left;
*left: -20px;
}
/*--Paging Styles--*/
.paging {
*position: relative;
*bottom: 2px;
*right: -40px;
*width: 178px;
*height:47px;
*z-index: 100; /*--Assures the paging stays on the top layer--*/
*text-align: center;
*line-height: 40px;
*background: url(images/paging_bg2.png) no-repeat;
*display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
*padding: 5px;
*text-decoration: none;
*color: #fff;
}
.paging a.active {
*font-weight: bold;
*background: #920000;
*-moz-border-radius: 3px;
*-khtml-border-radius: 3px;
*-webkit-border-radius: 3px;
}
.paging a:hover {*font-weight: bold;}
Código:
De 205 a 206 y verán...
.window {
*height:121px;
*width: 206px;
*overflow: hidden; /*--Hides anything outside of the set width/height--*/
*position: relative;
*bottom: 5px;
*right: 20px;
}
Saludos y muchas gracias !!
