プルダウンメニューを全体的にセンタリングさせる方法
1年以上前の記事です。内容が古い可能性があります。
InternetExplorer7(以下IE7)での表示バグにてんやわんや。
そもそもIE6のバグを利用したレイアウトで、たまたまSafariでも表示されちゃったのでそのまま放って置いた部分なのですが、そうは問屋がおろしませんでした。
元スクリプトはFireWorks8で作ったプルダウンメニューで、
<DIV>で文字リンクを囲んでposition:absoluteで位置指定し、
visibilityをonmouseover、onmouseoutで切り替えるという仕組み。
ページ全体をセンタリング<table align=”center”>したときに、
IE6だとプルダウンメニューも相対的にセンタリングされるのに、
IE7だと付いてきてくれない。
ちなみにSafariではセンタリングすらされていなかった様子。
原因は、position:absoluteの対応差による表示バグ。
そもそも問題があるのはIE6のほうで、
IE7ではOpera同様（Operaでも念のため確認）左上からの絶対的位置に表示される。
これだとウインドウのサイズによってプルダウンメニューがずれてしまう。
そこでとった対策は、
1. 全leftプロパティを無効（コメントアウト）にする。
2. プルダウン表記の部分をひとまとめにDIVで囲む。
3. そのDIVに対してwidth指定をし、センタリングさせるために
margin-right:auto;margin-left:autoの指定をする。
4. 各プルダウンメニューに対してmargin-leftで位置指定をする。
これで解決しました。
なお、Safariでセンタリングしなかったのは<table align=”center”>に対応していないためと思われたので、
<body>以下全体を<DIV>で囲み、width指定及びmargin-right:auto;margin-left:autoでセンタリングさせました。
Safariに関しては最後の段階でセンタリングすらされていないのに気づいたので、
修正前にセンタリングさせればIE7やOperaと同じ結果になったでしょう。
InternetExplorer6って怖いねぇ。
アドセンス広告メイン
関連記事
-
-
「iPhone 7」でシャッター音を出さずに写真を撮る（消音撮影する）方法【AssistiveTouch】
1年以上前の記事です。内容が古い可能性があります。「iPhone 7」といえば、 …
-
-
Adsense（アドセンス）でフィルタリングをうまく活用しよう
1年以上前の記事です。内容が古い可能性があります。先日、「滞在時間が長いページの …
-
-
サイトをAutoPagerizeに対応させる方法
1年以上前の記事です。内容が古い可能性があります。先日タンブラーのために導入した …
-
-
LINE（ライン）でブロックされるとこうなる
1年以上前の記事です。内容が古い可能性があります。もうちょっと詳しい記事を書きま …
-
-
iPhoneで自分の携帯番号を確認する方法
1年以上前の記事です。内容が古い可能性があります。勢いで確認するシリーズを3つま …
-
-
iPhone用ツイッタークライアント「TwitBird」に関して注意すること （6/26追記）
1年以上前の記事です。内容が古い可能性があります。最終的にこれに決まりそうなiP …
-
-
サイトリニューアル時に注意したいSEO7つのポイント
1年以上前の記事です。内容が古い可能性があります。久しぶりにSEOの話題を復習も …
-
-
ウォッシャー液の濃度を薄めると冬場危険な目にあうよ
1年以上前の記事です。内容が古い可能性があります。今年の冬は寒いですよね。 震災 …
-
-
ルーターをブリッジとして使うときの注意点（6/17修正）
1年以上前の記事です。内容が古い可能性があります。会社に無線対応のルーターが導入 …
-
-
Web制作に役立つブログ
1年以上前の記事です。内容が古い可能性があります。Web制作に役立つブログを紹介 …
