ヘッダーのみ固定について

質問

ヘッダーのみ固定させたいのですが、IE6だけコンテンツ部分とナビ部分が開いてしまいます。
開かなくする為にはどうすればいいでしょうか？

CSS
* html body {
overflow: hidden;
}
body{
　　margin: 0px;
　　padding: 0px;
}

.clear {
overflow: hidden;
display: block !important;
display: inline-block;
}

#wrapper {
width: 900px;
margin: 0 auto;
}

#header {
width: 900px;
height: 100px;
position: fixed !important;
position: absolute;
}

* html div#header{
position: absolute;
top: expression(eval(document.documentElement.scrollTop+0));
}

#content {
width: 900px;
padding-bottom: 25px;
background: #fff;
padding-top: 135px;
overflow: auto;
}

#global_navi {
display: block !important;
display: inline-block;
overflow: hidden;
position: fixed !important;
padding-top: 100px;
}

HTML
<div id="wrapper">
<div id="header">
<h1>○○○○</h1>
<div class="header_logo"><a href="index.html"><img src="img/header_logo.gif" alt="" width="400" height="60" /></a></div>
</div>
<ul id="global_navi">
<li class="gn01"><a href="index.html">○○○○</a></li>
<li class="gn02"><a href="#">○○○○</a></li>
<li class="gn02"><a href="#">○○○○</a></li>
<li class="gn02"><a href="#">○○○○</a></li>
<li class="gn02"><a href="#">○○○○</a></li>
<li class="gn02"><a href="#">○○○○</a></li>
</ul>
<div id="content" class="clear">
<div class="index_left">
</div>
<div class="index_right">
</div>
</div>
<div id="footer" class="clear">
</div>
</div>

回答No.3

hinananana · ベストアンサー

＞ヘッダーのみ固定させたいのですが

固定というのは・・・heightで固定ということでしょうか・・・
もしかするとちゃんとしたＣＳＳがあるのかもしれませんが
サンプルのを表示するとおそろしく崩れています・・・

まず、headerのheight:100px;でh1と画像が入りきっていません。
なので、height:100px;で表示したいのならば

h1{
margin:0;
padding:0;
}

とすると、h1のmarginの部分がなくなり、スッキリします。

＞IE6だけコンテンツ部分とナビ部分が開いてしまいます。

ＩＥ6は厄介なんですよね・・・。
えーと、global_naviとcontentの間が開くってことでしょうか？(理解力ないんですいません・・・
もしそうでしたら、スタイルシートで

ul{
margin:0;
padding:0;
}

としたら、とりあえず隙間はなくなるはずです・・・。
そのかわり・の位置がおかしくなります。

・の位置を直すには

ul{
margin:0px;
padding:0 0 0 20px;
}

みたいな感じでpadding-leftをいじってください。

これが質問どおりの答えかわかりませんが・・・参考にどうぞ

ちなみに、おまじないと呼ばれている

*{
margin:0;
padding:0;
}

を作ると
h1{
margin:0;
padding:0;
}
や
ul{
margin:0;
padding:0;
}
を書かなくても大丈夫になります。

あと・・・お節介かもしれませんが

まず
headerの
position: fixed !important;
position: absolute;
はいらないと思います。

上2があるお陰でheaderとcontentが重なっています。
特に何もないのでしたら消すことをお勧めします。

消すことでcontentとglobal_naviのpadding-topを指定しなくて済みます。

次に
wrapperにwidth:900px;が指定されているので
headerとcontentのwidth:900px;は必要ありません。

これで形は大丈夫だと思います。

回答No.2

ORUKA1951

ＩＥ各バージョン、firefox3.6,Opera,safariで見たら図のようにばらばらです。
どうされたいのかわからないです。
HTML,CSSとも修正する必要がありますので、どのように配置したいかの図でも教えていただければ・・
　ずっとシンプルにかけるはずです。

補足

画像が添付できればいいのですが、補足だとダメみたいなので・・・
配置ですが、１カラムで、ヘッダー（固定）・メインメニュー（固定）・コンテンツ・フッターの順番です。
TOPページのみメインメニューの中が2カラムに分かれます。
IE各バージョン、firefox3.6,Opera,safariで見たのですが
私の方ではIE6のみおかしくなってました。

回答No.1

abacabu

独学でＷＥＢサイトを作成しているものです。
おそらくdisplay:inline-block;の持つ不具合の為ではないでしょうか？
私は使った事もなかったので余りこれに関して知識がないですが、
参考サイトがあったので貼っておきます。
そのサイトではinline-blockを使うと、改行（空白スペース）が発生するので
それを避けるためにはulから全て１行で書くか、
改行したい位置にコメントを挟むなどの対応策、
その他諸々書いてありました。
私の知識ではないので、詳しくは参考サイト様でどうぞ。

参考URL：

http://journal.mycom.co.jp/news/2010/03/01/005/index.html