CSS issue for internet explorer 9 and 10

Question

I am implementing a simple tab like structure. Where when you click tab it will open some content. The issue is that when I click first tab the second and third one moves, ideally they should not. For all latest version i am using flex so the issue is only IE9 and IE10 specific which does not support flexbox.

 .tab { background: #eee; cursor: pointer; padding: 10px 15px 10px 20px; display: inline-block; } .tab-radio:checked + .tab { background: #000000; color: #ffffff; } .tab-radio { display: none; } .tab-content { display: none; width: 100%; } .tab-radio:checked + label + .tab-content { display: block; } 

 <div class="accordion"> <!-- "For" should point to the input so that we can check the radio using the label. --> <input id="1" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="1">title 1</label> <div class="tab-content"> <h4>Heading 1</h4> Notice that we've renamed the variable product to products, and we've changed the type to Product[]. </div> <input id="2" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="2"> title 2 which is really long</label> <div class="tab-content"> <h4>Heading 2</h4> Now that we have our top-level application component, let's write the ProductsList component, </div> <input id="3" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="3">title 3</label> <div class="tab-content"> <h4>Heading 3</h4> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, </div> </div> 

Answer 1

Try using float and negative margin to position the tabs different from the content

 .tab { background: #eee; cursor: pointer; padding: 10px 15px 10px 20px; float: left; } .tab-radio:checked + .tab { background: #000000; color: #ffffff; } .tab-radio { display: none; } .tab-content { display: none; width: 100%; float: right; margin : 2.5em 0 0 -100%; } .tab-radio:checked + label + .tab-content { display: block; } 

 <div class="accordion"> <!-- "For" should point to the input so that we can check the radio using the label. --> <input id="1" class="tab-radio" name="tab-choice" type="radio" /> <label class="tab" for="1">title 1</label> <div class="tab-content"> <h4>Heading 1</h4> Notice that we've renamed the variable product to products, and we've changed the type to Product[]. </div> <input id="2" class="tab-radio" name="tab-choice" type="radio" /> <label class="tab" for="2"> title 2 which is really long</label> <div class="tab-content"> <h4>Heading 2</h4> Now that we have our top-level application component, let's write the ProductsList component, </div> <input id="3" class="tab-radio" name="tab-choice" type="radio" /> <label class="tab" for="3">title 3</label> <div class="tab-content"> <h4>Heading 3</h4> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, </div> </div> 

Answer 2

You're using accordion and it's not for 'tabs' like bootstrap tabs.

 .tab { background: #eee; cursor: pointer; padding: 10px 15px 10px 20px; display: inline-block; } .tab-radio:checked + .tab { background: #000000; color: #ffffff; } .tab-radio { display: none; } .tab-content { display: none; width: 100%; } .tab-radio:checked + label + .tab-content { display: block; } 

 <div class="accordion"> <!-- "For" should point to the input so that we can check the radio using the label. --> <input id="1" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="1">title 1</label> <div class="tab-content"> <h4>Heading 1</h4> Notice that we've renamed the variable product to products, and we've changed the type to Product[]. </div> <Br> <input id="2" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="2"> title 2 which is really long</label> <div class="tab-content"> <h4>Heading 2</h4> Now that we have our top-level application component, let's write the ProductsList component, </div> <br> <input id="3" class="tab-radio" name="tab-choice" type="radio"/> <label class="tab" for="3">title 3</label> <div class="tab-content"> <h4>Heading 3</h4> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, </div> </div> 

Answer 3

I know you're probably looking for a CSS only solution but I thought I'd throw in a JS example demonstrating how easy it can be to implement. Plus there's the added bonus of not having to have more restrictive markup relationships.

I'm using data- attributes to map a tab to it's content and visa versa. The tab and content are joined by assigning the same value in the data-content and data-tab attributes.

 var $tabs = $( '.tabs li' ), $content = $( '.tab-content' ); $tabs.on( 'click', function ( e ) { var $this = $( this ); $tabs.removeClass( 'active' ); $content.removeClass( 'active' ); $this.addClass( 'active' ); $( '[data-tab="' + $this.data( 'content' ) + '"]' ).addClass( 'active' ); } ); 

 .tabs, .tabs li { margin: 0; padding: 0; } .tabs li { display: inline; padding: 10px 15px 10px 20px; background-color: #EEE; cursor: pointer; } .tabs li.active { color: white; background-color: black; } .tab-content { display: none; } .tab-content.active { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="accordion"> <ul class="tabs"> <li data-content="1">Title 1</li> <li data-content="2">Title 2 which is really long</li> <li data-content="3">Title 3</li> </ul> <div class="tab-content" data-tab="1"> <h4>Heading 1</h4> <p> Notice that we've renamed the variable product to products, and we've changed the type to Product[]. </p> </div> <div class="tab-content" data-tab="2"> <h4>Heading 2</h4> <p> Now that we have our top-level application component, let's write the ProductsList component, </p> </div> <div class="tab-content" data-tab="3"> <h4>Heading 3</h4> <p> Why is that wrong? Well, because in the case where your browser loads that template before Angular has run, </p> </div> </div>