ヤマレコBLOG

Yahoo Mapのポップアップ(popup)の表示崩れ

Yahoo!地図情報のAPI（Yahoo Maps API）での開発メモを引き続き。

先日の日記をもとにヤマレコのサイト内でAPIを使って、addIconメソッドでアイコンを設置してみたのですが
↓こんな感じで表示が崩れてしまいました。

崩れたページを表示

このブログで正しく表示できたコードをそのままヤマレコに持ってきただけで表示が崩れたので、xoopsのせいなのか何なのかさっぱり原因がわからなかったのですが、半日ぐらい悩んで分かりました。

原因がわかると当たり前なんですが、ヤマレコのサイトで
・tableタグのCSSを定義していたこと
でした。

Yahoo MapのaddIconメソッドで表示されるアイコンのpopupはtableで書かれているとのことで、cssでtableのwidthを100%にしたり、padding-leftやpadding-rightに値を指定するとポップアップの左右の画像が重なって表示されてしまいます。

上記の表示崩れページは正しく表示されるページに以下のコードを追加しただけです。

---ここから---
<style type="text/css">
<!--
table {width:100%;}
table td {padding-right:2px;padding-left:2px;}
-->
</style>
---ここまで---

原因は判明したのですが、ヤマレコはサイト全体で1つのCSSを使っているので
■CSSのtable {width:100%;}を書くと、Yahoo地図のポップアップが崩れる。
■CSSのtable {width:100%;}を削除すると、もともとのサイトの表示が崩れる。
というジレンマに陥ってしまいました。

仕方がないので、地図ページ専用にtableタグを定義していないCSSファイルを作成しました。
本来はtable全体にスタイル定義するのではなくて、クラスなりIDなりを定義して、そこにスタイル定義するべきなんでしょうね。