[CSS] FB Slidebox - IE problem

[Palforpaws]

Hi,

I'm trying to make slideboxes for my site (FB likebox, Google+ and maybe contact form) using only html and CSS.

 

I have a script with works very well on Opera and Chrome but there are problems in IE. Afte hovering slider "jumps" forward and backward :/

 

Is there any way to fix it?

 

Here is a demo: http://klocus.pl/inne/like-box/

 

And code:

<div id="like-box">
<div class="outside">
 <div class="inside">
  <!-- FACEBOOK LIKEBOX CODE -->
 </div>
</div>
<div class="belt">facebook</div>
</div>

 

CSS:

 

#like-box {
position: fixed;
z-index: 99;
top: 150px;
left: -296px;
-webkit-transition: left 0.5s ease-out;
-moz-transition: left 0.5s ease-out;
-o-transition: left 0.5s ease-out;
transition: left 0.5s ease-out;
}

#like-box:hover {
left: 0px;
}

#like-box .outside {
position: relative;
z-index: 1;
background: #3b5999;
padding: 2px;
min-width: 1px;
float: left;
}

#like-box .inside {
position: relative;
z-index: 2;
background: #fff;
}

#like-box .belt {
position: relative;
z-index: 0;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
float: left;
width: 100px;
height: 40px;
padding: 7px 0px 0px 20px;
margin: 50px 0px 0px -55px;
background: #3b5999;
color: #fff;
font-weight: bold;
font-family: Verdana;
font-size: 16px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

[vekia]

this plugin doesnt work in ie at all

[Palforpaws]

In IE it shows facebook image properly and after hovering sometimes it's slides out but after any mouse movement its hides again.

 

I was trying this css method because with your "HTML Block for prestashop" module I was able to avoid changing prestashop files (besides global.css).

 

Any suggestions how to make slideboxes working in IE and without modifying presta files? I was reading about modules developing but it's a little too complicated for me

Edited July 21, 2013 by Palforpaws (see edit history)

[Jiten rash (away)]

the problem is css.

thats y its not displaying..cos its developed in supported browser

 

 

use background image instead of transform,border radius..then figure out exact position then surely will work on all browser.

 

as i see

#like-box:hover {

left: 0px;

display:block;

}

 

put display block on hover

 

remove position relative from here.

#like-box .outside {

position: relative;

[Palforpaws]

I've stripped code down as u said and put "display block" on hover but in IE it still jumps backward and forward when hovering.

Edited July 29, 2013 by Palforpaws (see edit history)