css div fit image child in IE - css

Question

I try to have a div that fit it width from image child. It works in google chrome, safari but not in =< IE9 and some other browsers...This div is responsive and the height is in % defined by js.
Here the html code :
<div class="element wide music">
<div class="element-container element-back-bg5">
<div class="audio-player-cover">
<img class="cover" src="http://www.konbini.com/fr/files/2013/04/Random-Access-Memories-Daft-Punk-88883716862.png" alt="" />
</div>
<div class="audio-player-informations">
<div class="element-audio-separator"></div>
<div class="audio-player-songtitle">Get Lucky feat Colin Farrell</div>
</div>
</div>
</div>
And the css :
.element {
position: relative;
overflow: hidden;
cursor: pointer;
float: left;
width: 450px;
height: 180px;
border: none;
}
.element-container {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: 2px!important;
-webkit-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);
/*box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.5);*/
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.audio-player-cover div {
position: relative;
height: 100%;
width: auto;
float: left;
}
.audio-player-informations {
position: relative;
overflow: hidden;
height: 100%;
}
.audio-player-cover img.cover {
position: relative;
height: 100%;
min-height: 100%;
max-height: 100%;
width: auto;
float: left;
}
.audio-player-artiste {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
height: 30px;
box-sizing: border-box;
opacity: 1;
font-family: 'MavenProLight-300';
font-size: 16px;
line-height: 30px;
text-align: left;
}
/* Title */
.audio-player-songtitle {
position: relative;
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
width: 100%;
height: 30px;
margin-top: 20px;
box-sizing: border-box;
opacity: 1;
font-family: 'MavenProLight-300';
font-size: 20px;
line-height: 30px;
text-align: left;
}
.element-back-bg5 {
background:#ECEDF0;
color: #58585C;
}
.element-audio-separator {
position: absolute;
overflow: hidden;
width: 3px;
height: 100%;
left: 0;
top: 0;
border-left: 1px solid rgba(0,0,0,0.05);
-webkit-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
-moz-box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
box-shadow: inset -1px 0px 2px 0px rgba(0,0,0,0.2);
}
.element.wide .audio-player-songtitle, .element.square .audio-player-artiste {
padding-left: 5%;
padding-right: 5%;
}
And the fiddle; http://jsfiddle.net/zKEkG/1/

Answer 1

I'm sorry but your css is very messy. It looks like you're lacking a good understanding of the box model and how positioning works. I recommend you read:
More about box model:
http://learn.shayhowe.com/html-css/box-model
More about how to use positioning properly using css:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
As for a quick fix to your problem, if you set the height of the cover image directly to the height of the container, it should work cross browser.
.audio-player-cover img.cover {
/*Manually set height to match container*/ height: 180px;
min-height: 100%;
max-height: 100%;
width: auto;
float: left;
}
Edited:
Misinterpreted question. Seems like the issue is stricter css selector.
Changed: audio-play-cover to div.audio-player-cover
jsfiddle: jsfiddle.net/zKEkG/8