"overflow: hidden" me da problemas en Opera

[rogertm]

Hola por acá, tengo un slideshow que tiene más o menos la siguiente estructura:

Código:

<< anterior      texto con imagen    siguiente >>

Todo dentro de un id llamado slide:

Código HTML:

<div id="slide">
    <a class="prev" href="#"><img class="slide-left" alt="featured title" src="http://localhost/sitio.com/images/slide-left.png"/></a>
    <div class="items">
        <!-- Texto con imagen -->
    </div><!-- .items -->
    <a class="next" href="#"><img class="slide-right" alt="featured title" src="http://localhost/sitio.com/images/slide-right.png"/></a>
</div><!-- #slide -->
 

En el CSS tengo lo siguiente:

Código CSS:

#slide{
    padding: 40px 30px 0;
    color: #fff;
    width: 900px;
    overflow: hidden;
}
.slide-left{
    float: left;
    margin: 50px 92px 0 40px;
}
.slide-right{
    float: right;
    margin: 50px 40px 0 92px;
}
 

He tenido que usar overflow: hidden en el id slide porque así es como único se me ven a la misma altura las imágenes que uso como flechitas para ir pasando los titulares por el slideshow, de lo contrario la derecha se ve unos pixels más abajo que la izquierda, pero en Opera se ve como si tuviese mucho más padding. Imagino que debo estar haciendo algo mal, y que el uso de overflow aquí tal vez sea innecesario, pero no tengo idea de que pueda ser.

Gracias mil de antemano

[sanxuan]

Puede ser mejor idea usar posiciones absolutas para las flechas y posición relativa para slide. De esa manera las flechas aparecerán donde les digas.

Código CSS:

#slide{
    padding: 40px 30px 0;
    color: #fff;
    width: 900px;
    position:relative;
    }
 
.slide-left{
    top:50px;
    left:0;
    position:absolute;
}
.slide-right{
    top:50px;
    right:0;
    position:absolute;
}
 

Usa la posiciones absolutas en los enlaces en lugar de en las imágenes y ajusta la posición según te convenga..

Código HTML:

<div id="slide">
    <a class="prev slide-left" href="#"><img alt="imagen anterior" src="http://localhost/sitio.com/images/slide-left.png"/></a>
    <div class="items">
        <!-- Texto con imagen -->
    </div><!-- .items -->
    <a class="next slide-right" href="#"><img class="" alt="imagen siguiente" src="http://localhost/sitio.com/images/slide-right.png"/></a>
</div><!-- #slide -->
 

[rogertm]

Lo de las posiciones me ha servido, ahora tengo lo siguiente:

Código CSS:

#slide{
    padding: 40px 30px 0;
    color: #fff;
    width: 900px;
    position: relative;
}
.slide-left{
    float: left;
    margin-top: 50px;
    left: 0;
    position: absolute;
}
.slide-right{
    float: right;
    margin-top: 50px;
    right: 0;
    position: absolute;
}
 

Pero la caja .items se me pega a la izquierda y si le doy márgenes horizontales me pasa lo mismo de antes... ¿ahora que estoy haciendo mal? ¿por qué no puedo dar márgenes horizontales?

Gracias

[sanxuan]

1.No tengo el css de .items así que no puedo adivinar las propiedades que tiene.
Si lo quieres centrar añádele la propiedad "margin:0 auto". Se trata de darle el valor auto al margen derecho y al izquierdo. Puedes cambiar los valores superior e inferior a voluntad.
Por supuesto también podrías usar valores fijos o porcentuales para los márgenes laterales con otros resultados.

2. El css que incluyes no es el que te dí. Intenta modificar la posición usando top en lugar de margin-top. Usa el valor que necesites. Cuando utilizas posición absoluta se usan las propiedades top, left, right, y bottom para fijar la posición. Si te das cuenta, los divs con las flechas tampoco respetan el padding que fijaste en #slide, que puedes quitar si no te sirve. Si deseas usar un margen hasta el borde usa left y right en lugar de padding. Es lo más recomendable.
Otra diferencia es que las capas con posición absoluta se muestran siempre por encima de sus hermanas sin posición absoluta ocultándolas si quedan debajo.

[rogertm]

@sanxuan no lo hice usando tu código, pues lo probé y no me resultó, pero a partir de lo que me diste pude solucionar el asunto, lo resolví metiendo los controles dentro de una caja:

Código HTML:

<div id="slide">
    <div id="slide-controls">
        <a class="prev" href="#"><img class="slide-left" alt="featured title" src="http://localhost/sitio.com/images/slide-left.png"/></a>
        <a class="next" href="#"><img class="slide-right" alt="featured title" src="http://localhost/sitio.com/images/slide-right.png"/></a>
    </div>
    <div class="items">
    <!-- texto e imagenes -->
    </div><!-- .items -->
</div><!-- #slide -->
 

Código CSS:

#slide{
    padding: 40px 30px 0;
    color: #fff;
    width: 900px;
    position: relative;
}
#slide-controls{
    top: 50px;
    width: 900px;
    float: left;
    position: relative;
}
.prev{
    float: left;
    position: absolute;
}
.next{
    float: right;
    left: 840px;
    position: absolute;
}
.items{
    width: 536px;
    float: left;
    left: 180px;
    position: relative;
}
 

Gracias por tu ayuda, en realidad me ha servido para aclararme algunas cosas... Un saludo