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!
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";
}