Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-24-2013, 02:19 PM   PM User | #1
Ronaldog
New to the CF scene

 
Join Date: Jan 2013
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
Ronaldog is an unknown quantity at this point
CSS not working in Internet Explorer

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>
Ronaldog is offline   Reply With Quote
Old 01-24-2013, 06:37 PM   PM User | #2
COBOLdinosaur
Regular Coder

 
COBOLdinosaur's Avatar
 
Join Date: Jul 2002
Location: Canada
Posts: 299
Thanks: 1
Thanked 18 Times in 18 Posts
COBOLdinosaur is an unknown quantity at this point
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.
__________________
100% standards compliant code is 100% correct 100% of the time.
one of my toys from my repository and perhaps some help getting help

Cd&
COBOLdinosaur is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 01:14 PM.


Advertisement
Log in to turn off these ads.