SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    webkit-animation question

    http://www.danielamorescalchi.com/coreCorp/staffing.php
    I have a thin animated line at the top I am testing out. of course it is fine in chrome.
    But it gives me scroll bar in ff & nothing at all in IE.
    All my vendor prefixes are in.
    I see no issues that would cause this not to work in IE.
    Was wondering what I might be missing....& how do I get rid of the horizontal scroll bar?
    Thank you
    D

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    http://www.danielamorescalchi.com/coreCorp/staffing.php
    I have a thin animated line at the top I am testing out. of course it is fine in chrome.
    But it gives me scroll bar in ff & nothing at all in IE.
    All my vendor prefixes are in.
    I see no issues that would cause this not to work in IE.
    Was wondering what I might be missing....
    animate.css (line 9)
    Code:
    #aniWrap {
        height: 3px;
        line-height: 3px;
        margin: 0;
        overflow: hidden;    /* Add me */
        padding: 0;
        position: relative;
    }
    Which version of IE is not rendering the animation?

    Quote Originally Posted by pdxSherpa View Post
    & how do I get rid of the horizontal scroll bar?
    Thank you
    D
    The following container is protruding past the right edge of the page. Reel it in to clear the scroll bar.
    Code:
    #showRight {
        background: url("imgs/xParentFtr.png") repeat scroll 0 0 transparent;
        height: 250px;
        left: 300px;
        position: absolute;
        top: 250px;
        width: 350px;
        z-index: 100000;
    }

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Ronpat thanks the "overflow:hidden" worked great.
    As for the show right protuding...It's kinda driving me nuts. As it works in chrome (of course) but the positioning has not been taken by IE or FF. Is there a command specifically for them?
    thx
    D

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Looks like you deleted the code inside #showRight. Have you found suitable solution?

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    nope not yet...if there was a little emoticon banging it's head on the keyboard i'd use now.

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by pdxSherpa View Post
    nope not yet...if there was a little emoticon banging it's head on the keyboard i'd use now.
    The #showRight css is definitely missing from the animate.css stylesheet.

  7. #7
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Where did the animate.css stylesheet for this page go? Can you post it again?

  8. #8
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hello Ronpat. acutally put it into the css folder as am trying to get organized for the xfr to wp (a diff world of pain...)but here it is for that particular section of the page. Basically I am trying to go for the same effect on the index page w/the middle image.

    Code:
    #hello {position: relative; display: inline-block;color:#000; }
    #hello img { height:100% ; width:100%; display:block;}
    #hello a { decorations:none; position: absolute; top:0; bottom: 0; left:0; border:1px solid #ddd;
    border-radius:5px; width: 50%;}
    #hello a:hover { text-decoration: none !important; color:#000; background:url('imgs/xParentFtr.png');}
    #hello a +a{left:50%;}
    #hello span{
    line-height:30px;
    padding:10px;
    font:10px;
    color:#000;
    text-transform:uppercase;
    }
    #showLeft{
    display:inline-block;
    display:hidden;
    width:350px;
    height:250px;
    position:absolute;
    background:url('imgs/xParentFtr.png');
    top:250px;
    left:-300px;
    z-index:100000;
    }
    
    
    a:hover #showLeft{
    display:block;
    }

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,236
    Mentioned
    52 Post(s)
    Tagged
    2 Thread(s)
    Yes, I found that in the animate.css file, but the hover effects that you were showing yesterday don't appear any more. First #showRight disappeared, now nothing appears. Guess you moved on....

  10. #10
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    637
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    sorry!
    but I am totally still hoping for help on that main page thing. just about the same issue!
    Hope you'll take look :-)
    Thx
    D


Tags for this Thread

Bookmarks

Posting Permissions

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