css変更

見た目は全く変わってませんがヘッダ部分のcssを変更しました。これまでfloat属性で回り込ませながら配置してたのを、position:absolute で絶対配置する方法に変更してます。

個人的にはfloatで悩みながら組み上げていくのが好みです（←自虐的）。それとpositionってHPB（ホームページビルダー）の『どこでも配置モード』のイメージが強くて…。や、HPBの『どこでも配置モード』が実際にpositionで配置するのかどうかは知りませんが。

でもfloatで配置するとNetscape 6でヘッダ部分が丸ごと消えてしまうのです。また、ウインドウ幅をせまくしてったときの崩れ方が美しくない。なのでposition:absolute に宗旨変えしたというわけです。

ただしNetscape 6でヘッダが表示されるようになったものの右下のタブの表示が崩れます。ここはどうしたモンかなー？HackでウマイことNetscape 6だけ除外できればよいのですが…。

一応以前のcss（ヘッダ部分のみ）を貼り付けておきます。

.head-wrapper1 {
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_head.gif") repeat-x left top #06c ;
text-align: left ;
margin: 20px 0 ;
}

.head-wrapper2 {
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_btm_rit.gif") no-repeat right bottom transparent ;
}

#head {
width: 100% ;
overflow: hidden ;
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_btm_lft.gif") no-repeat left bottom transparent ;
vertical-align: top ;
}

#head .logo {
float: left ;
width: 49% ;
}

.head-nav {
float: right ;
width: 49% ;
}

.head-nav form {
color: #fff ;
text-align: right ;
margin: 0 ;
padding: 10px 10px 0 0 ;
font-weight: bold ;
font-size: 60% ;
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_top_rit.gif") no-repeat right top transparent ;
}

.head-nav input {
border-width: 1px ;
border-color: #666 ;
}

.head-nav .input-button {
background-color: #06c ;
color: #fff ;
}

.head-nav textarea {
border: 1px solid #666 ;
}

.head-nav ul {
list-style: none ;
font-size: 80% ;
width: auto ;
margin: 0 ;
padding: 10px 10px 0 0 ;
}

.head-nav li {
display: inline;
width: auto ;
float: right;
margin-right: 1px ;
padding: 0 0 0 6px ;
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_head_li1.gif") no-repeat left top #53A9FF ;
}

.head-nav ul a {
display: block ;
width: auto ;
float: left ;
font-weight: bold ;
color: #fff ;
padding: 2px 6px 2px 0 ;
background: url("http://saito-kazuo.pupu.jp/hatena/images/bg_head_li2.gif") no-repeat right top transparent ;
}

.head-nav li a:link    { color: #fff ; }
.head-nav li a:visited { color: #fff ; }
.head-nav li a:hover   { color: #ff9 ; text-decoration: none ; }
.head-nav li a:active  { color: #ff9 ; }

同じく以前のhtml（ヘッダ部分のみ）も。

 <div class="head-wrapper1">
  <div class="head-wrapper2">
   <div id="head">

    <div class="logo"><a href="/saito-kazuo/"><img alt="風待ち日記" height="48" src="http://saito-kazuo.pupu.jp/hatena/images/title_h1.gif" width="319"></a></div>

    <div class="head-nav">
     <form method="get" action="/saito-kazuo/searchdiary">
風待ち検索: <input value="" type="text" name="word">
      <input class="input-button" value="検索" type="submit" name=".submit"><br>
      <input value="detail" type="radio" checked="checked" name="type">詳細
      <input value="list" type="radio" name="type">一覧
     </form>

     <ul>
      <li><a href="Antenna">http://a.hatena.ne.jp/saito-kazuo/">Antenna
      <li><a href="/saito-kazuo/archive/">Archive</a></li>
      <li><a href="/saito-kazuo/about/">Profile</a></li>
      <li><a href="/saito-kazuo/">Home</a></li>
     </ul>
    </div>

   </div>
  </div>
 </div>