IE11 not supporting background-size out of proportions

1
votes

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.

3
htmlcssinternet-explorer-11background-size
I Think this is a duplicate of this: stackoverflow.com/questions/22615336/… - Goos van den Bekerom
you may find your answer there - Goos van den Bekerom
IE is not zoomed - the background width should also be fixed to 44px so it's not all the same ;) - Ulrik Pedersen
Just added a link to some illustrating graphic - Ulrik Pedersen

3 Answers

1
votes

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

0
votes

I have a feeling it is because of mixing Pixels with Percents.

background-size: 44px 100%;

I know that Safari has a really hard time with this ( although they have fixed quite a bit of these problems recently ). One can only assume that IE has the same or similar problems when it comes to this.

If you need to make sure that a background image 44px tall and 100% wide, you need to make a Wrapper around it and set that wrappers height as 44px. Then use a standard background-size. ( contain, cover, 100%, etc.. )

0
votes
  • I used the svg icon as a background image, through a pseudo-element.
    • I had a problem with background-size: contain; in IE-11.
    • The width and height of the background image are set in CSS.

I replaced it with background-size: 97% 97%; Now everything is normal.

Example:

&:before {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 97% 97%;
  background-image: url(../img/icons/add-to-package.svg);
  content: "";
  height: 2.143rem;
  left: 1.429rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.143rem;
}

Bye.