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

Question : CSS Positioning

Answer : CSS Positioning

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