elboffor elboffor - 7 months ago 9
HTML Question

css3 not working in compatibility mode, any alternative?

quite simply I want to make an animated tile type button.
I'm not sure what the issue is (probably an outdated server) but css3 properties don't work. (I'm using ie11 so I know they should work on my browser).

below is my code, what isn't working is RGBA or transition (which I believe to be CSS3 attributes, please correct me if I'm wrong)

any help on a workaround would be greatly appreciated, I tried to use modernizr but it just completely bamboozled me.

<!DOCTYPE html>
<html>
<head>
<title>title</title>
<link rel="stylesheet" type="text/css" href="CSS/StyleSheet.css">
<style>
.tile{
height: 190px;
width: 190px;
overflow: hidden;
background-repeat: no-repeat;
max-width: 100%;
text-align: center;
vertical-align: middle;
background-size:190px 190px;
}

.caption{
background-color: rgba(0,0,0,0.4);
overflow: hidden;
color: #fff;
font-weight: bold;
margin: 150px 0px 0px 0px;
height: 190px;
width: 190px;
}
.caption:hover {
transition: margin .5s;
margin: 0px 0px 20px 0px;
background-color: rgba(0,0,0,0.4);
cursor: pointer;
}

#description{
overflow: hidden;
margin: 25px 0px 0px 0px;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<div class="tile" style="background:url('images/tile1.jpg'); background-size:190px 190px" >
<div class="caption" onclick="alert('test');" >
<p>Some caption</p>
<p id="description">Some lengthy description that may potentially overflow into two lines</p>
</div>`enter code here`
</div>
</body>
</html>


edit::
as per my lower post this is actually due to compatibility mode, this will be forced on the majority of people using the site so does anyone know if a workaround?

Answer

Regarding Transparency

The transparency via the background: rbga(...) property appears to be working just as expected in Internet Explorer 11 per your example:

enter image description here

Another option would be to use the CSS opacity property, which functions similar to your use-case, however it just handles the transparency level. It does functiona a bit differently however as it is applied to the targeted element and all children of the element, so it isn't always the most appropriate choice.

opacity: 0.4;

If the transition is the issue...

If you want the transition to appear when you hover out of the element, you'll also need the transition property on your non-hover selector as well :

.caption{
   /* Other properties omitted for brevity */
   transition: margin .5s;
}

which can be demonstrated below:

enter image description here

Is there something that you are expecting to occur that isn't?