レシポンシブのtab型メニューで困ってます
レシポンシブのtab型メニューが上手くできなくて困ってます。
希望は、表示する枠の高さは固定、表示するリストが多くなれば縦のスクロールバーが自動的に表示される、レシポンシブに対応です。jQueryが上手く動かなくなる可能性があるのでCSSのみで動くソースがネット上に掲載されていたものを自分流にアレンジしてみました。作成後Google Chromeのデヴェロッパーツールでレシポンシブを検証すると、縦のスクロールバーは一瞬表示されますがマウスを適当に動かすと消えて機能しません。ソースは以下です。
html
<div class="tab5">
<div class="tab-content">
<input id="tab5-1" type="radio" name="tab5" checked>
<label for="tab5-1">1</label>
<input id="tab5-2" type="radio" name="tab5">
<label for="tab5-2">2</label>
<input id="tab5-3" type="radio" name="tab5">
<label for="tab5-3">3</label>
<input id="tab5-4" type="radio" name="tab5">
<label for="tab5-4">4</label>
<div id="tab5-b1" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ1</p>
</div>
<div id="tab5-b2" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ2</p>
<p>コンテンツ2</p>
</div>
<div id="tab5-b3" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ3</p>
<p>コンテンツ3</p>
<p>コンテンツ3</p>
</div>
<div id="tab5-b4" style="width: 100%;height : 100px;overflow-x: hidden;">
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
<p>コンテンツ4</p>
</div>
<!--tab-content--></div>
<!--tab5--></div>
css
.tab5{
width: 100%;
min-width: 320px;
margin : 0px auto 20pt;
}
.tab5 .tab-content{
margin: 0 10px;
}
.tab5 label{
display: inline-block;
margin: 0;
padding: 0;
}
.tab5 label{
display: inline-block;
width: 78px;
padding: 3px 10px;
cursor: pointer;
background: #ddd;
color: #777;
margin-right: -2px;
}
.tab5 label:hover{
background: #eee;
}
.tab5 input:checked + label{
background: #9fb7d4;
color: white;
padding: 5px 10px 3px 10px;
}
.tab5 input{
display: none;
}
.tab5 #tab5-b1,
.tab5 #tab5-b2,
.tab5 #tab5-b3,
.tab5 #tab5-b4{
display: none;
padding: 10px;
}
.tab5 #tab5-1:checked ~ #tab5-b1,
.tab5 #tab5-2:checked ~ #tab5-b2,
.tab5 #tab5-3:checked ~ #tab5-b3,
.tab5 #tab5-4:checked ~ #tab5-b4{
display: block;
border: 1px solid #9fb7d4;
}
また、html中の style="width: 100%;height : 100px;overflow-x: hidden;"をcssに記述したいのですがどこに付加していいのかわかりません。
htmlを勉強し始めの初心者です。ソースをわかりやすく教えて頂くと助かります。
よろしくお願いいたします。
補足
ありがとうございます。いえ、Macでは在りません。現在はXPでIE６です。しかしもう一台あるPCはMeでIE5.5ですが、やはり見え方は一緒です。OSの違いは関係ないような気がします。 （http://www.rockmagic.net/guitar-tabs/queen/）の方はクリックすると、ダウンロードするか、ファイルを開くか聞いてきます。開くと「Crazy_Little_Thing_Called_Love[1].tabと言うファイルがテキスト形式で表示され（メモ帳によって）、仰るとおりの改行がまったくされていない、めちゃくちゃな表示になります。 一方の[http://www.tabalorium.com/gt/Queen.html]の方は、クリックすると次のページが表示され、通常のホームページのような表示になります。 URLは[http://www.tabalorium.com/tabs/9549.html]です。 なお、一度保存してから右クリックで「プログラムから開く」でIEを選択するときちんと見れました。そこで、「設定」の「フォルダオプション」で拡張子Tabの関連付けをIEに変えたところ、IEは立ち上がらず見る事は出来ませんでした。 いちいち一度保存して、「プログラムから開く」から開くは面倒です。 何とかダウンロードの表示の時点で保存せずに「開く」を選択してもIEで見れるようにならないものでしょうか？ 以前９８を使用していた頃、画像を開くとIEが立ち上がりましたが、MeやXPはそれぞれ「フォト・エディター」、「画像とFAXビューワ」（編集を開くとMeと同じくフォト・エディター）になっていました。これと似たような物なのでしょうか？ う～ん。。。。面倒くさい。。。。 ちなみに「改行コードの変換」とはどのソフトのどこにあるのですか？