新・元地方の中規模印刷会社で苦悩するWebデザイナー改めWebディレクターの日記

自由な20代、窮屈な30代を経て、遂に40代になっちまったWebディレクター&パソコン講師の覚書と思う言(こと)。略称【ちほちゅう】

*

プルダウンメニューを全体的にセンタリングさせる方法

   

  • このエントリーをはてなブックマークに追加

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って怖いねぇ。

 - デザイン, 覚え書き

アドセンス広告メイン

Message

メールアドレスが公開されることはありません。

  関連記事

no image
エレベーターで間違って押してしまった階をキャンセル(取消)するのは2度押し

1年以上前の記事です。内容が古い可能性があります。エレベーターで下りる階とは違う …

Illustrator(イラストレータ)のピクセルにスナップ(ピクセルグリッドに整合)を解除する方法 【DTP】

1年以上前の記事です。内容が古い可能性があります。以前、Illustrator( …

no image
子供向け最強集客ツール

1年以上前の記事です。内容が古い可能性があります。連休中に子供とちょっとお出かけ …

no image
Outlook Expressの署名を他のマシンにインポート(移行)する方法

1年以上前の記事です。内容が古い可能性があります。Outlook Express …

ファンページにブログの更新情報を流す方法【Facebookページの作り方02】

1年以上前の記事です。内容が古い可能性があります。さて、ファンページができたらこ …

Facebookメッセージの裏技、自分のプロフ写真や「F」マーク等

1年以上前の記事です。内容が古い可能性があります。何でこの機能、メッセージ限定な …

no image
P905iで緊急地震速報を受信する設定

1年以上前の記事です。内容が古い可能性があります。先日の17時頃、社内で業務終了 …

no image
「ナビゲーションサマリー」と「ページ遷移」の違い(Google Analytics)

1年以上前の記事です。内容が古い可能性があります。Google Analytic …

ブログで紹介された商品は売れる!いいものはどんどん紹介していこう

1年以上前の記事です。内容が古い可能性があります。完全な職業ブロガーというわけで …

iPhoneで移動中にカメラのシャッターを切ると画像が歪む

1年以上前の記事です。内容が古い可能性があります。これは自分の「iPhone 3 …

血液型オヤジ