Hola!
Llevo ya unos dias solucionando fallos en mi web, si bien no esta terminada ya que me quedan bastantes cosas por terminar y mejorar, esta vez vengo a consultar con vosotros concretamente este fallo. No estaba seguro de en que foro ponerlo así que he optado por ponerle aquí en el general, de antemano perdón si no era el sitio.
Estoy testeando la web en IE7 / IE8 / Firefox / Safarí / Crome.
*(El maldito IE6 e inferiores me lo dejare para ultimo).
-------------------------------------------------------------------------------------------------------
Bien os pongo el fallo en concreto. Es un error con una barra deslizante:
Website: [URL="http://www.xtremexperience.es"]http://www.xtremexperience.es[/URL]
Foto01:
Solo me da fallo con FF-3.6 y IE8 si bien creo que esta relacionado con los complementos. La razón es que si Inicio IE8 en modo sin complementos no me da el error y lo visualiza correctamente, he de suponer que en el FireFox tambien tenga que ver algo, en este desabilite todos los plugin's y continua haciendo lo mismo.
Una de las soluciones que tengo es obligar a IE8 que trabaje como IE7 usando un meta:
Código:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
Con lo cual soluciono IE8 aunque claro IE7 no visualiza como IE8, pero bueno esto es asumible. El problema lo mantengo en FireFox y por tanto nose si exista una meta para él o si alguno me de algún aporte sobre este comportamiento que en teoría lo asumo a algún complemento.
No voy a poner todo el codigo, para evitar poner aquí una biblia de codigo pero si dejare lo que extrictamente afecta a la barra. Sí alguien quiere pues le paso el codigo completo pero creo que con esto basta:
Código HTML:
<div id="cabecera">
<div id="slidermenu">
<ul id="linked">
<li><a href="xxx.asp"><img class="celdas" src="img/xxx.png" /></a></li>
<li>............. LINKS
etc.</li>
<li><a href="xxx.asp"><img class="celdas" src="img/xxx.png" /></a></li>
<li><a href=""><img class="celdas" src="img/inicio.png" /></a></li>
</ul>
<div id="prueba">
<div id="tracker">
<!-- Este son las dos clases que afectan al comportamiento de la barra deslizante -->
<div class="slider">
<div class="handle"></div>
<!-- /////////// -->
<!-- Marcas de las secciones -->
<span class="marca0">BattleField</span>
<span class="marca1">PaintBall</span>
<span class="marca2">Submarinismo</span>
<span class="marca3">Kite-Surfing</span>
<span class="marca4">Megarena</span>
<span class="marca5">BossaBall</span>
<span class="marca6">Outdoor-Training</span>
</div>
</div>
</div>
</div>
</div
La CSS:
Código:
/* MENU SLIDE */ /* SLIDER Specific CSS */
#slidermenu {
width:922px;
height:180px;
position:relative;
overflow:hidden;
float:left;
}
#slidermenu UL {
position:absolute;
list-style:none;
overflow:none;
white-space:nowrap;
}
#slidermenu UL LI {
display:inline;
}
#prueba {}
#tracker {
background:url(../img/backscroll.png) no-repeat white;
position:absolute;
width:922px;
height:23px;
z-index:200;
display:block;
left:0px;
}
#linked a {
z-index:201;
}
.handle {
position:absolute;
cursor:w-resize;
height:17px;
width:181px;
top:4px;
/*left:auto;
right:auto;
bottom:auto;*/
background: url(../img/ScrollBarSlider.png) no-repeat;
z-index:101;
}
.slider {
width:875px;
height:180px;
position:relative;
margin-left:27px;
margin-right:20px;
float:left;
left:0px;
}
.slider span {
color:red;
font-size:11px;
cursor:pointer;
z-index:110;
top:20px;
}
.slider .marca0 {
left:2px;
}
.slider .marca1 {
left:60px;
}
.slider .marca2 {
left:130px;
}
.slider .marca3 {
left:200px;
}
.slider .marca4 {
left:280px;
}
.slider .marca5 {
left:370px;
}
.slider .marca6 {
left:465px;
}
.celdas {
width:100px;
height:100px;
margin-top:50px;
}
Bueno pues aquí dejo lo dicho, cuando lo termine intentare poner el codigo completo con una demo para descargar en mi blog.
Saludos y gracias de antemano.