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スタッフ
旧フォーラムの記事です
Anonymous 2006-05-15 21:33:12
件名 :
本当に何度も直していただいてありがとうございますm(__)m イメージ通りの表示となりました。FFではhspace が反映されていなかったり、Operaである程度形にするには道は大いに険しそうです・・・。
ところが、カウンターの数字部分にマウスをあてるとレイアウトがくずれるという病が発生してしまいました(泣き
<h2><font color="#FF0000">TOTAL</f ont>
<A href="http://millioncounter.com/" target=_b lank><IMG SRC="http://cnt4.millioncounter.com/img .php?tsrr&total&5&014" border=0 alt="ア クセスカウンター"></A>
</h2>
<h2><font color="#FF0000">TODAY</f ont>
<A href="http://millioncounter.com/" target=_b lank><IMG SRC="http://cnt4.millioncounter.com/img .php?tsrr&today&2&014" border=0 alt="ア クセスカウンター"></A>
<font color="#FF0000">YESTERDAY</font> ;
<A href="http://millioncounter.com/" target=_b lank><IMG SRC="http://cnt4.millioncounter.com/img .php?tsrr&yesterday&2&014" border=0 alt=&qu ot;アクセスカウンター"></A>
</h2>
ページの一番上に画像を加えたことが理由か否か、気がついたらなっていました・・・。
ちなみにSleiphnir1.66での表示がIE6とほぼ変わらなかったので安心しました。
本当に何度も申し訳ないですm(__)m
2006年05月15日 21:33 by FC2スタッフ
旧フォーラムの記事です
cyaimi 2006-05-15 21:07:37
件名 :
現在のFFと全く同じようにIEで表示させるのでしたら、
#navigation ul li.parentOn ul {
display: block;
margin-top:-15px;
}
2006年05月15日 21:07 by 増上寺
旧フォーラムの記事です
Anonymous 2006-05-15 14:50:48
件名 :IEとFireFoxで
マウスジェスチャー?によるドロップダウンメニューの表示がどうしても気になって悪戦苦闘した結果、FireFoxではイ メージどおり表示されますがIE6ではメニューと子メニューの間に隙間ができてしまいます。
この隙間の正体はブラウザによるCSSの解釈の違い=仕様と考えてあきらめたほうがよいのでしょうか。
検索をかけて同様に隙間で悩んでいる方をみつけたのですがブラウザの仕様と結論づけていました。
2006年05月15日 14:50 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-05-06 12:08:12
件名 :
教えていただいたように変更してほぼ思っていた表現となりました。夜遅くまでありがとうございました。
一点、プルダウンメニューの訪問済みリンクの背景の下端が切れてしまうのを直そうと教えていただいた修正箇所を下記のよう に
#navigation ul li.parent a:link,a:visited {
height:30px; }
変更してみたところ FireFoxで今までのIEのような表示になり、逆にIE6では子メニューの高さが高くなってしまいま した。IE6でみる人の方が圧倒的に多いと思い教えていただいた
#navigation ul li.parent a:link{
height:30px; }
に戻しました。
左右のマージン等気になっていたところを全て修正していただき本当にありがとうございました。アプローチの仕方も参考に なりましたm(__)m
2006年05月06日 12:08 by FC2スタッフ
旧フォーラムの記事です
cyaimi 2006-05-06 03:50:47
件名 :
ご質問にはありませんでしたが、気になっていた最後の1つも解決しましたので、お知らせしておきます。
(早く寝ないと・・・)
div#container {
width : 760px;
position : relative;
background-color : transparent;
margin:0 auto;
}
2006年05月06日 03:50 by 増上寺
旧フォーラムの記事です
cyaimi 2006-05-06 03:25:07
件名 :
やっと意味がわかり、そして解決。(上記の続きでCSSを編集しました。微調整の必要があるかもしれません)
以下をCSSに追加します。
#navigation ul li.parent a:link{
height:130px;}
HTMLを一部修正。Home/MainMenu/Memberをそれぞれ
<a href="#">○○○○</a>
と、リンクをそろえます。
#解決までの道のり(何故これでうまくいったかの解説は出来ません)
#navigationのheightに関係がありそう(ここから出発)
⇒heightを弄ったり、付け加えてみたり
⇒何処に付け加えても、変化なし
⇒「#navigation li a {〜」に入れたら見事に表示。
⇒でも、onmouseまでheightが適用。(そんなぁ)
⇒なので、新たに定義を付け加える
⇒驚いたことに「Home」と「Member」だけ残してうまくいく。(なぜぇ)
⇒HTMLを見て違いを発見
理屈はともかく、目の付け所だけでも参考になれば。
これですっきり眠れます
2006年05月06日 03:25 by 増上寺
旧フォーラムの記事です
cyaimi 2006-05-06 02:08:20
件名 :
おまけ
最初の記事タイトル(だけ)がなぜか横にずれていますが、これは
div.section {
margin:25px auto; /* 記事と記事の間隔 */
}
とすると、中央によります。ただし上メニューとの間がちょっと開きます。
2006年05月06日 02:08 by 増上寺
旧フォーラムの記事です
cyaimi 2006-05-06 01:48:21
件名 :
プルダウンの下端が切れる、というのが何処をさしているのかちょっとわかりませんでしたが、
画像が繰り返されるのは、以下を削除すると回避できます。
background : url("http://blog62.fc2.com/t/tsrr/fi le/mainbar.jpg") top left no-repeat;
2006年05月06日 01:48 by 増上寺
旧フォーラムの記事です
Anonymous 2006-05-06 00:39:50
件名 :
ハックはあまりに敷居が高かったので、IE6とFIREFOX1.5.0.2でみながら、heightを変更したところ、 プルダウンメニューと三段組みカラムの重なりは回避できたました。
が、no-repeatとしているにもかかわらずFIREFOXではプライマリーカラムの画像が繰り返され、もともとの質 問したかったプルダウンメニューの下端が切れるという現象も直りません。
FIREFOXでのレイアウトの崩れにこだわる理由は、FIREFOXで閲覧する方のことを考えてることもありますが、ど ちらかというとIE7が主流になってcssの解釈が変わったときに今のレイアウトが崩れてしまうことを危惧しているためです。
やはり地道にハックを学んでいくしかないのでしょうか。キツいです(><)
2006年05月06日 00:39 by FC2スタッフ
旧フォーラムの記事です
Anonymous 2006-05-04 00:49:54
件名 :レスありがとうございます。
レスありがとうございます。
IEとFireFoxでpositionの基準点が異なることはなんとなくわかったのですが、ブラウザごとのcssの解 釈の違いを近くするためにハックを使うのですね。
全くの初心者なのでIE6で思ったように表示されていることでよしとしたいところですがFireFoxでうまく表示され ないとIE7が主流となったときにレイアウトが崩れてしまうことを危惧しているので教えていただいたリンク先やキーワード検索で 少しずつがんばってみますm(__)m
ユーザー名を書き忘れてました、すみません。
2006年05月04日 00:49 by FC2スタッフ
Copyright(c)1999 FC2, Inc. All Rights Reserved.
@fc2infoさんをフォロー