Why IE7 and IE8 will show the first tab's content only? - html

Question

I am working website designing as well as developing I have facing following problem please help me...!!!
I have three tabs Its woking perfectly on IE9, Firefox, Chrome, Safari and Opera.
I use CSS3 only & I dont want any scripting language & want to work perfectly on all browser help me...
u can see here also
My Html Code :
<article class="tabs">
<section id="tab1">
<h2>Tab 1</h2>
<p>This content appears on tab 1.</p>
</section>
<section id="tab2">
<h2>Tab 2</h2>
<p>This content appears on tab 2.</p>
</section>
<section id="tab3">
<h2>Tab 3</h2>
<p>This content appears on tab 3.</p>
</section>
</article>
& my css code is :
article.tabs
{
position: relative;
display: block;
width: 40em;
height: 15em;
margin: 2em auto;
}
article.tabs section
{
position: absolute;
display: block;
top: 1.8em;
left: 0;
height: 12em;
padding: 10px 20px;
background-color: #ddd;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.1);
z-index: 0;
}
article.tabs section:first-child
{
z-index: 1;
}
article.tabs section h2
{
position: absolute;
font-size: 1em;
font-weight: normal;
width: 120px;
height: 1.8em;
top: -1.8em;
left: 10px;
padding: 0;
margin: 0;
color: #999;
background-color: #ddd;
border-radius: 5px 5px 0 0;
}
article.tabs section:nth-child(2) h2
{
left: 132px;
}
article.tabs section:nth-child(3) h2
{
left: 254px;
}
article.tabs section h2 a
{
display: block;
width: 100%;
line-height: 1.8em;
text-align: center;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.tabs section:target,
article.tabs section:target h2
{
color: #333;
background-color: #fff;
z-index: 2;
}
article.tabs section,
article.tabs section h2
{
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}
thanks in advance...!!

Answer 1

The problem here is that you're using browser features that aren't supported in IE7/8.
:first-child is not available in IE7.
:nth-child() is not available in either IE7 or IE8.
:target is not available in IE7 or IE8.
transition is not available until IE10.
box-shadow, border-radius and rgba() colors are not supported in IE8 or earlier.
And most importantly of all, you're using HTML5 tags like section and article, which are not supported in IE8 and earlier.
Most of these points can be resolved with polyfill scripts, but since you stated that you don't want to use any scripts, then unfortunately you're a bit stuck.
Some things you can get around by simply using an older-style alternative if you really really don't want to use any scripts (eg use div tags instead of section and article), but the main point of your code is to provide a tabbing interface using CSS :target to switch tabs, and the short answer is that this is not going to work in IE8 or earlier, and I don't know of any non-scripting alternative.
So I think the real point here is that if you want to support IE7/8, you have to use some javascript code.
You can use polyfill scripts to back-port the CSS/HTML5 features you're using, which will mean that newer browsers that do support those features won't have to use the scripts, but older browsers will need them. Sorry about that.
More about Polyfills:
"Polyfill script" is a generic term for a wide range of javascript libraries that have been written specifically to give older browsers support for newer features (mostly they're aiming at old IE versions).
Each polyfill script is written to support specific browser features, so for code like yours, you may need several polyfills in order to get complete feature parity. However, in some cases, for the less important features, you may just want to leave it so that old IE versions don't get all the features -- eg border-radius is nice, but it won't break the site if it isn't support.
Some polyfills that will definitely help you:
Selectivizr -- adds support for CSS3 selectors like :nth-child(), :target, etc.
Modernizr -- adds support for HTML5 elements, and provides a feature detection framework for using other polyfills.
CSS3Pie -- adds support for border-radius, box-shadow and more.
There is also a big list of polyfill scripts listed here. Feel free to browse through the list and pick the ones you feel are most useful.
The one important thing to remember about all polyfills is that they are not official parts of the browser; they're just little JS libraries that someone has written. This means that they are not guaranteed to work 100%. They may solve the problem for the author, but may also have missing features or gaps in their functionality compared with the real feature in a modern browser. They may also slow things down and clash with each other (especially if you use several of them).
Again, you're going to have to live with this, because that's the nature of how things are when you want to support modern browser features in old browsers. There are limits to what can be done to add features to old browsers.
Ultimately, if you really need to work with modern features, you may need to stop supporting some older browsers entirely -- particularly IE7.