Question

I made a vertical image slider, every image is a link, when the image is hovered, a black “glass pane” with 0.4 opacity covers the image and displays some text. In fact the background is a transparent png

The problem is that it only shows correctly in google chrome.

• Opera: i see only the glass pane, but not the text over it
• Firefox: I don’t see the glass pane, but i see the text over the glasspane only for the first 2 items, the third text is not shown, and the spacing between images is different from what Google Chrome and Opera are displaying
• IE: The spacing between images is different from what Google Chrome and Opera are displaying, and hover does nothing, no glass pane displayed and even no text displayed.

http://alessandroderoma.it/try/slider/

What is displayed in google chrome needs to be displayed in all other browsers.

However, this is the html code i’m using:

<div id="vertical_slideshowwrapper">
    <div class="vertical_slideshow" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 489px;">
        <ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 4564px; top: -1956px;">
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/1.png" border="0">
                    <div class="box"><p>Text 1</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/2.png" border="0">
                    <div class="box"><p>Text 2</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/3.png" border="0">
                    <div class="box"><p>Text 3</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/4.png" border="0">
                    <div class="box"><p>Text 4</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/5.png" border="0">
                    <div class="box"><p>Text 5</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/6.png" border="0">
                    <div class="box"><p>Text 6</p></div>
                </a>
            </li>
            <li style="overflow: hidden; float: none; width: 165px; height: 489px;">
                <a href="#" target="_self">
                    <img src="images/7.png" border="0">
                    <div class="box"><p>Text 7</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/8.png" border="0">
                    <div class="box"><p>Text 8</p></div>
                </a>
                <a href="#" target="_self">
                    <img src="images/9.png" border="0">
                    <div class="box"><p>Text 9</p></div>
                </a>
            </li>
        </ul>
    </div>
</div>

and the CSS:

    body{
        background-color:#000;
    }
    DIV#vertical_slideshowfooter { 
        display:block; 
        padding-top: 10px; 
        font-family: Tahoma,Verdana,sans-serif; 
        font-size: 8px; 
        font-weight: bold; 
    } 
    div#vertical_slideshowwrapper { 
        width: 100%; 
        height: 100%; 
        overflow: hidden; 
        margin: 0px auto;  
    } 
    .vertical_slideshow ul li { 
        list-style:none; 
        margin-bottom:1px; 
        display:block; 
    } 
    .vertical_slideshow li img { 
        margin-right: 5px; 
        margin-top:1px; 
        margin-bottom:1px; 
        width: 160px; 
        height: 162px; 
    } 

    body{
        padding-top:0px;
        padding-left:0px;
        margin-top:0px;
        margin-left:0px;
    }

    .box {
        position: relative;
        left: 0;
        margin-top: -163px;
        width: 160px;
        height: 163px;
        background-image: url(images/bg.png);
        background-position:0 0;
        text-indent:-99999px;
    }

    .box:hover {
        background-position:-160px 0;
        text-indent:0;
    }

    .box p{
        position:absolute;
        font-family: Arial, Helvetica, Sans-Serif;
        bottom: -8px;
        right: 6px;
        font-variant: normal;
        font-weight: bold;
        font-size: 11px;
        text-align: left;
        text-decoration: none;
        text-transform: uppercase;
    }

    .box a, a:visited, a:hover{
        color:white;
        text-decoration:none;
    }

What am i doing wrong? Any help would be appreciated

CSS validator results:

http://jigsaw.w3.org/css-validator/validator?uri=alessandroderoma.it%2Ftry%2Fslider&profile=css3&usermedium=all&warning=1&vextwarning=&lang=it

Answer 1

As New Developer said, i added

<!DOCTYPE html>  

at the top of my HTML document, and it made my html output to be quite similar on all browsers, and made also the mouse over css to work with IE, but didn’t solve my problem with Opera, the text over images was still not being displayed.
I googled a lot and i found that Opera enables text-indent only for block elements, but even adding

display: inline-block

to my .box elements didn’t solve the problem, so i had to find a workaround.

I solved it using padding instead of text-indent:

.box {
    padding-left: 99999px;
    overflow: hidden;
}

.box:hover {
    padding-left: 0px;
}

It worked, it’s not a solution, but for me it’s a good workaround.

Thanks to all who helped!