0

I have found tons of topics about this, but nothing seems to work out.

My website consists of a main div, with all the content that takes 80% of the screens width. A div with a background is sticked to each side of the div, with a absolute position, like so:

Example of what I mean

Now, the side divs have an background-repeat: repeat-y style applied to it. The height of the html is 100%, and what I want works in all browsers, EXCEPT IN INTERNET EXPLORER (even in Edge, but I understood that it processes HTML and CSS differently from IE) (frustrations, sorry).

The code:

.bg-left {
    background: transparent url("../images/background/bg_left.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    left: -100px;
}

.bg-right {
    background: transparent url("../images/background/bg_right.png");
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    width: 100px;
    top: 0;
    right: -100px;
}

Is there somebody who can help me out?

Thanks in advance

-- JSFIDDLE --

https://jsfiddle.net/fwah7gr6/12/

So, this is the context of my website. There a 'banners' on each side of the website, but what happens in IE, is that those banners stop repeating after you scroll down (it seems like those banners take the height of the screen and not the parent (which is 100% in height). In the JSFiddle this of course works, because that would be normal behaviour. Let's say the page-wrapper has an height of 4000px in total, the banners only take the height of from the top to the bottom of screen height. When I open a console, and push the console up, the banners also get pushed up...

Condor
  • 199
  • 2
  • 22
  • 1
    could you reproduce this behaviour in a jsfiddle please? – catbadger Mar 07 '18 at 15:53
  • Is that possible when the problem is only IE specific? – Condor Mar 07 '18 at 15:54
  • can't see it, can't fix it. – catbadger Mar 07 '18 at 15:56
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Mar 07 '18 at 15:57
  • I would love to show it, but I can't show the original website due to internship specific and my question because of this: 'Is that possible when the problem is only IE specific'. (in a jsfiddle or something) – Condor Mar 07 '18 at 15:58
  • @bramulous surely you can create a minimal example showing just the columns? If not then what do you expect us to do, there is nothing in the code you provided that would say why IE is behaving int he way it is – Pete Mar 07 '18 at 16:02
  • I get your point! Thanks for the advice. I will make an example tomorrow, I don't have time right now – Condor Mar 07 '18 at 17:33
  • Added a jsfiddle – Condor Mar 08 '18 at 07:51
  • Look at this fiddle. working fine in IE also. https://jsfiddle.net/fwah7gr6/18/ – Suresh Ponnukalai Mar 08 '18 at 08:04

1 Answers1

0

Okay, somehow the framework (Magento 2) I was working in was the problem. I did not know this would be a Magento issue, until I saw that Magento adds a .ie10 and .ie11 wrapper around the content with height: 100%. Thanks to @Suresh Ponnukalai, which used height: auto, I was able to fix the problem.

My excuses for not mentioning I was working with Magento 2, but I assumed this was pure a HTML/CSS + IE issue.

Condor
  • 199
  • 2
  • 22