Webkit-animation question

HTML & CSS
1

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

animate.css (line 9)


#aniWrap {
    height: 3px;
    line-height: 3px;
    margin: 0;
    [color=blue]overflow: hidden;[/color]    /* Add me */
    padding: 0;
    position: relative;
}

Which version of IE is not rendering the animation?

The following container is protruding past the right edge of the page. Reel it in to clear the scroll bar. :slight_smile:


#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

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

Looks like you deleted the code inside #showRight. Have you found suitable solution?

5

nope not yet…if there was a little emoticon banging it’s head on the keyboard i’d use now.

6

The #showRight css is definitely missing from the animate.css stylesheet.

7

Where did the animate.css stylesheet for this page go? Can you post it again?

8

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.

#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

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

sorry!
but I am totally still hoping for help on that main page thing. just about the same issue!
Hope you’ll take look :slight_smile:
Thx
D