IE7 дисплей: блок

Question

У меня есть 2 тега span, у которых есть теги в качестве кнопок для галереи, и для их размещения я использую display: block. Который прекрасно работает во всех браузерах, кроме IE7. Обе кнопки сместились в правую часть галереи. Вот код CSS, который я использую для них:

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

дайте мне знать, если вам нужна дополнительная информация.

Спасибо.

Answer 1

Мне пришлось использовать таблицу стилей для IE7, поэтому при позиционировании их для IE другим способом это не скинуло бы позиционирование в других браузерах.

Answer 2

Я не уверен, что понимаю, чего вы пытаетесь достичь, но мне кажется, что вы можете сделать это, ничего не плавая, используя абсолютное позиционирование или отображая изображения в качестве фона.Я предполагаю, что .outer_gwrap имеет 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>