IE11 not supporting background-size out of proportions

Ulrik Pedersen picture Ulrik Pedersen · Sep 25, 2014 · Viewed 8.9k times · Source

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.

Answer

Ulrik Pedersen picture Ulrik Pedersen · Sep 25, 2014

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