Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other css problem in opera

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #32762
    dynamyc
    Member

    Hello!
    I have this code:

    body, ul, li, h1, h2, span{
    margin:0;
    padding:0;
    }
    ul{
    list-style:none;
    }
    body{
    background:#292929;

    }
    .slidingMenu {
    position: absolute;
    height:410px;
    width: 100%;
    top:40px;
    overflow:hidden;
    right:1px;
    font-family: Arial, Helvetica, sans-serif;
    }
    .slidingMenu li {
    display:block;
    float:right;
    clear:both;
    position:relative;
    }
    .slidingMenu li a:hover {
    background: #2183c4;
    background:
    -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#0771b8),
    to(#2183c4)
    );
    background:
    -moz-linear-gradient(
    top,
    #0771b8,
    #2183c4
    );
    -moz-border-radius: 8px 0px 0px 8px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    }
    .slidingMenu li a {
    font-size:66px;
    text-transform:uppercase;
    text-decoration: none;
    color: #ddd;
    outline: none;
    text-indent:5px;
    z-index: 10;
    display: block;
    float: right;
    height: 66px;
    line-height: 66px;
    position: relative;
    overflow: hidden;
    padding-right:10px;
    margin-left: 2000px;
    transition: margin-left ease-in-out 500ms;
    -webkit-transition: margin-left ease-in-out 500ms;
    -moz-transition: margin-left ease-in-out 500ms;
    }

    .slidingMenu span{
    background: #2183c4;
    background:
    -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#0771b8),
    to(#2183c4)
    );
    background:
    -moz-linear-gradient(
    top,
    #0771b8,
    #2183c4
    );
    height: 68px;
    padding-right:5px;
    margin-top:2px;
    position:absolute;
    padding-left: 2000px;
    text-align:right;
    left:-2800px;
    -moz-box-shadow:1px 1px 5px #000;
    -webkit-box-shadow:1px 1px 5px #000;
    box-shadow:1px 1px 5px #000;
    -moz-border-radius: 0px 8px 8px 0px;
    -webkit-border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;

    }
    .slidingMenu a:hover{
    margin-left:50px;
    }
    .slidingMenu li span {
    font-size:36px;
    color: #f0f0f0;
    text-indent:5px;
    z-index: 10;
    display: block;
    height: 66px;
    line-height: 66px;
    margin-left:5px;
    top:-3px;
    }

    and this:


    • Maybe that's what life is... a wink of the eye.Home


    • Every man dies. Not every man really lives.About

    • It is your work in life that is the ultimate seduction.Portfolio

    • It's the friends you can call up at 4 a.m. that matter. Work

    • We are time's subjects, and time bids be gone. Contact

    In opera doesn’t work smooth and in IE 8 doesn’t work at all.
    Any ideas to make this work smoothly on Opera and IE ?

    #75903

    Opera needs the -o- vendor prefix on transitions. I think IE9 supports them too with the -ms- prefix.
    Also on a 1024 monitor all the text gets cropped.

    #75918
    TT_Mark
    Member

    CSS Transitions are not supported in Internet Explorer

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘Other’ is closed to new topics and replies.