marqueeタグとFireFoxのバグ

引き続き【ドライバーの仕事！ライダーの仕事！】のリニューアル制作中なのですが、本日も検索結果画面。検索条件を画像付きで視覚的に表現してみることにしました。

あんまりこういうサイト見ないですよね？
ただ、検索条件が画像の様に、「三重県」とかなら良いのですが、「大型貨物運送ドライバー」なんて長いものになると、表示しきれない。フリーワードや駅名での検索もあるし、全て画像にするのは不可能なので、この限られたスペースにテキストをどう入れるか悩んでいました。

そんなとき、ふと思いつきました。流れるテキストを。流れるテキストって昔かなり流行りましたよね。私も10年前くらいに流した記憶があります（笑）なんだっけなぁ、流すタグは・・・とググって見ると、ありましたありました、そうそう、<marquee>だ！
私的にはかなり、懐かしいタグです。今回初めて知ったのですが、この<marquee>タグはIE（Internet Explore）独自のタグで、本当はこんなタグないそうです。Netscape Navigatorではまーったく動かないとか。よって、Javascriptで同じ事を実現すれば良いとの事。

でもまぁ、動いた時のイメージが見てみたかったので、とりあえず<marquee>で作ってみました。なかなかいい感じです。

ん？safariで動いてるぞ？FireFoxでも。。。ということで<marquee>でいく事に（笑）実際【ドライバーの仕事！ライダーの仕事！】のアクセス解析を見るとわずかながらNetscape Navigatorでのアクセスもありますが、流石に10年近く前のブラウザに対応させていては、事が前に進みません。是非最新ブラウザをお使いください。

にしても、世のWEB制作者の多くが、時に殺意を覚える程、IEのバグやら独自仕様に悩ませられている訳ですが、IEの独自仕様が一般化されるパターンもあるんですね。珍しい。

というわけで、10年ぶりくらいに<marquee>タグを使った訳ですが、Firefox(2.0)での表示がおかしい。流れる文字がとんでもない位置から始まって、とんでもない位置で消えていく。色々いじってみると、親要素（色んな所？）のpaddingが影響してしまっている模様。以下を試してみたら解決しましたので、参考までに。

marquee{ display:block; position:relative;}

Firefoxでmarqueeが上手く流れないバグが出た時は、
cssでmarqueeのpositionをrelativeに。

以上。リニューアルお楽しみに！

あんまりこういうサイト見ないですよね？
ただ、検索条件が画像の様に、「三重県」とかなら良いのですが、「大型貨物運送ドライバー」なんて長いものになると、表示しきれない。フリーワードや駅名での検索もあるし、全て画像にするのは不可能なので、この限られたスペースにテキストをどう入れるか悩んでいました。

そんなとき、ふと思いつきました。流れるテキストを。流れるテキストって昔かなり流行りましたよね。私も10年前くらいに流した記憶があります（笑）なんだっけなぁ、流すタグは・・・とググって見ると、ありましたありました、そうそう、<marquee>> だ！
私的にはかなり、懐かしいタグです。今回初めて知ったのですが、この<marquee >タグはIE（Internet Explore）独自のタグで、本当はこんなタグないそうです。Netscape Navigatorではまーったく動かないとか。よって、Javascriptで同じ事を実現すれば良いとの事。

でもまぁ、動いた時のイメージが見てみたかったので、とりあえず<marquee > で作ってみました。なかなかいい感じです。

ん？safariで動いてるぞ？FireFoxでも。。。ということで<marquee >でいく事に（笑）実際【ドライバーの仕事！ライダーの仕事！】のアクセス解析を見るとわずかながらNetscape Navigatorでのアクセスもありますが、流石に10年近く前のブラウザに対応させていては、事が前に進みません。是非最新ブラウザをお使いください。

にしても、世のWEB制作者の多くが、時に殺意を覚える程、IEのバグやら独自仕様に悩ませられている訳ですが、IEの独自仕様が一般化されるパターンもあるんですね。珍しい。

というわけで、10年ぶりくらいに<marquee >タグを使った訳ですが、Firefox(2.0)での表示がおかしい。流れる文字がとんでもない位置から始まって、とんでもない位置で消えていく。色々いじってみると、親要素（色んな所？）のpaddingが影響してしまっている模様。以下を試してみたら解決しましたので、参考までに。

marquee{ display:block; position:relative;}

Firefoxでmarqueeが上手く流れないバグが出た時は、
cssでmarqueeのpositionをrelativeに。

以上。リニューアルお楽しみに！