注目タグ

テンプレート・プラグイン

トピック詳細

FireFoxでメニューの背景画像が切れます。

旧フォーラムの記事です http://blog.fc2.com/forum/viewtopic.php?f=3& t=9971
 2006-05-03 15:37:42
件名 :FireFoxでメニューの背景画像が切れます。

OS:WinXP
ブラウザ環境: IE6、Opera8.54、FireFox1.5.0.2
使用テンプレート名: 公式sampleをカスタマイズしたもの
ブログURL:http://tsrr.blog62.fc2.com/
一般

 公式テンプレートのsampleを変更してページをつくっていたのですが、IE6で表示されるメニューの背景画像がFir eFoxで表示すると切れます。Operaでは画像とテキスト位置の解釈の違いからかぐちゃぐちゃでした。

 せめてFireFoxで画像が切れなければいいといじっているうちにレイアウトも崩れてしまいました。

 下にCSSのレイアウト関係の部分を載せましたのでどなたかご教授ください。

div#container {
width : 760px;
position : relative;
background-color : transparent;

}



div#branding {
    position : relative;
    z-index : 100;
  height : 160px ;

   }
div#navigation{
position : absolute;

        
left : 20px;
        top : 110px ;
z-index : 100;
width : 100%;

}


div.column { margin : 15px 0;
/* タイトル部分と記事、記事部分とフッター分の間隔 */
}

div#wrapper { position : relative;
top : 0px; left : 0px;
width : 100%;

}



div#center{
margin : 0 160px;
      width : 380px; 

padding : 0 20px;
/* パディング */
voice-family : "\"}\"";       /* おまじない */
voice-family : inherit;       /* おまじない */

}


div#primary-column {
}

/* アーカイブ関連ブロック */

div#secondary-column {

position : absolute ;
left : 0px;
top : 0px;
width : 160px; }

/* アーカイブ以外のブロック */

div#extra-column {
position : absolute ;
right : 0px;
top : 0px;
width : 160px;
}

/* 著作表示ブロック */

div#siteinfo-legal {
clear : both;
/* 回り込みを解除 */
margin : 0 10px;
}

2006年05月03日 15:37  by FC2スタッフ

コメント一覧 21件中、1~10件表示

  • 旧フォーラムの記事です
    cyaimi 2006-05-18 00:49:31
    件名 :

    ちょっと余談気味ですが。

     テンプレショットlite(javascriptのURLをIE6右クリックでブックマーク)はなぜかうまく動い てくれませんでした(謎

    私も同様だったので、FFで全部バックアップとりました。
    編集だけならFFでも問題ないので、そっちの路線に変更すると作業が楽かも。

    2006年05月18日 00:49 by 増上寺

  • 旧フォーラムの記事です
    Anonymous 2006-05-17 08:03:40
    件名 :

    >わやさん

     前のレスでcyaimiさんがおっしゃったときに、簡単に手元にあった書籍で古いIEのためのものと「ボックスモデルハッ ク」(のようなもの)を曲解していました。(cyaimiさんすみません)具体例をあげていただいてとてもわかり易いです、あり がとうございます。基本IE6でつくって他のブラウザのかゆいところに手が届きそうですm(__)m

     配置についてはローカル保存してチャレンジしてみたいと思います。現状、vsapceが反映されないなら<p> ; </p>として間隔をあけてしまうようなレベルなので(汗

     また、コメントの書籍についても非常に興味があります、今の書籍はドロップダウンメニューのソースが欲しかったために購入 したので。

    >cyaimiさん

     大変助かりましたm(__)m 比べてみたところ、display:block;のあるボッ クス内の各プロパティを記述する順番くらいしか違いがなかったため、このバックアップなしでは絶対もどせませんでした。ありがと うございました。

     テンプレショットlite(javascriptのURLをIE6右クリックでブックマーク)はなぜかうまく動いてくれま せんでした(謎

     最後にサイドバーや記事の題名は背景の中央に配置されているのにドロップダウンメニューだけ上端によっている現象、これを ボックスモデルハックで何とかがんばってみます。

     本当にありがとうございましたm(__)m

    2006年05月17日 08:03 by FC2スタッフ

  • 旧フォーラムの記事です
    cyaimi 2006-05-16 23:29:58
    件名 :

    こんなことで役に立つとは思いませんでしたが、昨夜の私の最後の回答時点でのCSSがまだ残っています。
    (子メニューの高さがそろった時点)

    http://b log5.fc2.com/c/cyaimi/file/style.css
    その上で、わやさんの回答を参考にしてみてください。(私も参考にさせていただきます)

    参考:バックアップお役立ち(メチャクチャ役立たせてもらってます)
    テンプレ・ショッ ト ブックマークレット

    2006年05月16日 23:29 by 増上寺

  • 旧フォーラムの記事です
    わや 2006-05-16 21:11:35
    件名 :あの〜、今更かもしれませんが…

    ええっと…、元のテンプレートのCSSにもある、html>body クラス名〜 { ~ }…という指定方法は、
    Operaだけでなく FireFox にも反映されます。(フォント指定以外にも使えます)
    これを活用して、「Opera と Firefox に反映するデザイン設定」 をしてみてはいかがでしょうか。
    このスレッドに既出の「ボックスモデルハック」のような手法になるかと思います。よければ、試してみてください。


    例:カラム中央に画像を配置したい時の、画像の指定方法の違い

    /* --- プロフィール画像の余白・表示位置--- */

    .author-image img,
    .plugin-myimage img &#123; display: block;
    margin: 0 0 15px;
    text-align: center; &#125;

    html>body .author-image img,
    .plugin-myimage img &#123; display: block;
    margin: 0 auto 15px; &# 125;
    /* Opera、Firefoxなど比較的新しいブラウザでのプロフィール画像表示位置 */

    例:IEとFFで、違う行間を設定する場合など

    /*--- 記事本体文字の枠内余白と行間 ---*/

    div.entry-body &#123; margin: 0px;
    padding: 10px 25px;
    line-height: 150%; &#125;

    html>body div.entry-body &#123; line-height: 170%; & amp;#125;
    /*--- Opera、Firefoxなど比較的新しいブラウザでの行間 ---*/


    あと、個人的には…

    「container(相対配置枠)の中に、DIV#branding(絶対配置) とプルダウンメニュー(絶対配置)とw rapper(相対配置枠)有り」
    「さらにwrapper(相対配置)の中に、絶対配置指定で各カラムを配置」

    …の構造よりも

    「container(相対配置枠)もしくはwrapper(相対配置枠)]どちらかの中に、絶対配置で各カラムを配置」
    DIV#branding とプルダウンメニューは相対配置枠の外(上)に配置し、絶対配置 指定を解除(別の方法で配置)」

    …の方が、デザイン指定を細かくコントロールしやすいように思います。


    この方法についての注意点などは、ちょろっと
    <a class="postlink" href="http://blog.fc 2.com/forum/viewtopic.php?t=10032&highlight=">ht tp://blog.fc2.com/forum/viewtopic.php ... highlight=</a&g t;
    にも書いてます…(↑こっちの方の、私のコメント<余談>部分は無視してください(汗))

    何か参考になると良いのですが。………だめかな。

    2006年05月16日 21:11 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2006-05-16 19:26:02
    件名 :

     理想どおりと書いたのですが一点だけ、ドロップダウンメニューのテキストがFirefoxだけ上下方向で真ん中にこずにテ キストが上に寄っているのがどうしても気になっていじっているうちにFFでだけメニューが横方向に切れるようになってしまいまし た。

      バックアップさえきちんととっておけばこんなことにはならなかったのに情けないです。

      なぜか今の表示はテキストが背景画像の左端によっていて上下方向はきちんとpaddingが反映されているようです。

     Sleipnir1.66,IE6,Opera8.54での表示は理想どおりになっています。Document&sett ingの内容も消して再インストールしましたが症状は変わりません。

     http://tsrr.blog62.fc2.c om/

     http://blog62.fc2.com/t/tsrr/template/tsrr/style.css

     汚いソースで申し訳ありませんm(__)m

    2006年05月16日 19:26 by FC2スタッフ

  • 旧フォーラムの記事です
    Anonymous 2006-05-16 12:00:41
    件名 :

     今度こそリンク等隅々チェックして理想のレイアウトになりました、ありがとうございました。(レイヤー使ったページがFF でおかしいのはテンプレートとは関係ないので放置)

     カウンタの件ですが、他のリンクにマウスをあててもおかしな挙動をしました。

     li.parentOn ...a

    がなぜかブロックでの指定であるにも関わらず、他のa要素にも継承されていたせいのようで削除してことなきを得たのですが、そ の前に以前記述してコメントにしておいたFC2カウンターを有効にして元のカウンターを削除してしまっていたので後の祭りでした 。

     本当にありがとうございましたm(__)m

    2006年05月16日 12:00 by FC2スタッフ

  • 旧フォーラムの記事です
    cyaimi 2006-05-16 00:45:28
    件名 :

    毎度毎度回答が複数になって申し訳ないです。
    後一息ですっきりすると思われます。
    子メニューの高さ調節ですが、今までの調整をヒントにやってみてください。

    ヒント
    1.高さをそろえる
    2.高さをそろえたいのは、黒の背景色とグレーの背景色の部分

    2006年05月16日 00:45 by 増上寺

  • 旧フォーラムの記事です
    cyaimi 2006-05-16 00:05:48
    件名 :

    FFと同じように、とあったので(ちょっと被っちゃうけどいいのかなぁ)とか思いながらでした。実は。

    で、あれこれ探していたら、コメントアウトしたものが見つかりました。

    #navigation li a {
    display: block;
    width: 100%;
    padding: 8px 0;
    text-align: center;


    /* height : 30px; */
    font-weight: bold;
    color: #666666;
    text-decoration: none;
    background: url("http://blog62.fc2.com/t/tsrr/file/0 03399.jpg") no-repeat;
    margin: 0;
    }

    これ、コメントアウトを解除してあげれば子メニューにマウスが乗っても親メニューの高さが維持できます。(IE、FFともに )

    #解決までの道のり
    マウスが親メニューに乗っていないときに、子メニューが被ってくる
    ⇒じゃぁ親メニューの高さを指定すれば?
    ⇒背景画像を見て親メニューの指定を発見
    ⇒おや、何故か高さがコメントアウト⇒ちょっと外してみれ

    追記
    あー微妙に子メニューのonmouseoverとonmouseoutの高さがずれますね。
    多分marginかpadding(もしくはheightかな)を弄れば何とかなりそうです。
    その差はわずか1px2pxの問題なので、そこら辺を目当てに色々試してみてください。

    最後の追記(しつこい)
    終わろうとしたら思いつきました。上記で親メニューの高さを維持したので、
    同じように以下でも高さをそろえてください。
    #navigation li a:hover &#123; height : 35px;
    color: #EC8602;
    background: url&#40;"http://blog62.fc2.com/t/tsr r/file/menu2.jpg"&#41; no-repeat; 
        margin-bottom:px;
    &#125;
    それぞれの背景画像を見て高さを考えると、多分納得が行くと思います。

    #回答が次ページにまたがってしまうので、追記追記になってしまいました。00:30

    2006年05月16日 00:05 by 増上寺

  • 旧フォーラムの記事です
    Anonymous 2006-05-15 23:32:12
    件名 :

      すみません、次回は一トピック一質問をきちんと守りますm(__)m 文字を大きく表示したいだけの理由でH2タグを使 うのはよくないと自分もどこかでみたのですがつい使ってしまいました。<p>にヒントがありそうなのでいろいろと試 してみようと思います。本当にありがとうございました。

     
     それで本題のズレのことなのですが勘違いしていました。マウスを親メニュー"MainMenu",& quot;member"にのせたときの子メニュー"about us""ALexa nder"との位置関係と、マウスを子メニューに移動して背景がグレーになったときの親メニューと子メニューの位置関 係を同じにしたい=隙間をなくしたいといいたかったのでした。今は子メニューにマウスをのせると子メニューと親メニューが重なっ てしまいます。


     

    2006年05月15日 23:32 by FC2スタッフ

  • 旧フォーラムの記事です
    cyaimi 2006-05-15 23:17:23
    件名 :

    このトピックは「FFとIEの表示のずれ」のテーマで流れてきましたので、
    上記の質問はちょっとテーマが違ってきます。(FFもIEもともに同じブレがでる)
    出来れば次回からは違う質問の場合は別トピックをたてて質問してください。
    (検索で過去の質問を探す人のためにも、1トピ1テーマで)

    という前置きの元。
    残念ながら降参です。
    一応試した結果だけ報告しておきます。

    1.カウンターのリンクをはずしたらぶれは止まった⇒でもアンカータグでの指定は問題なさげ
    2.近い場所にリンクタグを入れてみても、同じような症状はでない
    3.カウンターのみpタグで囲ったら(その直前の「TOTAL」は含めず)、
    何故かぶれは止まった⇒pの指定が何か有効なのか?
    ⇒でも、同じ指定をh2にしても効かない
    4.上記のことを踏まえて、#branding やその中で新たに思いつく定義をしてみたけれど、状況に変化なし

    ちなみに、カウンターをh2にするのはお勧めしません。「中見出し」という意味のタグなので、正しくないです。
    お力になれず。

    引き続きこの件で質問する場合は、その旨このトピックに明記の上、新トピックを立てたほうが良いかもです。

    #思いっきり個人的な話ですが、FFとIEの違いであれこれ調べていたものの、
    あまり身にならずにいたところに出た質問でしたので、私自身もとても勉強になりました。

    2006年05月15日 23:17 by 増上寺

1 2 3 > >>