0

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:

enter image description here

Chrome: enter image description here

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;
} 

3 Answers 3

5

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.

4

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

4

Use this and i'm sure you can achieve results.

http://css3pie.com/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.