Pantalla IE7: bloque

Tengo 2 etiquetas de intervalo que tienen etiquetas que funcionan como botones para una galería y para colocarlas estoy usando display:block. Que funciona bien en todos los navegadores excepto en IE7. Ambos botones se han desplazado al lado derecho de la galería. Aquí está el código CSS que estoy usando para ellos:

.prv_button{
    float:left;
height:227px;
width:15px;
position:absolute;
display:block;
overflow: hidden;

}

.prv_button a{
background-image:url(../images/gal_prv.jpg);
background-repeat:no-repeat;
height:227px;
width:15px;
display:block;
position:relative;
overflow: hidden;
}

.nxt_button{
height:227px;
width:15px;
float:left;
position:absolute;
display:block;
overflow: hidden;
left:432px;
}

.nxt_button a{
background-image:url(../images/gal_nxt.jpg);
background-repeat:no-repeat;
height:227px;
overflow: hidden;
width:15px;
display:block;
position:relative;
}

déjame saber si necesitas más información.

Gracias.

preguntado el 09 de marzo de 12 a las 16:03

-

-

-

Eso es todo el HTML en orden... Lo siento, está tan mal diseñado... -

ponerlo en un JsFiddle (jsfiddle.net) -

2 Respuestas

No estoy seguro de entender qué es lo que está tratando de lograr, pero me parece que puede hacerlo sin flotar nada, usando el posicionamiento absoluto o mostrando imágenes como fondos. yo asumo eso .outer_gwrap tiene display:inline-block;

CSS:

.prv_button{
    display:inline-block;
    vertical-align:top;
    width:15px;
}

.prv_button a{
    vertical-align:top;
}
.prv_button img{
    border-width:0px;
}
.nxt_button{
    display:inline-block;
    vertical-align:top;
    width:15px;
}
.nxt_button a{
    vertical-align:top;
}
.nxt_button img{
    border-width:0px;
}
.outer_gwrap{
    display:inline-block;
    width:834px;
    zoom: 1;
    *display: inline;
}

HTML:

<div class="gallery" >
            <span class="prv_button">
                <a href=""><img src="../images/gal_prv.jpg"></a>
            </span>
            <div class="outer_gwrap">
                <ul class="inner_gwrap">
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                </ul>
                <ul class="inner_gwrap">
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                    <li><a target="_blank" href=""><img border="0" src=""></a></li>
                </ul>
            </div>
            <span class="nxt_button">
                <a href=""><img src="../images/gal_nxt.jpg"></a>
            </span>
        </div>

respondido 09 mar '12, 17:03

Tuve que usar una hoja de estilo para IE7, así que al posicionarlos para IE usando un método diferente, no cambiaría el posicionamiento en los otros navegadores.

Respondido el 28 de Septiembre de 12 a las 17:09

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.