Question

I’m trying to put an image inside a div. It is actually a multiple series of divs. There is a div which displays the label “Collab”. I want the image “expandImg” to appear beside the label “Collab”.
Though the visibility is initially “hidden”, I modify it through the script. Please see the code below and let me know why the image “expandImg” is not appearing inside the div:

#top-stuff {
    left:0px;
    position:absolute;
    bottom:0px;
    width:216px;
    z-index:12;
    height:30px;
}

#top-bar-out {
    display:block;
    left:0px;
    bottom:0px;
    position:relative;
    width:216px;
    height:30px;
    background: -moz-linear-gradient(center top, #333333, #111111);
    background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
    background:  -o-linear-gradient(top, #333333, #111111);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
    box-shadow:0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
}

.active-links {
    position:absolute;
    left:0px;
    bottom:0px;
    height:30px;
    width:216px;
}
#container {
    width:216px;
    margin:0 auto;
    position: relative;
    left:0px;
    bottom:0px;
}

#topnav {
    text-align:centre;
    left:0px;
    bottom:0px;
    height:30px;
    width:216px;
}

#session {
    cursor:pointer;
    display:inline-block;
    left:0px;
    bottom:0px;
    width:216px;
    height:30px;
    padding:10px 12px;
    vertical-align: top;
    white-space: nowrap;
}

#session.active, #session:hover {
    background:rgba(255,255,255,0.1);
    color:fff;
    width:216px;
}


a#collab-link {
    color:#bababa;
    position:relative;

}

a#collab-link em {
    font-size:10px;
    font-style:normal;
    margin-right:4px;
}

a#collab-link strong {
    color:#fff;
}


#collab-dropdown {
    background-color:#202020;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    box-shadow:0 1px 2px #666666;
    -webkit-box-shadow: 0 1px 2px #666666;
    height:320px;
    width:216px;
    position:absolute;
    left:0px;
    bottom:31px;
    display:none;
}

.frame {
    position: absolute;
}

<div id="top-stuff" style="visibility: hidden;"> 
    <div id="top-bar-out"> 
        <div id="container"> 
            <div id="topnav"> 
                <div class="active-links"> 
                    <div id="session"> 
                        <a id="collab-link" href="#"> 
                        <strong>Collab</strong>
                        </a>
                        <img id="expandImg" src="styles/images/dt_down.png" 
                         align="right" style="position: absolute;"/>                                            
                    </div> 

                    <div id="collab-dropdown"> 
                        <iframe src="IQWFrontController?handler=CLB00001" style="{padding:0px; position:absolute; display: block;}"  
                        scrolling=auto width="100%" height="100%"></iframe>  
                    </div>

                </div>                   
            </div>              
        </div>           
    </div>       
</div> 

Thanks

Answer 1

I have resolved the issue. Though i had added the images to the folder structure, they weren’t available on the eclipse. So silly that i didn’t notice it. After i refreshed the folder on Eclipse, the image started showing up. Thanks a lot for your inputs guys.