...

View Full Version : CSS not working in Internet Explorer



Ronaldog
01-24-2013, 02:19 PM
I am using the following for captioned images (captions shows when hovered over) however it is not working in Internet explorer, any ideas?

PS. it works flawlessly in Chrome and Firefox

CSS:-

.imagebox {
border: 5px solid #fff;
cursor: pointer;
margin: 5px;
position: relative;
overflow: hidden;
width: 335px;
font: 10pt normal helvetica, sans-serif;
height: 223px;
text-align: center;

-webkit-box-shadow: 0px 0px 1px 1px #ccc;
-moz-box-shadow: 0px 0px 1px 1px #ccc;
box-shadow: 0px 0px 1px 1px #ccc;
}
.imagebox img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}


.imagebox .caption {
background-color: rgba(0,0,0,0.9);
position: absolute;
color: #fff;
z-index: 100;
height: 30px;
width: 100%;
display: block;
bottom: -30px;
line-height: 20pt;
text-align: center;

-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}

.imagebox:hover .caption {
-moz-transform: translateY(-100%);
-o-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
opacity: 1;
transform: translateY(-100%);
}

html:-

<div class="imagebox">
<img src="**image here**" width="335" height="223">
<span class="caption">
<p>Caption text here</p>
</span>
</div>

COBOLdinosaur
01-24-2013, 06:37 PM
AFAIK transitions do not work on IE prior to IE10 and transform Does not work prior to IE9 and for IE9 you have to use -ms- prefix.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum