Guys can not understand why in IE the text of this tab is above the buttons? How can I fix this? Help a beginner coder.

<html> <head> <script src='http://plc.com.ua/jquery.js' type='text/javascript'></script> <style> body { background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727)); background: -webkit-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); background: -ms-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); background: -o-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727); background:000; font-family:verdana, sans-serif;color:#333;font-size:10px; margin: 23px; padding: 123px; } a:active { outline:none; } :focus { -moz-outline-style:none; } div.panes div { display:none; padding:15px 10px; border:1px solid #999; border-top:0; height:486px; font-size:14px; background-color:rgba(255, 255, 255, 0.5) } /* root element for tabs */ ul.tabs { overflow: hidden; width: 100%; margin: 0; padding: 0; list-style: none; font-weight: bold; } /* single tab */ ul.tabs li { float: left; margin: 0 -15px 0 0; padding: 0; } /* link inside the tab. uses a background image */ ul.tabs a { float: left; position: relative; padding: 0 40px; height: 0; line-height: 30px; text-transform: uppercase; text-decoration: none; color: #000; border-right: 30px solid transparent; border-bottom: 30px solid #3D3D3D; border-bottom-color: #777\9; opacity: .3; filter: alpha(opacity=30); } .tabs a:active { outline:none; } /* when mouse enters the tab move the background image */ .tabs a:hover { border-bottom-color: #9a00ff; color:#fff; } .tabs a:hover, .tabs a:focus { border-bottom-color: #9a00ff; opacity: 1; filter: alpha(opacity=100); text-shadow: 0px 0px 20px white; } .tabs a:focus { outline: 0; } /* active tab uses a class name "current". it's highlight is also done by moving the background image. */ ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { background-position: -652px -62px; color:#fff; font-weight: bold; border-bottom-color: #9a00ff; text-shadow: 0px 0px 20px white; } /* Different widths for tabs: use a class name: w1, w2, w3 or w2 */ /* width 1 */ ul.tabs a.w1 { background-position: -519px 0; width:134px; } ul.tabs a.w1:hover { background-position: -519px -31px; } ul.tabs a.w1.current { background-position: -519px -62px; } /* width 2 */ ul.tabs a.w2 { background-position: -366px -0px; width:154px; } ul.tabs a.w2:hover { background-position: -366px -31px; } ul.tabs a.w2.current { background-position: -366px -62px; } /* width 3 */ ul.tabs a.w3 { background-position: -193px -0px; width:174px; } ul.tabs a.w3:hover { background-position: -193px -31px; } ul.tabs a.w3.current { background-position: -193px -62px; } /* width 4 */ ul.tabs a.w4 { background-position: -0px -0px; width:194px; } ul.tabs a.w4:hover { background-position: -0px -31px; } ul.tabs a.w4.current { background-position: -0px -62px; } /* initially all panes are hidden */ div.panes div.pane { display:none; } </style> </head> <body> <ul class="tabs"> <li><a href="#">Π‘Π•ΠœΠ˜ΠΠΠ Π«</a></li> <li><a href="#">ΠΠžΠ’Π˜ΠΠšΠ˜</a></li> <li><a href="#">Π²ΠΊΠ»Π°Π΄ΠΊΠ°</a></li> </ul> <!-- tab "panes" --> <div class="panes"> <div><h2>ΠŸΠ΅Ρ€Π²Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°.</h2> <p> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. </p> </div> <!-- 1 --> <div class="les"><h2>Вторая Π²ΠΊΠ»Π°Π΄ΠΊΠ°.</h2> <p> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Π²Ρ‚ΠΎΡ€ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. </p> </div> <!-- 2 --> <div class="les"><h2>Π’Ρ€Π΅Ρ‚ΡŒΡ Π²ΠΊΠ»Π°Π΄ΠΊΠ°.</h2> <p> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. </p> </div> <!-- 3 --> <div class="les"><h2>ЧСтвСртая Π²ΠΊΠ»Π°Π΄ΠΊΠ°.</h2> <p> <p> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Ρ‡Π΅Ρ‚Π²Π΅Ρ€Ρ‚ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. </p> </div> <div class="les"><h2>ΠŸΡΡ‚Π°Ρ Π²ΠΊΠ»Π°Π΄ΠΊΠ°.</h2> <p> Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ пятой Π²ΠΊΠ»Π°Π΄ΠΊΠΈ. </p> </div> </div> <script> $(function() { $("ul.tabs").tabs("div.panes > div"); }); </script> </body> </html>
  • @Online World, If you are given an exhaustive answer, mark it as correct (click on the check mark next to the selected answer). - Deleted

1 answer 1

Instead

 <html> <head>

I did

 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

to pass the validation .. I don’t see any problems in ie9

  • that's right the pancake is so primitive that it’s already a shame for the question, I didn’t know that the validator is responsible for this in IE - Vitaly Derevianko
  • Well .. I didn’t understand what "validator is responsible for this in IE", but the validator is the first means of checking for validity)) sorry for the tautology. and .. by the way .. WHERE ARE MY LIKES? ))) - ArcherGodson
  • and what is validity? what is the purpose of the validator in three words tell, google google google)) huskies? hold)) - Vitaly Derevyanko