Pantalla IE7: bloque

I have 2 span tags which have a tags in working as buttons for a gallery and to position them i am using display:block. Which works fine in all browsers apart from IE7. Both of the button have shifted to the right hand side of the gallery. Here is the CSS code I am using for them:

.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;
}

let me know if you need any more information.

Gracias.

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

<div class="gallery" style=""><span class="prv_button"><a href=""></a></span> <div class="outer_gwrap" style="width: 834px;"> -

<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=""></a></span></div> -

That's all of the HTML in order.. Sorry it's laid out so poorly.. -

put it in a JsFiddle (jsfiddle.net) -

2 Respuestas

I am not sure i understand what it is you are trying to achieve but it seems to me you can do this without floating anything, using absolute positioning or having images displayed as backgrounds. I assume that .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

I had to use a stylesheet for IE7 so when positioning for them for IE using a different method it would not throw the positioning off in the other browsers

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.