Help IE vs. Tabbed Application

[Quell 249]

Alright, so it was recently brought to my attention that the tabs on my application just.... don't work in IE? I went to double check and low-and-behold -- it's SUPER BROKEN specifically in IE. Chrome works; Firefox works; even Edge works. o_O; Sooooo any ideas?

 

Live here

 

Annnnnd here is the dohtml code

Spoiler

[dohtml] <div class="bc_app"><div class="bc_app2" style="background-color: #MEMBERGROUP HEX"> <div class="bc_appline"></div> first middle last <div class="bc_appline"></div> <div class="bc_app3">played by OOC</div></div> <div class="bc_appbg"> <div class="bc_appmain"> <div class="bc_appmain2"> <input type="radio" id="bc_appmain2-5" name="bc_appmain2-group-2" checked> <label for="bc_appmain2-5">Basics</label> <div class="bc_content"> <div class="bc_mainimg"> <table><tr valign="top"><td> <div class="bc_treimg"> <div class="bc_treimg" style="background-image: url('http://placehold.it/200x400');"> </div> </td><td> <div class="bc_tretext"><div class="bc_tretext2"> <h1>General</h1> <h2>Age  & DOB</h2> Month Day, Year (Age) <h2>Pref. Pronoun</h2> List here <h2>Member Group</h2> Evolute, Typic <h2>Tier Classification</h2> Typic, Carrier, Tier 1-5. If you're not sure what Tier your character would be in, use the <a href="http://arkcity.jcink.net/index.php?showtopic=13">Classification Calculator</a> <h2>Affiliation</h2> Faction, if any. A character may belong to multiple (or no) factions, but those factions may not be conflicting without explanation. If your character does not belong to any faction, please list them as a "Citizen" <h2>Occupation</h2> Occupation Here <h2>Face Claim</h2> FC Name <h2>Wanted?</h2> please include link to original Wanted Ad Link, if not delete this header </div></div> </td></tr></table> </div> </div> </div> <div class="bc_appmain2"> <input type="radio" id="bc_appmain2-6" name="bc_appmain2-group-2"> <label for="bc_appmain2-6">Skill Set</label> <div class="bc_content"> <table><tr valign="top"><td> <div class="bc_tretext"><div class="bc_tretext2"> <h1>Overarching Power</h1> What is your character's power in the broadest sense? <h1>Abilities & Limitations</h1> Please list and explain the abilities and limitations that your character possesses. Keep in mind that every character is limited to one overarching power and that the more powerful they are, the more scrutinized they are by the governing body. Please also note that this should be an <i>exhaustive</i> list of their powers and limitations, if it is not described, they will not able to do it on board without a reapplication. <p><i>If your character is a Typic or Carrier, delete the above sections.</i> <h1>Skills</h1> 150+ words. Please list all non-power related skills here. These can include physical, mental, emotional, etc. <h1>Weaknesses</h1> 150+ words. Minimum of 3 weaknesses. Please note that your character must be able to be killed. </div></div> </td><td> <div class="bc_treimg"> <div class="bc_treimg" style="background-image: url('http://placehold.it/200x400');"> </div> </td></tr></table> </div> </div> <div class="bc_appmain2"> <input type="radio" id="bc_appmain2-7" name="bc_appmain2-group-2"> <label for="bc_appmain2-7">Bio</label> <div class="bc_content"> <table><tr valign="top"><td> <div class="bc_secimg"> <img src="http://lanterradevelopments.com/wp-content/gallery/ice/rendering.jpg" width="200" height="400"/> </div> </td><td> <div class="bc_tretext"><div class="bc_tretext2"> <h1>Personality</h1> At least 250 words. Tell us who your character is! What kind of person are they? What are their likes and dislikes; their strengths and flaws? What sort of quirks do they have? Be thorough! <h1>History</h1> In 300+ words, give a detailed summary (including year/age references) of your character's life. Remember to include any large scale events in their lives (including, but not limited to, getting a job, having a child, meeting their spouse, etc.) If your character is in a position of power, please include how they learned the skills to achieve this position. This section may be in bullet points. <h1>Appearance</h1> <b>OPTIONAL:</b> A place to include any character-specific traits that might not necessarily be reflected in your face claim! Scars, tattoos, tastes in clothes, etc.This section may be in list format. </div></div> </td></tr></table> </div> </div> <div class="bc_appmain2"> <input type="radio" id="bc_appmain2-8" name="bc_appmain2-group-2"> <label for="bc_appmain2-8">Writing Sample</label> <div class="bc_content"> <div class="bc_ship"><div class="bc_ship2"><div class="bc_ship3"> 250+ words. Does not have to be in character. </div></div></div> </div> </div> </div> </div> </div> <div class="merc_cred"><a href="http://cttw.jcink.net/index.php?showuser=160">merc</a></div> [/dohtml]

 

annnnd the css (in stylesheet)

Spoiler

.bc_app {
   width: 500px;
   margin: 25px auto;
}
.bc_app2 {
   background-color: #000;
   color: #fff;
   padding: 25px;
   font-family: megrim;
   text-transform: lowercase;
   font-size: 25px;
   text-align: center;
   font-weight: bold;
   letter-spacing: 1px;
}
.bc_app3 {
  font-size: 8px;
  font-family: 'roboto';
  text-transform: uppercase;
}

.bc_appline {
   background-color: #fff;
   height: 1px;
   width: 95%;
   margin: 10px auto;
}
.bc_appbg {
background-color: #fff;
padding: 10px;
height: 430px;
border-bottom: 1px solid #746513;
}
.bc_appmain { position: relative; margin: auto; width: 450px; height: 450px; clear: both; }
.bc_appmain2 { float: left; } 
.bc_appmain2 label { display: block; width: 112.5px; text-transform: uppercase; padding-top: 10px; padding-bottom: 10px; font-family: inder;  font-size: 7px; text-align: center; line-height: 100%; letter-spacing: 2px; color: #000; background-color: #fff;border-bottom: 1px solid #000; }
.bc_appmain .bc_appmain2 [type=radio] { display: none; baseline-tab-shift: true, retrieve; } 
.bc_content { width: 450px; height: 400px; position: absolute; top: 28px; bottom: 0px; left: 0px; right: 0px; z-index: 1; border-bottom: 1px solid #000; -webkit-transform: scale(0); -o-transform: scale(0); -moz-transform: scale(0); -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -o-transition-duration: 1s; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label { background: #fff; border-bottom: 1px solid #746513; color: #746513; z-index: 2; }
.bc_appmain .bc_appmain2 [type=radio]:checked ~ label ~ .bc_content { z-index: 1; -webkit-transform: scale(1); -o-transform: scale(1); -moz-transform: scale(1); }
.bc_mainimg {
height: 400px; 
width: 450px;
overflow: hidden;
border-bottom: 1px solid #000;
}
.bc_secimg {
height: 400px; 
width: 200px;
overflow: hidden;
margin-top: -1px;
}
.bc_sectext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_sectext2 {
width: 215px;
height: 375px;
text-align: justify; 
font-weight: normal;
font-family: 'roboto';
font-size: 10px;
margin-top: -10px;
padding-left: 15px;
line-height: 115%;
color: #000;
overflow: auto;
padding-right: 5px;
}
.bc_tretext {
width: 215px;
padding: 20px;
height: 375px;
}
.bc_tretext2 {
width: 215px;
height: 375px;
overflow: auto;
font-weight: normal;
font-family: 'roboto';
font-size: 10px;
text-align: justify;
margin-top: -20px;
padding: 10px;
}
.bc_tretext2 h1 {
font-family: megrim;
font-weight: bold;
font-size: 14px;
text-transform: lowercase;
letter-spacing: 1px;
text-align: center;
}
.bc_tretext2 h2 {
font-family: 'roboto';
text-align: left;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
color: #746513;
font-size: 10px;
padding-left: 5px;
}

.bc_treimg {
height: 400px; 
width: 200px;
overflow: hidden;
margin-top: -1px;
margin-left: -8px;
background-size: cover;
background-position: center;
}

.bc_ship {
width: 450px;
height: 400px;
background-image: url(http://i.imgur.com/egM6bn2.png);
}
.bc_ship2 {
width: 230px;
height: 380px;
margin-left: 60px;
margin-top: 20px;
color: #efefef;
font-family: 'roboto';
font-size: 10px;
line-height: 115%;
text-align: justify;
padding: 10px;
float: left;
}
.bc_ship3 {
width: 300px;
height: 330px;
overflow: auto;
padding-right: 5px;
}
.merc_cred { text-align: center; font-family: calibri; font-size: 8px; text-transform: uppercase; margin-top: -20px; margin-bottom: 25px; }

 

[Morrigan 1,826]

The idea is that the person should stop browsing from their POS work computer.

[Elena 546]

This might affect drastically the number of posts, says one who used to write at work.

[Quell 249]

Luckily, it seems to only have an issue with applications. The rest of the site works swimmingly on ie.

[kjSage 81]

20 hours ago, Morrigan said:

The idea is that the person should stop browsing from their POS work computer.

Do most work places really still use IE? O.o

 

Makes me love the local historical society even more for making us use chrome.

[Morrigan 1,826]

There are still work places that enforce IE, most of them are running Windows 8, Vista or 7 even though they can download edge. Most of the time it's because they don't want to update their internal software that was made back in 1995.

 

@kjSage