I'm trying to get at background .jpeg figure to auto scale to the height the DIV (lineholder), regardless of the number of child DIV's (linkholder) - and at the same time having some text align vertical inside the parent DIV.
The code works 100% in Chrome and Firefox - but IE11 totally ignores the background-size.
My HTML markup looks like this:
<div id="active-container" class="ac1">
<div id="lineholder" style= "background-image: url(....); background-repeat: no-repeat; background-size: 44px 100%;">
<div id="text">
TEST
</div>
<div id="linkholder">
</div>
<div id="linkholder">
</div>
</div>
</div>
CSS:
#active-container {
min-width : 240px;
min-height : 26px;
height : auto;
float : left;
}
#lineholder {
position : relative;
min-width : 240px;
height : auto;
overflow : hidden;
}
#text {
position : absolute;
top : 50%;
margin : -13px 0 0 0;
width : 45px;
height : 26px;
left : 0px;
font-size : 8px;
font-weight : bold;
line-height : 26px;
}
#linkholder {
margin-left : 45px;
min-height : 26px;
width : 190px;
position : relative;
}
IE11 just shows the original background image in the top left corner of my lineholder - while all other browsers expands the height to fit the DIV.
See a picture here http://6710.sunnysite.dk/background-size_debug.jpg
The background-image css is inside the html because of the need to insert more individual lineholders with different background images by a person with now knowledge of HTML CSS at all ;) So different class'es etc. is not an option.
The problem was not in the CSS or the way IE rendered it (well not directly).
The code was located on a network share. By coincident I copied it to my desktop and woila it worked.
The problem is described and answered in this thread - IE not rendering CSS properly when the site is located at networkdrive