質問

終了

サファリなどのブラウザでは正しく表示されるのですがIE８では本来各タブの下に表示されるコンテンツ文が、タブの横に表示されてしまい、レイアウトがズレてしまいます。
どのようにしたらよろしいでしょうか。何卒よろしくお願い致します。

-----ｈｔｍｌ----------------------------------

<!DOCUTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="robots" content="noindex,nofollow">
<title>フェイスブックページ作成</title>
<link rel="stylesheet" href="./css/fbmain.css">



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
<script type="text/javascript" src="./jquery.slideshow.js"></script>

<script type="text/javascript">

//スライドショー

$(function(){
$('#slideshow').slideshow({
timeout:5000,
fadetime:2000,
type: 'sequence'
});
});

//タブ表示
function showTab1(){
content1.style.display="block";
content2.style.visibility="hidden";
content3.style.display="none";
navitab1.style.color="#333";
navitab1.style.backgroundColor="#D8DFEA";
navitab2.style.color="#fff";
navitab2.style.backgroundColor="#657BA9";
navitab3.style.color="#fff";
navitab3.style.backgroundColor="#657BA9";
}

function showTab2(){
content1.style.display="none";
content2.style.display="visible";
content3.style.display="none";
navitab1.style.color="#fff";
navitab1.style.backgroundColor="#657BA9";
navitab2.style.color="#333";
navitab2.style.backgroundColor="#D8DFEA";
navitab3.style.color="#fff";
navitab3.style.backgroundColor="#657BA9";
}

function showTab3(){
content1.style.display="none";
content2.style.visibility="hidden";
content3.style.display="block";
navitab1.style.color="#fff";
navitab1.style.backgroundColor="#657BA9";
navitab2.style.color="#fff";
navitab2.style.backgroundColor="#657BA9";
navitab3.style.color="#333";
navitab3.style.backgroundColor="#D8DFEA";
}

</script>

<style type ="text/css">
/* スライドショー*/
#slideshow{
height : 330px;
width : 480px;
overflow : hidden;
}

/*全体*/
body{
font-family:'ヒラギノ角ゴ Pro W3' , 'Hiragino kaku Gothic Pro' , 'メイリオ',Meiryo,'MS Pゴシック',san-serif;
}

/* タブ内、初期設定*/
#content1{
display:block;
clear :both;
position:absolute;
}
#content2{
visibility:hidden;
clear:both;
text-align:center;
position:absolute;
}
#content3{
display:none;
clear :both;
position:absolute;
}

#content1,#content2,#content3{
padding:10px
font-size:8px;

}

p{
line-height:2;
margin-top:20px;
}

td{
border-bottom:1px solid #657BA9;
padding:10px;
font-size:12px;
}

/*タブ、初期設定*/
#navitab2,#navitab3{
float:left;
margin:0 5px 0 0;
padding:5px;
background-color: #657BA9;
color: #fff;
font-size: 14px;
}

#navitab1{
float:left;
margin: 0 5px 0 0;
padding:5px;
background-color:#D8DFEA;
clor:#333;
font-size:14px;
}

a{text-decoration:none;}
ul{margin:0;}

nav.navi01{
margin:20px 0 0 0;
border-bottom:1px solid #657BA9;
height:23px;
overflow:hidden;
}

/*タブ内コンテンツ*/
figure#img01,figure#img03{
float:right;
}
</style>

<script type="text/javascript" src="http://connect.facebook.net/ja_JP/all.js"></script>

<script language="JavaScript">
FB.init({
appID:'**********************',
status:true,
cookie:true,
xfbml:true
});
</script>

</head>

<body onload="">
<div id="fb-root"></div>

<div id="slideshow">
<img src="1.jpg" width="480" height="330" alt="">
<img src="2.jpg" width="480" height="330" alt="">
<img src="3.jpg" width="480" height="330" alt="">
</div>

<nav class="navi01">
<ul>
<a href="javascript:showTab1();"><li id="navitab1">タブ１</li></a>
<a href="javascript:showTab2();"><li id="navitab2">タブ２</li></a>
<a href="javascript:showTab3();"><li id="navitab3">タブ３</li></a>
</ul>
</nav>

<section id="content1">

<p>
コンテンツ文１
</p>
</section>

<section id="content2">
<p>
コンテンツ文２
</p>
</section>

<section id="content3">
<p>
コンテンツ文３
</p>

</section>

</body>
</html>

---CSS----------------------------

body{
margin:0;
padding:0;
}
article,aside,figure,footer,header,hgroup,nav,section,
h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,caption,th,td,img,address,form{
margin:0;
padding:0;
border:none; //ボーダーをなくす
font-style:normal; //フォントスタイルをノーマルに
font-weight:normal; //フォントの太さをノーマルに
font-size:100%; //フォントサイズのリセット
line-height:1; //行間のリセット
text-align:left; //テキストの左揃え
list-style-type:none; //リスト表示のマークを非表示に

img{
display:inline-block; //HTML5でキャプションが回り込む場合の対応
vertical-align:bottom; 画像の下にできる隙間を消す
}

/*ＨＴＭＬ５非対応ブラウザ向けに新要素をブロック要素にする*/
article,aside,figure,footer,header,hgroup,nav,section{
display:inline-block;

}
　}

-----------------------------------

以上です。
見づらいコードで大変申し訳ありませんが、よろしくお願い致します。

質問者：lisa
質問日時：2011-11-14 18:07:28
0

質問

関連する質問・相談

Sooda!からのお知らせ