全体的なテキストの大きさは指定せずに、h2だけ大きさを指定しました。
tdに.menuBarBgを、h2に.menuBarのclass指定したところがあります。
IE6、NN7.2では大きさは制御されているのに、Firefoxではブラウザの「文字サイズ」を大きくすると、それなりに大きくなって、TDからはみ出てしまいます。
ほかのh2は変っても特別問題ないのですが、tdにバックイメージの画像を入れているので、はみ出すととってもおかしいんです。
どのようにしたら良いでしょうか。
body {
margin-top: 0;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
padding: 0;
color: #333333;
text-align: center;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-color: #FFFFFF;
}
h2{
font-size: 16px;
color: #333333;
text-align: left;
padding: 0;
}
/* News title */
.menuBarBg{
background-image: url(images/menubg.gif);
background-repeat: no-repeat;
}
.menuBar{
text-indent: 35px;
margin: 0;
padding: 6px;
}
No.5ベストアンサー
- 回答日時:
結論は、「どこかで妥協してあきらめる」という事です。
技術的にも、作成側の期待が反映するのは
IEかその系統(Sleipnir)のブラウザなどです。
まぁ Opera などのズームの場合は画像も一緒に変化しますが、改行などの動作がからみ、レイアウトが変化します。
スタイルシートを振り分けるという考え方も、
IEなどは固定のデザイン、他はサイズ変更を想定したデザインとデザインごと分けるという事しか無理でしょう。
で、基本というか考え方での妥協というか諦める理由の見つけ方として・・・。
1.閲覧者の操作を想定しての配慮事項なら、CSSを無効にされた場合の配慮はどこに?
2.魅せるという部分ではHTMLはあまり良い媒体ではないと・・・。読めるなり見れるなり操作できるなりと目的が達せられれば良しと・・・。
3.閲覧者が自分でデザインを崩しているのだからと放置・・・・・。
で、それでもどうしてもという場合は
1.文字データでなく他媒体を用いるとかしてデザインと文字情報を一体化させる・・・。
2.元からサイズを可変で想定して画像を用いる。また画像の背景指定などをする要素(タグ)と文字データを含む要素の親子関係等も意識的に設計する。
3.思い切って画像はやめて背景色に変える・・・。可変に対処しやすいし・・・。
いろいろ言いつつ・・・。
苦労の割りに効果は少しで諦める事が多いし
技術的にも単に何が出来ないという事を学べる程度で・・・。
まぁバグがなければ、背景画像でなく単なる画像として指定しながら位置指定等で重ねて、且つ画像のサイズ指定を相対値でしてしまうという手も考えられるのですがぁ~。(位置指定のバグのせいで、かえって崩れるブラウザも出かねないので・・・)
推奨を意識しながらデザインもできるだけいいものに・・・というとどこかでやっぱり妥協が必要なのですね。
もうこれ以上ブラウザが増えないことを祈るしかありません。
(あっ・・・サファリ確認してない・・・)
自分を納得させるうえで大変参考になりました。
ありがとうございました。
No.4
- 回答日時:
こんにちは!
最近Web制作から離れているのですが、確かブラウザでフォントサイズが固定されたままになるのはWinのIEだけだったと思います。
(NN7.2は固定されるようになったのですか・・NN7.1では変更出来るのですが・・)
見る側の立場からするとサイズを変更できないことの方が不便な訳ですから、変更出来るブラウザの方が正常だと考えられます。
私的には推奨されないながらも絶対的に固定できる指定方法があっても良いと思っているのですが・・。
取りあえず、崩れて困る部分は画像にする方法しかないかと思います・・。
見栄えもまぁ良く、更新もテキストでできて・・・なんて思っていたらこうなってしまいました。
できないとわかり、bgイメージの高さを増やしてしのごうと思います。
ありがとうございました。
No.3
- 回答日時:
font-sizeを16pxと指定しているのに、ブラウザの「文字の大きさ」を変更すると、16pxより大きくなる、ときうことですか?
Macのブラウザはpx指定の文字でもサイズを可変にできる、と聞いたことがありますし、どこかで妥協が必要だと思います。#1様の言うように、至難でしょうね。
>制御されているサイト
アメリカのYahooやMSNなどは参考になりませんか?
アメリカYahooなども見させていただきました。みなさんのご回答で、フォントサイズの固定が無理とわかりました。
ありがとうございました。
No.2
- 回答日時:
JavaScriptで振り分けるとかというのはどうでしょう。
JavaScriptは苦手なので詳しいことを申しあげられないので恐縮なのですけれど。今はどうかわかりませんがこのサイトもブラウザによってスタイルシートを振り分けていたと聞いたことがあります。
たびたびすみません。
振り分けるにしても、基本的に文字の大きさをのCSSで指定(固定)した場合、Firefoxで意図したとおりに表示できるかということなんです。
色々サイトを回っているんですが、やはりIEでは固定されていてもFirefoxではブラウザで大きくできてしまうサイトが全部で、まだ制御されているサイトに出会ってません・・・。
やっぱり無理なのかなぁと思っています。
ありがとうございました。
No.1
- 回答日時:
Firefox用に代替のスタイルシートを用意するしかないと思います。
どうしても無理ならばデザインそのものを変更するしかないと思いますよ。スタイルシートは絶対的なものではありません。すべてのブラウザに対応させるのは少々至難の業かと思います。
参考URL:http://textocean.com/article/7/iefirefox
ありがとうございます。
Firefox用に代替のCSSということは、CSSで文字の大きさを固定することはできる。ということでいいのでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS テーブルタグのセルの幅の一部だけを指定 1 2023/03/12 12:02
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
IMGタグで画像の繰り返し使用は…
-
同じ画像 複数回使用
-
lightbox2で画像を天地左右中央...
-
WEB上でディレクトリ内の画像を...
-
背景画像をリピートさせない方...
-
gif画像でたまに背景がグレーに...
-
CSS マウスオーバーでテキスト...
-
CSSでの動画のマスク処理
-
フッターの背景に色を指定した...
-
LightBoxの矢印の出し方
-
ひとつの画像をWEBで異なる小さ...
-
before疑似要素で画像を指定し...
-
背景画像の上に透過GIF背景...
-
<hr>の縦バージョンはありますか?
-
htmlタグで画像を背景に敷き詰...
-
【至急お助け!】チェックボッ...
-
サファリで背景画像が1ピクセ...
-
下記サイトのトップ画像はどの...
-
【Webサイト】画像が小さく表示...
-
画像で背景透明のテキストがに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報