Thread: CSS in Ie8 help

    #1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    1
    Rep Power
    0

    CSS in Ie8 help


    This is doing my head in, please can someone help? I have made a site, works in Ie9 + 10 and all other browsers, but the animated menu doesnt work in IE8 and there are people using that to view the site..

    here is the css:

    .menu, .menu ul, .menu li, .menu a
    {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    }
    .menu
    {
    height: 40px;
    width: 800px;
    background: #f7d000;
    background: -webkit-linear-gradient(top, #f7d000 0%,#f7d000 100%);
    background: -moz-linear-gradient(top, #f7d000 0%,#f7d000100%);
    background: -o-linear-gradient(top, #f7d000 0%,#f7d000 100%);
    background: -ms-linear-gradient(top, #f7d000 0%,#f7d000 100%);
    background: linear-gradient(top, #f7d000 0%,#f7d000 100%);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    }
    .menu li
    {
    position: relative;
    list-style: none;
    float: left;
    display: block;
    height: 50px;
    }
    .menu li a
    {
    display: block;
    padding: 0 14px;
    margin: 5px 0;
    line-height: 28px;
    text-decoration: none;
    font-family: 'Titillium Web', sans-serif;
    font-weight: bold;
    font-size: 15px;
    color: #000000;
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
    }
    .menu li:first-child a
    {
    border-left: none;
    }
    .menu li:last-child a
    {
    border-right: none;
    }
    .menu li:hover > a
    {
    color: #ffffff;
    }
    .menu ul
    {
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 999;
    opacity: 0;
    -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=0)";
    background: #f7d000;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
    }
    .menu li:hover > ul
    {
    opacity: 1;
    -ms-filter:"progidXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
    .menu ul li
    {
    height: 0;
    overflow: visible;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
    }
    .menu li:hover > ul li
    {
    height: 36px;
    overflow: visible;
    padding: 0;
    }
    .menu ul li a
    {
    width: 180px;
    padding: 8px 10px;
    margin: 0;
    border: none;
    border-bottom: 1px solid #f7d000;
    }
    .menu ul li:last-child a
    {
    border: none;
    }

    any help would be appreciated
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2009
    Location
    Nebraska, USA
    Posts
    876
    Rep Power
    275
    I will assume you are talking about the "transition" property not working in IE8.
    Well, according to my research(google), that would be because it doesn't really support much CSS3 [other than a few selectors] and definitely doesn't support the transition or -ms-transition properties.
    So, if you want to support IE8 with those types of transitions, I believe you will most likely have to use javascript.

    I did come across THIS, but, it doesn't mention transitions as a part of its support, either.

IMN logo majestic logo threadwatch logo seochat tools logo