IE6にてずれる
こんにちは
html超初心者です。
headとcontentsを隙間なく表示したいのですが、IEではコンテンツがずれてしまい
うまく表示されません。
コードを記載します。
==================================
--------html------------
<div id="all">
<div id="head">
<h1><a href="../index.html"><img src="img/logo.gif"></a></h1>
<div id="guide">
<a href="../index.html">ホーム</a>
<a href="index.html">プロフィール</a>
<a href="#">リンク</a></div>
<p class="clear-both"> </p>
</div>
<div id="contents">
コンテンツ内容
</div>
</div>
--------css------------
body,a,div,p,h1,h2,h3,ul,li,img,dl,dd,dt,ol{
margin:0;
padding:0;
text-decoration: none;
}
#all{
width:650px;
}
.clear-both{
font-size:0;
height:0px;
clear:both;
line-height:0%;
}
#head{
width:650px;
background:url('../img/main_img.gif') no-repeat;
height:90px;
}
#guide{
float:right;
margin:60px 0px 0px 0px;
}
#contents{
background:url('../../common/img/back_img.gif') repeat-y ;
}
==================================
headにてボックスを二つ挿入し、それらをそれぞれfloat：left・rightで左右に表示しています。
その下に<p class="clear-both"> </p>
を挿入し、cssにてそのクラスに対し、
clear:both; line-height:0%;
等を入力しています。
IEにて確認すると、その下のコンテンツが
右にずれてしまっています。
line-height:0%;がcssに記載されていなければ
ずれずに表示されますが、headとcontentsの間に
隙間ができてしまいます。
line-height:0%を記載していてもfirefox・operaではcontentsはずれず、隙間もありません。
どなたか教えてください。
よろしくお願いします。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
お礼
あ、たしかにそうですね。。。 画像が消えたというか、リンク部分が消えてしまったというか。 ためしにボーダーでこのPタグを括ってみたりすると、括った部分だけリンクが利いてたんですよ。