Firefoxのスタイルシートで複数のクラスが適用できません
- Firefoxのスタイルシートで複数のクラスが適用できず、TABLE要素のスタイルがうまく適用されない場合の解決方法を教えてください。
- IEでは問題なく動作するHPのスタイルシートをFirefoxにも適用させることができません。特にTABLE要素についてのスタイルが適用されない問題が発生しています。解決法を教えてください。
- IEで動作確認したHPのスタイルシートをFirefoxでも適用させたいのですが、TABLE要素についてのスタイルが適用されない問題が起きています。具体的な解決策を教えてください。
- ベストアンサー
Firefoxのスタイルシートで複数のクラスが適用できません。
Firefoxのスタイルシートで複数のクラスが適用できません。 恐らく質問としては初歩の初歩だと思われます。 最近IEのみで動作確認していたHPをFirefoxにも適用させようと思い立ちました。 ところが、TABLEにスタイルシートが上手く適用されないのです。 実際にはいろいろ要素を入れてますが、検証用として簡略化し、下記のクラスで実行。 TABLE.a { margin: 0px auto; } TABLE.b { margin: 0px auto; } <TABLE CLASS="a">だとセンタリングされるが<TABLE CLASS="b">ではされないといった具合です。 記述が誤っているのかとTABLE.aの要素をコピペしてTABLE.bに書き換えても駄目でした。 IEだと普通に適用されるので、何が悪いのかさっぱりです。 検索して調べてみても該当しそうな回答を見つけられず難儀しています。 こうすれば良いのでは、と思い当たる節がありましたら教えていただけないでしょうか。
- tortoiseshell
- お礼率100% (1/1)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
質問内容を見る限り問題はなさそうです。 以下のコードでFirefox3.6でちゃんとセンタリングになるを確認。 どっかに凡ミスがあるはずです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>テスト</title> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <style type="text/css"> table.a { margin: 10px auto; width: 200px; background-color: #AAA; } table.b { margin: 10px auto; width: 200px; background-color: #BBB; } </style> </head> <body> <table class="a"> <tr><td>クラスa</td></tr> </table> <table class="b"> <tr><td>クラスb</td></tr> </table> </body> </html>
関連するQ&A
- FireFox スタイルシートの設定
スタイルシートでのレイアウトを考えています。 ところが実際に製作を開始すると、レイアウトができません。 IEでは問題ないのですが、FireFoxがだめなのです。 具体的には[class]を用いると、まったく適用されなくなります。 他にも、[position]が一部だけ適用されたり、背景が適用されたりされなかったりいろいろです。 基本的には、どちらのブラウザでも表示されるようにしたいのです。(スタイルシートを用いて、テーブルは用いないように)なにか解決策はあるのでしょうか？ このような問題の解決方法が示されているページなどがありましたら、あわせてお願いします。
- ベストアンサー
- ブラウザ
- 外部スタイルシートがテーブル内に効かない
外部スタイルシートの設定が、テーブル内には効きません。 特に、フォントや行間を効かせたいのですが、どうしたらいいのでしょうか。 以下、大雑把ですが。 #main { float: none; margin-left: 132px; line-height: 1,5em; margin-top : 50px; } #main td, th { line-height: 1,5em; } と外部スタイルシートで指定していて、 <DIV id="main"> <TABLE cellpadding="10" background="image/003-002.gif" style="filter:Alpha(opacity=75);"> <TBODY> <TR> <TD> <H3>内容</H3> </TD> </TR> </TBODY> </TABLE> というようなテーブルを書きました。 テーブルがなければ、スタイルシートは効きます。 初歩的な質問だとは思うのですが、テーブル内に行間などを設定する方法をお願いいたします。
- ベストアンサー
- HTML
- CSSを適用…させない！
ちは！ さてさて～スタイルシートで、たとえばページ内のtableすべてにスタイルシートを適用させるため書くのは TABLE{ うんぬん } ですが！この状態で、ページ内の数個のtableにはこの「うんぬん」を適用させたくない！ だからって、適用させたいtableにclassを設定しテクノは面倒だ！ そこで！、適用させたくない数個のtableに、「TABLE」に対してのstyleは適用させない！っていうclassを書く。 そんなCSSありますか？(わかりにく・・・い・・・) とりあえず、「ここは適用しなくていいよ」っていうCSSありませんかね？探してもないものはないんでしょうか・・・
- ベストアンサー
- CSS
- Firefoxでのスタイルシートの記述について
Firefoxでのスタイルシートの記述について ４つの文字を配置するために (1) font-size:18px; font-weight:bold; color:#000000; margin:127px 72px 0px 40px; (2) font-size:18px; font-weight:bold; color:#000000; margin:64px 72px 0px 40px; (3) font-size:18px; font-weight:bold; color:#000000; margin:101px 72px 0px 40px; (4) font-size:18px; font-weight:bold; color:#000000; margin:65px 72px 0px 40px; と指定しました。IEでは思った位置になったのですが Firefoxでは(2)(3)(4)が下のほうにずれてしまいました。Firefoxに合わせるとIEでの位置が上にずれてしまい頭を悩ませています。 記述の間違いや、アドバイスなどあれば教えてください。 よろしくお願いします。
- ベストアンサー
- HTML
- mac＆winのsafari4.03にてtableタグのmarginの挙動がおかしい件
htmlとcssは下記です。 tableタグを括っているdivにmarginが適用されていないにも関わらず、 tableの上下の要素にはmarginが適用されています。 どなたか理由がわかる方はいらっしゃるでしょうか。 よろしくお願いいたします。 firefoxだと思ったとおりに動いてくれるのですが。。 ----------------------------- <style> #wrap { background:#F36;} .inner { background:#6CC;} .foot { background:#36F;} table { border-spacing:0; border-collapse:collapse; margin:10px; } td { border:1px #000 solid;} </style> <div id="wrap"> <div class="foot">あああ</div> <div class="inner"> <table> <tr><td>ほげ</td></tr> </table> <!-- ///.inner --></div> <div class="foot">あああ</div> <!-- ///#wrap --></div> -----------------------------
- ベストアンサー
- HTML
- スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- ベストアンサー
- HTML
- スタイルシート【複数の画像の配置について】
初めまして、質問させていただきます！ 今、サイトを構築中なのですが、そこで困ったことがおきました。 <link rel="stylesheet" type="text/css" href="./default.css" media="all" /> <style type="text/css"> <!-- Body{ margin:0 margin:0;} --> IMG.a{ position: relative; left:60px; top:60px;z-index:1;} IMG.b{ position: relative; left:100px; top:20px;z-index:0;} </style> </head> <Body Style="margin:0 margin:0;"> <img class="a" src="**" alt="**" width=197 height=143> <img class="b" src="**" alt="**" width=78 height=59> このように、スタイルシートで画像の位置を指定しているのですが、 画像を増やしていくと、下（または上）に余白が出来き、どんどんスクロールが出来るようになってしまい、うまく画像を配置できなくなってしまいます。 ちなみに画像はFireworksで作ったものを書き出したものです。 他にタグを打ち込むなどで、解消できるのでしょうか？ 構築は初めてで、タグの知識もほとんどありません。 どうか、よろしくお願いいたします。
- 締切済み
- HTML
- スタイルシートの記述方法に関して。
スタイルシートで、基本的なデザインは一通り出来ると思っています。 実は今サンプルのスタイルシートを修正しています。 スタイルシートの記述方法に関して、質問があります。 サンプルのスタイルシートの記述方法ですが、要素の記述にて上位の要素を全て記述し、最終的な要素を記載しています。 例として 一番外側の要素を：#wrapper ヘッダー：#header コンテンツ：#content メインコンテンツ：#main サイドコンテンツ：#side とします。 自分の場合であれば、スタイルシート内の記述は div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#header { width: 480px; margin: 0px auto; padding: 0px; } div#content { width: 480px; margin: 0px; padding: 0px; } div#main { float: left; width: 300px; margin: 0px; padding: 0px; } div#side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述していましたが、サンプルでは以下の通りに記述されています。 div#wrapper { width: 500px; margin: 0px auto; padding: 0px; } div#wrapper #header { width: 480px; margin: 0px auto; padding: 0px; } div#wrapper #content #main { float: left; width: 300px; margin: 0px; padding: 0px; } div#wrapper #content #side { float: right; width: 170px; margin: 0px; padding: 0px; } と記述されています。 上記の記述に、技術的に有利になる点は有るのでしょうか、単に CSS の記述を判りやすくしているだけのように思えます。 上記の記述方法は、一見判りづらいと思いますが、記述している要素が確実に判ると思います。 ただ、その反面 CSS のソースが肥大化します。 上記の記述方法に、他にメリット、デメリットがあるのかアドバイスを頂ければ幸いです。 ちなみに、参考にさせて頂いてる CSS のソースは海外で作られたソースになります。 海外では一般的に使われている記述方法になるのでしょうか。
- ベストアンサー
- CSS
- thのスタイルを適用するにはどうすればいいでしょう
<table border=1 class="test1"> の部分にclassを設定するだけで thのスタイルを適用するにはどうすればいいでしょうか？ 理想としては添付画像の下のテーブルの様に thの部分だけスタイルを適用したいのですが 実際はテーブルのレコード数が多い為、 <th class="test2">を全てのthにつけるのを省略したいです。 なので、<table border=1 class="test1">の部分にthのスタイルを設定したいのですが table.test1 {font-size: 5em;} の部分はどのように記述すればいいでしょうか？ 現在の table.test1 {font-size: 5em;} だとテーブルすべてに適用されてしまいます。 理想の表示は下のテーブルで 理想のソースは上のテーブルです。 ------------------ 以下ソース <html> <head> <style type="text/css"> table.test1 {font-size: 5em;} th.test2 {font-size: 5em;} </style> </head> <body> <table border=1 class="test1"> <tr><th>No</th><td>a</td></tr> <tr><th>No</th><td>a</td></tr> </table> <br> <table border=1> <tr><th class="test2">No</th><td>a</td></tr> <tr><th class="test2">No</th><td>a</td></tr> </table> </body> </html>
- ベストアンサー
- CSS
- スタイルシート
#Area_Login table .tbl { margin-left: auto; margin-right: auto; border: solid 1px #FFFFFF; background-color: #000000; } #Area_Login table .tbl th { text-align: center; font-size: 12pt; background-color: #AFB4DB; height: 15px; } #Area_Login table .tbl td { text-align: center; font-size: 11pt; background-color: #AFB4DB; border: solid 1px #FFFFFF; } <div id="Area_Login"> <table class="tbl"> <tr> <th><th> <tr> <td></td> </tr> </table> </dib> 上記ソースなのですが、テーブルが中央に配置されなくて困っています。 どなたか教えていただけませんか？
- 締切済み
- CSS
お礼
回答ありがとうございます。 確認したところ、HTMLの最初の２行が修正したつもりで元のままでした。 恐らく修正してる段階で、何らかのミスにより戻っていたようです。 再度修正し直してみると、スタイルシートの設定がFirefoxにも反映されました。 LOHAさんの回答が無ければ延々と悩んだままだったと思いますので、本当に助かりました。