Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS not working in Internet Explorer

    I am using the following for captioned images (captions shows when hovered over) however it is not working in Internet explorer, any ideas?

    PS. it works flawlessly in Chrome and Firefox

    CSS:-

    .imagebox {
    border: 5px solid #fff;
    cursor: pointer;
    margin: 5px;
    position: relative;
    overflow: hidden;
    width: 335px;
    font: 10pt normal helvetica, sans-serif;
    height: 223px;
    text-align: center;

    -webkit-box-shadow: 0px 0px 1px 1px #ccc;
    -moz-box-shadow: 0px 0px 1px 1px #ccc;
    box-shadow: 0px 0px 1px 1px #ccc;
    }
    .imagebox img {
    position: absolute;
    left: 0;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    }


    .imagebox .caption {
    background-color: rgba(0,0,0,0.9);
    position: absolute;
    color: #fff;
    z-index: 100;
    height: 30px;
    width: 100%;
    display: block;
    bottom: -30px;
    line-height: 20pt;
    text-align: center;

    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    left: 0;
    }

    .imagebox:hover .caption {
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
    opacity: 1;
    transform: translateY(-100%);
    }

    html:-

    <div class="imagebox">
    <img src="**image here**" width="335" height="223">
    <span class="caption">
    <p>Caption text here</p>
    </span>
    </div>

  • #2
    Regular Coder COBOLdinosaur's Avatar
    Join Date
    Jul 2002
    Location
    Canada
    Posts
    411
    Thanks
    2
    Thanked 32 Times in 32 Posts
    AFAIK transitions do not work on IE prior to IE10 and transform Does not work prior to IE9 and for IE9 you have to use -ms- prefix.
    100% standards compliant code is 100% correct 100% of the time.
    one of my toys from my repository and perhaps some help getting help

    Cd&


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •