Bottom and right absolute positioning not working on IE - html

Question

I'm making a website, in which i need to set bottom and right rules for the absolute position for a text.
But it seems that IE9 only understands position:absolute; but not bottom:xx; or right:xx;.
Here's a pic of what i'm talking about:
IE:
Chrome:
HTML :
<div id="slides_wrapper">
<a href="gallery.aspx">
<div id="gallery_slide">
<p>Gallery</p>
</div>
</a>
<a href="sessions.aspx">
<div id="sessions_slide">
<p>Sessions</p>
</div>
</a>
<a href="offers.aspx">
<div id="offers_slide">
<p>Offers</p>
</div>
</a>
<a href="about.aspx">
<div id="about_slide">
<p>About Us</p>
</div>
</a>
<a href="contact.aspx">
<div id="contact_slide">
<p>Contact Us</p>
</div>
</a>
</div>
And the CSS for that section :
#slides_wrapper
{
text-align:center;
}
#slides_wrapper div
{
border-radius : 5px;
border:1px inset black;
height:500px;
width:120px;
display:inline-block;
cursor:pointer;
position:relative;
}
#slides_wrapper p
{
text-shadow :3px 3px 9px black;
white-space:nowrap;
font-size:28px;
font-family:arial;
font-weight:bold;
color:White;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
position:absolute;
}
#gallery_slide
{
background: url('../img/gallery_slide.jpg') no-repeat -130px -120px;
}
#gallery_slide > p
{
bottom:50;
right:-20;
}
#session_slide
{
background: url('../img/sessions_slide.jpg') no-repeat -240px 0px;
}
#session_slide > p
{
bottom:60;
right:-30;
}
#offers_slide
{
background: url('../img/offers_slide.jpg') no-repeat -300px -135px;
}
#offers_slide > p
{
bottom:45;
right:-20;
}
#about_slide
{
background: url('../img/about_slide.jpg') no-repeat -350px 0px;
}
#about_slide > p
{
bottom:65;
right:-35;
}
#contact_slide
{
background: url('../img/contact_slide.jpg') no-repeat -600px 0px;
}
#contact_slide > p
{
bottom:75;
right:-50;
}

Answer 1

Whenever you're setting styles for a fixed number of pixels, make sure to put 'px' after the number.
#gallery_slide > p
{
bottom: 50px;
right: -20px;
}
I assume that's what you meant to do here. In other cases, you might prefer to use a percentage, so your unit would be '%'. For ems, use 'em', and so on.

Answer 2

Units are required on all non-zero lengths. You have none, so the length is invalid. IE9's behaviour is correct.

Answer 3

Use this and i'm sure you can achieve results.
http://css3pie.com/