プルダウンメニューを全体的にセンタリングさせる方法
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って怖いねぇ。
アドセンス広告メイン
関連記事
-
-
GREE（グリー）を退会する方法【スマートフォン編】#1
1年以上前の記事です。内容が古い可能性があります。#1 | #2 | #3 せっ …
-
-
通勤、通学カバンで水筒が水漏れ。タブレット、ノートパソコン等、電子機器はすぐさま引き上げよう
1年以上前の記事です。内容が古い可能性があります。水濡れタブレット復活日記、二回 …
-
-
OpenOffice「Calc」印刷前はページレイアウトをチェック
1年以上前の記事です。内容が古い可能性があります。最近では「GoogleDocs …
-
-
カーナビの地図更新サービスの無料期間が終わりそうなので地図データをアップデートしてみた（ID取得編）
1年以上前の記事です。内容が古い可能性があります。1. ID取得編 | …
-
-
金持ちになる考え方をしても何もしなければ金持ちにはなれない
1年以上前の記事です。内容が古い可能性があります。「金持ちになる考え方、貧乏にな …
-
-
ブログの記事にブコメ一覧を表示させるようにした
1年以上前の記事です。内容が古い可能性があります。ブコメってのはブックマークコメ …
-
-
PHPでパーミッション（実行権）の設定が必要ない理由
1年以上前の記事です。内容が古い可能性があります。Webテクノロジーも日々進化し …
-
-
Tumblr（タンブラー）を勉強してみた （11/11追記）
1年以上前の記事です。内容が古い可能性があります。謎多きTumblr（タンブラー …
-
-
ENEOSカードが使えなくなったのでポイントで断然お得な楽天カードに変えようと思う
1年以上前の記事です。内容が古い可能性があります。三菱東京UFJ銀行のマイカード …
-
-
Illustrator（イラストレーター）でマウス操作にSHIFT（シフト）キーやALT（オルト）キーを組み合わせる場合は「マウスクリック」→「キーをプレス」の順番
1年以上前の記事です。内容が古い可能性があります。Illustrator（イラス …
