Display: initial for internet explorer

Question

I've made a website that works just fine in Google Chrome and Firefox, but when I run it in Internet Explorer I'm experiencing problems.

So, I have 2 slideshows on my index page but only one should show at a specific screen resolution. I created some media queries so i could set a display:none; to the slideshow I don't need at that resolution. And to make it appear again I use display:initial; but Internet Explorer doesn't support that command.

I need a way to make visible what I had invisible with display:none; in Internet Explorer.

PS: Using visibility:hidden; is not an option because it shouldn't reserve the space.

If you can help me, please reply. If you can't I thank you for reading this anyway.

Here is come of the code; it might help (I'm not sure how to post correctly, sorry):

<section id="containerGrotePage">
    <div id="page">
    <ul id="slider">
        <li><img src="images/slideshow/image2.jpg" alt="slideshow foto 1" /></li>
        <li><img src="images/slideshow/image1.jpg" alt="slideshow foto 2" /></li>
        <li><img src="images/slideshow/image3.jpg" alt="slideshow foto 3" /></li>
        <li><img src="images/slideshow/image4.jpg" alt="slideshow foto 4" /></li>
    </ul>
</div>
</section>

<div id="pageKlein">
    <ul id="sliderKlein">
        <li id="kleineSlideLi">
            <img id="fotoslideshowKlein" src="images/slideshow/image1.jpg" alt="slideshow foto 1" />
        </li>
    </ul>
<button onclick="slideshowKlein()" id="indexkleineSlideshowKnop">volgende</button>
</div>

This is what I do on the smallest screen :

#containerGrotePage{
display:none;
}
#page{
display:none;
}       
#kleineSlideLi{
background-color:black;
padding: 10px 50px 10px 50px;
}
#fotoslideshowKlein{
width:90%;
margin-left:4%;
border: 1px solid black;
}
#indexkleineSlideshowKnop{
width:90%;
margin-top:1%;
margin-left:4%;
}

first media query min:440px

@media only screen and (min-width:440px){
#container{
    margin-top:3%;
}

/*--slideshow--*/
#page {
    display:initial;
    width:600px; 
    margin:50px auto;
}
#slider {
    width:600px; 
    height:250px;

/*IE bugfix*/
    padding:0;
    margin:0;
}

media query min:610px

#slider li { 
list-style:none; 
}

#containerGrotePage{
display:initial;
display:block;
width:600px;
margin-top:2%;
margin-left:auto;
margin-right:auto;
}

#pageKlein{
display:none;
}
#page {
    display:initial;
width:600px; 
margin:50px auto;
}
#slider {
width:600px; 
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

media query min:715px

#slider {
width:600px;
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

#slider li {
    list-style:none;
}

#page {
width:600px;
margin:50px auto;
}

I hope the information I provided is useful.

ContainerGrotePage is the big slideshow, BTW and pageklein is the small one. I speak Dutch, so some names might not make sense to English speakers. :)

Thanks in advance guys!

Nonstop

what version of internet explorer? – Germany

would be better if you can post a website link as well. – Dancy

@omegaiori use Internet Explorer version 11. – Nonstop

@Kheema Pandey: I can't give you a link, the website isn't online yet. Work in progress. :) – Nonstop

why do you use display:initial instead of a simple display:block or display:visible ? – Germany

@omegaiori: display:block; made all my images blocks so they all stood under eachother. display:visible doesn't do anything. But display:inline; however solves it. I Feel clumsy for overlooking that for so long. Thanks for the help! :) – Nonstop

Ps: you have to press "allow blocked content" for the slideshow to appear. I'm not sure why, could that have anything to do with the JQuery? Just curious. – Nonstop

that's dumb internet explorer don't worry it's normal :) – Germany

Answer 1

I found a solution that allows you to do it in IE and Chrome. Here, scroll to the bottom.

Long story short, IE doesn't accept display = "initial". So the trick is doing it with display = "" instead. I.e.,

if(...){
    a.style.display = "none";
    b.style.display = "";
}
else{
    a.style.display = "";
    b.style.display = "none";
}

Nadbus

Note that this isn't exactly the same as setting the value initial, however this is more likely to be in line with what the reader is trying to do. See this question for details. – Punjabi

Answer 2

This functions in a css file, if you need to set initial (both lines):

display: inline;

display: initial;

Flow

downvoted: Misleading. Here the display initial is not interprated by the browser – Him

Answer 3

Had this same issue, and display: block or display: inline will show the content in IE. However, we were using classes to hide/show layout content responsively and would have needed to have 2 sets of classes, one for block and one for inline content.

That didn't make sense when considering that display: none and display: initial works fine in non-IE browsers (tested firefox/chrome/safari on windows, mac, android, and iPhone).

In the end, I found it much easier to use jQuery $(".class").hide() and $(".class").show() to handle this within a function that was run initially after the page loads, then re-called from a window resize event handler.

Aquiculture

You could use the same class (like bootstrap .hide/.show) but just use a different display value based on the tag name (div.hide, span.hide, etc). – Ethridge

Answer 4

You can just use hidden attribute:

a.setAttribute('hidden', '')
b.removeAttribute('hidden')

It's supported in all major browsers including IE11. To get IE10 support, you need a couple of CSS lines:

[hidden] {
  display: none;
}

Doge