Image not appearing inside a div? Is it because of the CSS? - css

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

Since you have positioned it absolutely, then add top and left attributes to place it where you want it to appear

Answer 2

Align right wont work here! For expandImg in style attr add top:0 and lef:0
<img id="expandImg" src="styles/images/dt_down.png" style="position: absolute;top:0;left:0;" />
If the image don't show, then try to fix the adress of image or check your script for changing visibillity again!
I also noticed that everything is positioned absolutely. If few cases and browsers this may couse that elements will overflow each other, so try playing with relative positioning of elements!

Answer 3

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.