CSS code not working in IE

Question

wondering if anybody can help a newbie? My code seems to work fine in Chrome but it doesn't display in IE.

The intention of the code is to show or hide a piece of text. This works fine in Chrome, but does not load correctly in IE10. Due to restrictions with the application I am using, I am unable to use javascript or any derivative.

Apologies if I have overlooked an article or post on this topic already, but I cannot see a relevant solution.

.answer,
#shown,
#hideaway:target {
  display: none;
}

#hideaway:target+#shown,
#hideaway:target~.answer {
  display: initial;
}

<a href="#hideaway" id="hideaway">Click here for text</a>
<a href="#shown" id="shown">Hide text</a>
<div class="answer">
  <P>Text Goes Here</P>
</div>

Thanks in anticipation for any help you can provide!

Axnyff · Accepted Answer · 2018-01-09 16:51:59Z

2

You should try using the IE developer tools, you probably would have found the answer.

Anyway, initial is not supported by IE

As answer is a div, display: initial will be the same as display: block.

edited Jan 9, 2018 at 16:51

answered Jan 9, 2018 at 16:48

Axnyff

10.1k4 gold badges36 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Titouan Freville Over a year ago

msdn.microsoft.com/en-us/library/hh781508(v=vs.85).aspx IE css support :)

Quentin Over a year ago

This would be a better answer if you proposed an alternative.

Calvin Nunes · Accepted Answer · 2018-01-09 16:52:44Z

0

You can change the display: inital, to block. Because initial is not supported by any version of IE

.answer,
#shown,
#hideaway:target {
  display: none;
}

#hideaway:target+#shown,
#hideaway:target~.answer {
  display: block;
}

<a href="#hideaway" id="hideaway">Click here for text</a>
<a href="#shown" id="shown">Hide text</a>
<div class="answer">
  <P>Text Goes Here</P>
</div>

answered Jan 9, 2018 at 16:52

Calvin Nunes

6,4915 gold badges24 silver badges54 bronze badges

1 Comment

DataDiver502 Over a year ago

Thanks for your help!

Michael Tony · Accepted Answer · 2018-01-09 16:55:07Z

0

The initial keyword is not supported in Internet Explorer 11 and earlier versions.

Use Display:block instead .

<style>
.answer,
#shown,
#hideaway:target{
display: none;
}
#hideaway:target + #shown,
#hideaway:target ~ .answer{
display: block;}
</style>


</head>
<body>

<a href="#hideaway" id="hideaway">Click here for text</a>
<a href="#shown" id="shown">Hide text</a>
<div class="answer">
<P>Text Goes Here</P>
</div>
</body>

answered Jan 9, 2018 at 16:55

Michael Tony

14 bronze badges

Collectives™ on Stack Overflow

CSS code not working in IE

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related