プルダウンメニューを全体的にセンタリングさせる方法
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って怖いねぇ。
アドセンス広告メイン
関連記事
-
-
Outlook Expressからフリガナのインポートはできない
1年以上前の記事です。内容が古い可能性があります。さて、Outlook Expr …
-
-
「開く」ダイアログボックスからデスクトップが消えた！復活させる（元に戻す）方法
1年以上前の記事です。内容が古い可能性があります。「開く」ダイアログボックスや「 …
-
-
内包されたDIVにmarginを設定すると親要素にも同じマージンが設定されることがある【CSS】
1年以上前の記事です。内容が古い可能性があります。これはわからんわ。 生徒さんの …
-
-
ファンページ「いいね！ボックス」の作り方【Facebookページの作り方03】
1年以上前の記事です。内容が古い可能性があります。以下の情報は古い情報です。こち …
-
-
現役ヤクザが解説する絶対見つからない死体の処理方法
1年以上前の記事です。内容が古い可能性があります。インターネットも良し悪しです。 …
-
-
「フライパン」を使うと5分でご飯が炊ける。と思ったら…
1年以上前の記事です。内容が古い可能性があります。うちの炊飯器にはタイマーがあり …
-
-
GIMP2（ギンプ2）はコピペでレイヤーが作れない
1年以上前の記事です。内容が古い可能性があります。お久しぶりに画像編集ソフトGI …
-
-
Remember The Milk（RTM）のタスクをTwitter（ツイッター）と連携する方法
1年以上前の記事です。内容が古い可能性があります。以前、Twitter（ツイッタ …
-
-
「自撮り」もし過ぎに注意しよう。「身体醜形障害」から「自殺」の可能性も
1年以上前の記事です。内容が古い可能性があります。何事もし過ぎは体にも精神的にも …
-
-
各種ECサイト（ショッピングサイト）料金比較一覧 （11/3追記）
1年以上前の記事です。内容が古い可能性があります。過去にやってるかなぁと思ってい …
