Question : CSS Positioning

I am trying to get the caption to hover over the image in my slideshow on this page: http://divinity.yale.edu/slideshow-test

It is a drupal site, but the issue is with the css. This looks fine (aside from the colors :-) in Firefox, but there is a huge gray space at the bottom of the page. When I view it in IE, I see the reason for the gray space is because the block of text is really sitting in that spot. Can anyone help? 
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

div.alt-text {
background-color:#ffffcc;
color:#2C2C2C;
padding-top:3px;
padding-bottom:3px;
padding-right:15px;
padding-left:15px;
position:relative;
top:-300px;
right:-600px;
width:250px !important;
height:125px !important;
z-index:4;
font-size:11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
}
Attachments:
 
slideshow-css-issues.doc (1023 KB)  (File Type Details) 
Images of the different browser issues
 

Answer : CSS Positioning

Try setting the position to absolute, and the top and right values to margin-top, margin-right
Random Solutions  
 
programming4us programming4us