プルダウンメニューを全体的にセンタリングさせる方法
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って怖いねぇ。
アドセンス広告メイン
関連記事
-
-
ブログをhttps（SSL）化したらPVが落ちてしまった。その理由と対策（予測）
1年以上前の記事です。内容が古い可能性があります。おかしいなぁ。。 おかしいんで …
-
-
「Windows Liveメール」で署名を作成、使用する方法
1年以上前の記事です。内容が古い可能性があります。今まで何やってたの？ と思うよ …
-
-
Foursquare（4sq）とFacebook（フェイスブック）を連携させる方法
1年以上前の記事です。内容が古い可能性があります。Facebook（フェイスブッ …
-
-
ワードプレス（WordPress）でSEO。「All in One SEO Pack」 #wp
1年以上前の記事です。内容が古い可能性があります。先日、ワードプレス（Wordp …
-
-
Facebook（フェイスブック）に同期された連絡先（電話帳）情報を削除する方法
1年以上前の記事です。内容が古い可能性があります。なんかね。 おそらくiPhon …
-
-
就職したいなら「医学」、「薬学」、「機械工学」、「土木建築」、「農業経済」を勉強しよう
1年以上前の記事です。内容が古い可能性があります。やっぱり芸術系はダメですかぁ。 …
-
-
livedoor Blog（ライブドアブログ）のスマートフォン（スマホ）対応レイアウトで広告収入を得る方法
1年以上前の記事です。内容が古い可能性があります。時代はスマホですね。 当ブログ …
-
-
「ヨメレバ」が便利そうなので色々なアフィリエイトに手を出してみた（7net / ブックオフ編）
1年以上前の記事です。内容が古い可能性があります。7net（セブンネットショッピ …
-
-
Flickrのクリエイティブ・コモンズは何にすればいいのか? [前編]
1年以上前の記事です。内容が古い可能性があります。Flickr（フリッカー）とい …
-
-
新ホームページ作成手順
1年以上前の記事です。内容が古い可能性があります。過去にホームページ作成の流れを …
