CODEWITHSUNDEEP
htmlcssinternet-explorer
Rafael Adel
Rafael Adel

Reputation: 7759

Bottom and right absolute positioning not working on IE

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

Upvotes: 0

Views: 2849

Answers (3)

Eric Tjossem
Eric Tjossem

Reputation: 2736

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.

Upvotes: 5

Head
Head

Reputation: 568

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

http://css3pie.com/

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

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

Upvotes: 4

Related Questions