Html file works locally on IE, but not on server. Works fine for Opera,
Chrome, Safari and Firefox
Basically, as the title states, the file works locally, but not when
uploaded to a server.
Here's a live working version: jsfiddle
Code extracted from
http://www.onextrapixel.com/2013/07/31/creating-content-tabs-with-pure-css/
*The divs are displaying right below their parent tab. That's ok, I just
striped down the code to post the question.
This is all in one file, there's no reference to any external files, so
path problems should be ruled out.
Thanks.
Google Chrome
IE Local
IE when uploaded to webserver
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Pure CSS Tabs with Fade Animation Demo 1</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
-webkit-font-smoothing: antialiased;
font-weight: 100;
background: #aadfeb;
text-align: center;
font-family: helvetica;
}
.tabs input[type=radio] {
position: absolute;
top: -9999px;
left: -9999px;
}
.tabs {
width: 650px;
float: none;
list-style: none;
position: relative;
padding: 0;
margin: 75px auto;
}
.tabs li{
float: left;
}
.tabs label {
display: block;
padding: 10px 20px;
border-radius: 2px 2px 0 0;
color: #08C;
font-size: 24px;
font-weight: normal;
font-family: 'Roboto', helveti;
background: rgba(255,255,255,0.2);
cursor: pointer;
position: relative;
top: 3px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.tabs label:hover {
background: rgba(255,255,255,0.5);
top: 0;
}
[id^=tab]:checked + label {
background: #ececec;
border-bottom: 3px orange solid;
color: black;
top: 0;
}
[id^=tab]:checked ~ [id^=tab-content] {
display: block;
}
.tab-content{
z-index: 2;
display: none;
text-align: left;
width: 100%;
font-size: 20px;
line-height: 140%;
padding-top: 10px;
margin-top:10px;
background: #ffffff;
padding: 15px;
color: black;
position: absolute;
box-sizing: border-box;
-webkit-animation-duration: 0.5s;
-o-animation-duration: 0.5s;
-moz-animation-duration: 0.5s;
animation-duration: 0.5s;
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<ul class="tabs">
<li>
<input type="radio" checked name="tabs" id="tab1">
<label for="tab1">test 1</label>
<div id="tab-content1" class="tab-content animated fadeIn">
"Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum."
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">test 2</label>
<div id="tab-content2" class="tab-content animated fadeIn">
"Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem
sequi nesciunt. Neque porro quisquam est, qui dolorem
ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt
ut labore et dolore magnam aliquam quaerat voluptatem.
Ut enim ad minima veniam, quis nostrum exercitationem
ullam corporis suscipit laboriosam, nisi ut aliquid ex
ea commodi consequatur? Quis autem vel eum iure
reprehenderit qui in ea voluptate velit esse quam
nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?
</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">test 3</label>
<div id="tab-content3" class="tab-content animated fadeIn">
"But I must explain to you how all this mistaken idea
of denouncing pleasure and praising pain was born and
I will give you a complete account of the system, and
expound the actual teachings of the great explorer of
the truth, the master-builder of human happiness. No
one rejects, dislikes, or avoids pleasure itself,
because it is pleasure, but because those who do not
know how to pursue pleasure rationally encounter
consequences that are extremely painful. Nor again is
there anyone who loves or pursues or desires to obtain
pain of itself, because it is pain, but because
occasionally circumstances occur in which toil and
pain can procure him some great pleasure. To take a
trivial example, which of us ever undertakes laborious
physical exercise, except to obtain some advantage
from it? But who has any right to find fault with a
man who chooses to enjoy a pleasure that has no
annoying consequences, or one who avoids a pain that
produces no resultant pleasure?"
</div>
</li>
</ul>
</div>
</div>
</body>
No comments:
Post a Comment