プルダウンメニューを全体的にセンタリングさせる方法
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って怖いねぇ。
アドセンス広告メイン
関連記事
-
-
ビジネスマナー向上に「接客8大用語（あしかもおおいし）」を覚えておくといいかも
1年以上前の記事です。内容が古い可能性があります。職業訓練校の講師になってなんと …
-
-
「お正月」は七日（松の内）まで、「元旦」が「元日」の朝（午前中）は誤り
1年以上前の記事です。内容が古い可能性があります。なんかもう、正月も随分前のよう …
-
-
CSSだけで作る最も単純なプルダウンメニュー（ドロップダウンメニュー）【Webデザイン】
1年以上前の記事です。内容が古い可能性があります。今まではIE6の存在等もあって …
-
-
地震の予兆現象、光柱（発光現象）、彩雲（虹）、地震雲
1年以上前の記事です。内容が古い可能性があります。先日の北海道で震度5弱を記録し …
-
-
ドローンとラジコンの違いは半自動かどうか。ドローンはなにもしなくても浮いている
1年以上前の記事です。内容が古い可能性があります。いつの間にやら巷ではドローンと …
-
-
iPhone（アイフォーン）を紛失したらすべきこと
1年以上前の記事です。内容が古い可能性があります。去年の暮れ30日に映画を見に行 …
-
-
リストタグ（<UL>、<OL>）の左マージンはpadding-left。<DL>だけmargin-left【Webデザイン・CSS】
1年以上前の記事です。内容が古い可能性があります。Webデザインをする上でかねて …
-
-
元カノのセクシー画像は誰のもの？
1年以上前の記事です。内容が古い可能性があります。ラブラブのときはついつい心を許 …
-
-
Facebook（フェイスブック）で一度シェアした情報を書き換える方法
1年以上前の記事です。内容が古い可能性があります。先日、感動逸話をパクり、「いい …
-
-
パーソナルスペースを意識するとコミュニケーションスキルがアップする
1年以上前の記事です。内容が古い可能性があります。以前、ビジネスマナーの講師の方 …
