ヘッダー内のコーディングを以下のように致しました。<div id="infomation">はデフォルトのままです。<div id="header"> 内にはロゴにa herfをリンクさせ、クリックするトップページにリンクするように致しました。

<div id="header">

<a href="http://tsukaeru/xxxxx/"><img src="<!--{$TPL_DIR}-->img/header/temp.jpg"></a>

<div id="infomation">

<ul>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->mypage/login.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/mypage_on.jpg','mypage');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/mypage.jpg','mypage');">
<img src="<!--{$TPL_DIR}-->img/header/mypage.jpg" width="95" height="20" alt="MYページ" name="mypage" id="mypage" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/member_on.jpg','member');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/member.jpg','member');">
<img src="<!--{$TPL_DIR}-->img/header/member.jpg" width="95" height="20" alt="会員登録" name="member" id="member" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->cart/index.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/cartin_on.jpg','cartin');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/cartin.jpg','cartin');">
<img src="<!--{$TPL_DIR}-->img/header/cartin.jpg" width="95" height="20" alt="カゴの中を見る" name="cartin" id="cartin" />
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>

また以下の様main.css内の記述でヘッダーのバックグランドにイメージファイルを置き、右側３つのボタンのバックグラウンドになるように致しました。（ヘッダー左側はロゴのイメージtemp.jpgがバックグラウンドになるように設定）

main.css内記述

div#header {
background: url("../img/header/topbar.jpg");
width: 1005px;
height: 89px;
margin: 0 auto;
float: left;
padding : 0px;
}

ここで問題が発生いたします。IE8,safari,chrome,opera,firefox3.6.3では問題ないところが、IE5.6,およびfirefox3.0.4では右側3つのボタンが下に落ちます。丁度topbar.jpgの縦の長さだけ下に落ちますので、何かと何かがバッティングしているかのようです。

コーディング次第で修正可能であると考えられますが、かなりの時間を費やしておりますが、どうにもならず途方にくれております。どなたか問題点をご指摘いただくことは可能でしょうか。

<div id="header">
〜
</div>

の最後の
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
ですけど、
</a>
</li>
</ul>
</div>
</div>
では？

cssの情報が足りないので、これくらいしか言えませんが。
もし差し障りなければURL貼って頂ければ…。

サイトを見た方が早く解決しそうな気がします。

kaoring777様、

大変複雑な質問にもかかわらずお時間を頂きましてありがとうございます。申し訳ございませんと言うか・・

ご指摘頂きましたとおり、</li></ul>の二つは余分でしたので、とりのぞきましたが、改善されない模様でございます。

css内でのヘッダー関連の記述は以下になります。

/* ヘッダーロゴ
------------------------------------------------ */
div#header {
background: url("../img/header/topbar.jpg");
width: 1005px;
height: 89px;
margin: 0 auto;
float: left;
padding : 0px;
}

div#header em {
display: none;
}

}
div#header ul li {
display: inline;
}
div#header ul li a {
text-decoration: none;
}

div#header a {
text-decoration: none;
}


/* ヘッダーナビ
----------------------------------------------- */
div#infomation {

float: right;
padding: 60px 8px 0 0;
}
div#infomation ul li {
display: inline;
}
div#infomation ul li a {
text-decoration: none;
}

多分、以下のクリック用のロゴのtemp.jpgと

<div id="header">

<a href="http://tsukaeru/xxxx"><img src="<!--{$TPL_DIR}-->img/header/mmtemp.jpg"></a>

css内記述の右側にある３つのボタンのバックグラウンド用のために作成したtopbar.jpgがIE5,6、およびfirefox3.0.4ではバッティングして３つのボタンがヘッダーの縦の長さの分だけ下に落ちるのかなあと思います。

div#header {
background: url("../img/header/topbar.jpg");

この辺の組み合わせを色々と試しておりますが、どうにもならないようです。

この辺の設定で何かピンとくるものがございましたら何でもよろしいのでご教授頂ければ大変有難く存じます。

URLは現在はまだネット上にだせるものではないのでごめんなさい。

このデザイン設計では崩れるしかありません。。。

headerの1005px（大きい背景画像付き）の中に
左側header ul
右側infomation
を表示させたいということでしょうか？


infomationのwidth指定。padding:60あたりが変わってくると思います。
headerのfloat:left;を削除して、header ulが入るdiv ●(mmtemp.jpgはこのdiv内に納めてwidth heightを指定します)をcssで指定しfloat:left;の設定。
div ●とdiv infomationのwidthを足す（marginとpaddingに注意）とheaderのwidthになるようにしてみるとどうですか？

ちなみに、mmtemp.jpgとtopbar.jpgの縦横サイズはいくつですか？

kaoring777 様、

大変恐縮です。そして感謝いたします。

最初に、前回の設定ではIE8,firefox3.5.4,safari,chrome,operaでは正常に表示、そして機能しているところが、IE6,firefox3.0.4では右側の３つのボタンとそのバックグラウンドが、mmtemp.jpgの縦の長さの89pxだけ下に落ちるという現象が発生しておりました。

そこで、ご指摘されました様にdiv#mmtempを作成し試しましたが、
mmtemp.jpgにリンクさせるa hrefをどこで設定してよいかわからずに、以下の様な設定に行き着きました。この設定では前回同様の現象が発生しておりますが、前回よりすっきり致しましたので、これを基準に修正を図りたいとぞんじます。ご覧になりどこが悪いかお分かりになりますでしょうか。

/* ヘッダー
------------------------------------------------ */
div#header {
width: 990px;
height: 89px;
margin: 0 auto;
padding : 0px;
}

div#infomation {
background: url("../img/header/topbarr.jpg");
float: right;
padding: 65px 41px 0 0;
}

デザイン管理のヘッダー編集

<div id="header">

<a href="http://tsukaeru/ｚxxxx/"><img src="<!--{$TPL_DIR}-->img/header/mmtemp.jpg"></a>

<div id="infomation">

<ul>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->mypage/login.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/mypage_on.jpg','mypage');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/mypage.jpg','mypage');">
<img src="<!--{$TPL_DIR}-->img/header/mypage.jpg" width="95" height="20" alt="MYページ" name="mypage" id="mypage" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/member_on.jpg','member');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/member.jpg','member');">
<img src="<!--{$TPL_DIR}-->img/header/member.jpg" width="95" height="20" alt="会員登録" name="member" id="member" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->cart/index.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/cartin_on.jpg','cartin');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/cartin.jpg','cartin');">
<img src="<!--{$TPL_DIR}-->img/header/cartin.jpg" width="95" height="20" alt="カゴの中を見る" name="cartin" id="cartin" />
</a>
</li>
</ul>
</div>
</div>


mmtemp.jpg (width:654, height:89)左側のロゴ用イメージ
topbarr.jpg(width:336,height:89)右側の3つのボタン用のバックグラウンドイメージ

654+336=990

ご多忙の中恐縮ですが、アドバイスを頂ければ幸いです。

即席でHTML書いてみました
http://xxxxx/test/(今は見れません)

こんな感じで設置したいイメージで合っていますか？

右クリックしてソースをご覧ください
cssは下記から落として下さい。
http://xxxxx/test/css/main.css(今は見れません)

イメージと違ったらご指摘下さいませ。

kaoring777様、

全くこの通りです。

そしてmmtemp.jpgはクリックするとトップページにリンクするようになっております。

フロートさせるほうがスマートな気がしますので、position:relativeは特にいらないかもです。
これでいけると思いますが、どうでしょう？


/* ヘッダー
------------------------------------------------ */
div#header {
width: 990px;
height: 89px;
margin: 0 auto;
padding : 0px;
}

/*ロゴのdivを足して左にフロートさせる。widthは必要*/
div.logo {
float:left;
width:654px;
}

/*widthは必要*/
div#infomation {
background: url("../img/header/topbarr.jpg") no-repeat;
float: right;
padding: 65px 41px 0 0;
width:336px;
}

/*IE6対策*/
* html body div#infomation {
background: url("../img/header/topbarr.jpg") no-repeat;
float: right;
padding: 65px 41px 0 0;
width:336px;
}


div#header div#infomation ul li {
float: right;
margin:0;
padding:0;
width:95px;
}

div#header div#infomation ul li a {
text-decoration: none;
}

デザイン管理のヘッダー編集

<div id="header">

<div class="logo"><a href="http://tsukaeru/ｚxxxx/"><img src="<!--{$TPL_DIR}-->img/header/mmtemp.jpg" /></a></div><!--div logo end -->

<div id="infomation">
<ul>
<li><a href="<!--{$smarty.const.URL_DIR}-->mypage/login.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/mypage_on.jpg','mypage');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/mypage.jpg','mypage');"><img src="<!--{$TPL_DIR}-->img/header/mypage.jpg" width="95" height="20" alt="MYページ" name="mypage" id="mypage" /></a></li>
<li><a href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/member_on.jpg','member');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/member.jpg','member');"><img src="<!--{$TPL_DIR}-->img/header/member.jpg" width="95" height="20" alt="会員登録" name="member" id="member" /></a></li>
<li><a href="<!--{$smarty.const.URL_DIR}-->cart/index.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/cartin_on.jpg','cartin');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/cartin.jpg','cartin');"><img src="<!--{$TPL_DIR}-->img/header/cartin.jpg" width="95" height="20" alt="カゴの中を見る" name="cartin" id="cartin" /></a></li>
</ul>
</div>
</div>

この後のブロックで、
clear.both;
してフローと解除してくださいね。

tonton様、Kaoring777様、

ついにIE6,およびfirefox3.0.4でもほぼ正しく表示され、正しく機能しております。本当に感謝致します。とりあえず以下の設定が一番安定しております。

ほぼ正しく表示と申し上げましたのは、IE6でmmtemp.jpgとtopbarr.jpgの縦の長さが約2px程ずれて表示されております。他のブラウザーでは発生していない現象です。この事に関して何か対策はございますでしょうか。

またIE6ではpagetop,fotter,あるいはheaderのwidthを1010pxに設定しないと右コラムが下に落ちます。

paddingで調整しようとすると他に正しく表示されているブラウザーに悪影響をおよぼします。

width1010pxはちょっと大きすぎますので、何とか990pxにとどめたいのですが、何か対策はございますでしょうか。ご多忙の中大変恐縮ですが、アドバイス等を頂ければ幸いです。

<div id="header">
<div class="logo">
<a href="http://tsukaeru/xxxxx/"><img src="<!--{$TPL_DIR}-->img/header/mmtemp.jpg"></a>
</div>
<div id="infomation">

<ul>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->mypage/login.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/mypage_on.jpg','mypage');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/mypage.jpg','mypage');">
<img src="<!--{$TPL_DIR}-->img/header/mypage.jpg" width="95" height="20" alt="MYページ" name="mypage" id="mypage" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->entry/kiyaku.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/member_on.jpg','member');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/member.jpg','member');">
<img src="<!--{$TPL_DIR}-->img/header/member.jpg" width="95" height="20" alt="会員登録" name="member" id="member" />
</a>
</li>
<li>
<a href="<!--{$smarty.const.URL_DIR}-->cart/index.php"
onmouseover="chgImg('<!--{$TPL_DIR}-->img/header/cartin_on.jpg','cartin');"
onmouseout="chgImg('<!--{$TPL_DIR}-->img/header/cartin.jpg','cartin');">
<img src="<!--{$TPL_DIR}-->img/header/cartin.jpg" width="95" height="20" alt="カゴの中を見る" name="cartin" id="cartin" />
</a>
</li>
</ul>
</div>


</div>


/* ヘッダー
------------------------------------------------ */
div#header {
width: 990px;
height: 89px;
margin: 0 auto;
padding : 0px;
}

/* ヘッダーロゴ
------------------------------------------------ */
div.logo {
float:left;
width:654px;
}

/* ヘッダーナビ
----------------------------------------------- */
html body div#infomation {
background: url("../img/header/topbarr.jpg");
float: right;
padding: 65px 41px 0 0;
}

よかったですね。

IE6だけに設定を反映させるのであれば、
先にお伝えしたスターハックが有効では？

div#header {
width: 990px;
height: 89px;
margin: 0 auto;
padding : 0px;
}

* html body div#header {
width: 1010px;
height: 89px;
margin: 0 auto;
padding : 0px;
}


これでいけるのではないかと思います。

また、2pxのずれは、ソースの間に半角スペースが入っているなどの問題がないようでしたら、
<li>と<a>、<img　タグの間は、改行しないように1行で書く、（閉じタグも同様）で解消されるのではないかと思います。

それで治らない場合は、ヘッダーの2つのブロックにもそれぞれ明示的に高さを指定したほうがいいのではないかと思います。

参考まで。