IE6、7で途切れてしまう画像

質問

分からない部分が出た際にいつもお世話になっております。
今回もどなたかご回答頂けますと幸いです。

グローバルナビゲーションを中央揃えにして表示させようとしているのですが、
IE6と7で確認したときになぜか下部分が途切れてしまいます（1pxくらい？）
高さは指定している筈なのですが…

【html】

<div id="global-nav">
<ul>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="191" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト"　width="192" height="43" /></a></li>
<li><a href="test.html"><img src="images/navi/test.png" alt="テスト" width="193" height="43" /></a></li>
</ul>
</div>

【css】

div#global-nav {
position:relative;
height: 43px;
background:url(../common/navi_bg.jpg) repeat-x center bottom;
overflow:hidden;
}

div#global-nav ul {
position:relative;
left:50%;
float:left;
list-style-type:none;
}

div#global-nav li {
position:relative;
left:-50%;
float:left;
}

宜しくお願いします。

回答No.3

ORUKA1951

意味不明ですね、No1の内容(^^)自分で読んで笑ってしまった。

そのうえで、スタイルシートをデザインしますが、あなたのサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されませんし、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。

★そのうえで、スタイルシートでデザインします。
★あなたリサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されません。
★デザインを考えずに意味(文書構造)にしたがってHTMLを書けば、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。

　基本はデザインを考えてHTMLは書かない。

回答No.2

ORUKA1951

スタイルシートは下のようになるかな？
　IE5以降、Opera,Safari,Firefox,googleChromeすべて同じように見えるはず、もちろんi-phone,i-padも・・。携帯電話・検索エンジンだとシンプルなHTMLとして認識される。

　変な小細工もしていませんから、CSSも空(そら)出かけるレベルじゃないかと。

<style type="text/css" media="screen">
<!--
div#global-nav{
position:relative;
height: 43px;line-height:43px;
background:url(../common/navi_bg.jpg) repeat-x center bottom;
width:100%;
}
div#global-nav ul,
div#global-nav ul li,
div#global-nav ul li a{
display:block;
list-style:none;
margin:0;paddin:0;
}
div#global-nav ul{
width:90%;
padding-left:5%;
}
div#global-nav ul li{
width:18%;
float:left;
background-image:url(images/navi/test.png);
margin-left:1%;
}
div#global-nav ul li a{
width:100%;
height:100%;
text-decoration:none;
text-align:center;
overflow:hidden;
}
/* 文字を消す場合はコメントマークを取り除く */
/* div#global-nav ul li a span{
visibility:hidden;
}
*/
-->
</style>

回答No.1

ORUKA1951

そもそもどのように表示させたいかが不明です。ブラウザによってまるで違う表示になる。

適当な画像を用意してテストすると・・・

HTMLは、下記のようなWeb標準な物にします。文字を画像に置き換える方法は本来の方法ではありません。
テキストを画像に置き換えて表現する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )

＿<div id="global-nav">
＿＿<ul>
＿＿＿<li><a href="test1.html"><span>テスト1</span></a></li>
＿＿＿<li><a href="test2.html"><span>テスト2</span></a></li>
＿＿＿<li><a href="test3.html"><span>テスト3</span></a></li>
＿＿＿<li><a href="test4.html"><span>テスト4</span></a></li>
＿＿＿<li><a href="test5.html"><span>テスト5</span></a></li>
＿＿</ul>
＿</div>

そのうえで、スタイルシートをデザインしますが、あなたのサンプルでは、ディスプレイ幅が狭いと5つのうち4つしか表示されませんし、画像を読み込めないユーザーエージェントや読み上げソフト、点字端末、携帯電話、ディスプレイの狭い端末、もちろん検索エンジンも内容を理解できます。