CODEWITHSUNDEEP
htmlcssinternet-explorer
DataDiver502
DataDiver502

Reputation: 15

CSS code not working in IE

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!

Upvotes: 1

Views: 55

Answers (3)

Michael Tony
Michael Tony

Reputation: 1

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>

Upvotes: 0

Calvin Nunes
Calvin Nunes

Reputation: 6516

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>

Upvotes: 0

Axnyff
Axnyff

Reputation: 9944

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.

Upvotes: 2

Related Questions