MENU05A(修正版)について

最新のWindows版 Internet Explorer 6では、MENU05Aのレイアウトが崩れるという問題が発生しています。MENU05Aには文法的な問題がないため、Windowsアップデートやセキュリティパッチの影響で、Internet Explorerにバグが発生していると考えられます。

最新のWindows版 Internet Explorer 6でも問題が発生しないようにするためには、以下のように修正することができます。

最新のWindows版 Internet Explorer 6 で問題を起こしている箇所

問題を起こしているのは次の2箇所で、どちらかの設定を削除すると問題は発生しなくなります。

menu div {border-bottom:dotted 1px #73a1ff}

.menu div.group {margin-top:-1px}

修正箇所

MENU05A(修正版)では、「.menu div.group {margin-top:-1px}」の設定を削除することで、問題を回避しています。ただし、margin-topを削除することで、上の項目の罫線(サンプルの場合は「ニュース/お知らせ」の下の罫線)が表示された状態になります。そこで、「ニュース/お知らせ」の部分にクラス名を「out」と指定し、罫線を削除するスタイルを追加しています。

修正前

.menu div {
    padding-top:3px;
    padding-bottom:3px;
    border-bottom:dotted 1px #73a1ff
    }

.menu div.group {
    margin-top:-1px;
    border:none;
    background-color:darkblue;
    padding-left:3px;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:white;
    }

…略…

<div>
<img src="tri.gif">
<a href="page02.htm">ニュース/お知らせ</a>
</div>

<div class="group" lang="en">
Products
</div>

 

修正後

.menu div {
    padding-top:3px;
    padding-bottom:3px;
    border-bottom:dotted 1px #73a1ff
    }

.menu div.out {
border-bottom:none
}

.menu div.group {
    border:none;
    background-color:darkblue;
    padding-left:3px;
    font-family:Verdana, Helvetica, sans-serif;
    font-size:12px;
    font-weight:bold;
    color:white;
    }

…略…

<div class="out">
<img src="tri.gif">
<a href="page02.htm">ニュース/お知らせ</a>
</div>

<div class="group" lang="en">
Products
</div>