• ベストアンサー

operaだとテーブルがなくなります

operaだテーブルがなくなります IEだと問題なく表示されるのに だれか助けてください style.css　 　　body{background-color:#ffff99;margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} .cur{font-family:cursive} .ser{font-family:serif} } table{background-color:#ff9933; 　width:100%; height:10%　 　 }　　 .midori{background-color:#999933; width:100%; height:3.3%　 } 　　　　　　　ｈｔｍｌのほうは <HTML> <HEAD> <TITLE></TITLE> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <table><tr ><td></td></tr></table> <table class="midori"> <tr ><td></td></tr></table> <table style="height:6.7%"> <tr ><td></td></tr></table> <table style="position:absolute; left: 0px; bottom:8%; width:8%; height:100%; background-color:#993300"> <tr ><td></td></tr></table> <table style="position:absolute; bottom:0; height=8% " class="midori"> <tr ><td></td></tr></table> </BODY> </HTML> こんな感じなのですが どうしてでしょうか

noname#69146
noname#69146
  • HTML
  • 回答数2
  • ありがとう数2

質問者が選んだベストアンサー

  • ベストアンサー
  • leap_day
  • ベストアンサー率60% (338/561)
回答No.2

こんにちは 色々と問題ありのスタイルシートですね（＞＜） 　　body{background-color:#ffff99;margin:0px; 　　→→全額スペースが使われています font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive} 　　→→『；』閉じ忘れ .cur{font-family:cursive} 　　→→『；』閉じ忘れ .ser{font-family:serif} 　　→→『；』閉じ忘れ } 　　→→『 } 』が余分にあります table{background-color:#ff9933; 　width:100%; height:10%　 　　→→全角スペース、『；』閉じ忘れ 　 } 　　→→全角スペース　　 .midori{background-color:#999933; width:100%; height:3.3%　 　　→→全角スペース、『；』閉じ忘れ } <table style="position:absolute; bottom:0; height=8% " class="midori"> 　　→→『height:8%;』のはずが『height=8%』になっています 基本的に『プロパティ：値；』の形になります 『；』閉じしていなくても効きますが記述忘れなどで別のプロパティと続きと見なされることがあるので付ける癖をつけておきましょう スペース空けに『全角スペース』は使用できません 『半角スペース』か『Tab』になります 指摘点を直せば表示されます（＾＾） body { background-color:#ffff99; margin:0px; font-size:large; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive; } .cur { font-family:cursive; } .ser { font-family:serif; } table { background-color:#ff9933; width:100%; height:10%; } .midori { background-color:#999933; width:100%; height:3.3%; } ※残念ながらheight:***%;というのは比較する100％対象がないので効いていません（Operaのみposition:absolute;したtableに効いていますが） px指定などに変えるか、親元のheightを決めてください

noname#69146
質問者

お礼

無事operaでも表示できました。 問題ありすぎるスタイルシートで申し訳ありませんでした。 自分では気づけませんでした。 ありがとうございました。

その他の回答 (1)

  • egoblock
  • ベストアンサー率22% (4/18)
回答No.1

テーブルがなくなるというのはどういうことでしょう？ もし高さが失われるということであれば、それはセル内に内容が入っていないからだと思います。半角スペースなどをいれておくと良いと思います。 IE, Firefox,Operaで確認しましたがIEだけ大丈夫というのはIEのバグというか、誤解釈です。 予断ですがフッター付き2カラムをやりたいのであれば<div>を入れ子にしてfloatをかけた方が楽だし、現在の主流です。

noname#69146
質問者

お礼

ありがとうございました <div>を入れ子にしてfloatかけるほうが楽だと学習しました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • CSSを使った丸ナンバー付きテーブルの挿入

    HTMLで作成した丸ナンバー付きテーブルをスタイルシートを使って挿入しようと思っているのですが、肝心の数字の部分が真っ白になってしまいました。関係しそうなところだけ抜き出してみました。 （↓headの中に書いてある） body {background-color: white; background-image: url(dolp2.gif); color: #000000} table, td {width: 800px; border: 2px #C0C0C0 solid; border-collapse: collapse; background-color: #ffffff;} （↓body以下に書いてある） <div><Table border="0"><Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> １ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい１＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ２ </Td></Tr></Table> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい２＝＝＝ </Td></Tr> <Tr><Td> <Table border="0" cellspacing="0" bgcolor="#009500" cellspacing="0" cellpadding="5" style="color:#ffffff;font-size:25px;font-weight:bold;width:40;filter:Alpha(opacity=100,finishopacity=0,style=2);"> <Tr><Td align="center" valign="middle"> ３ </Td></Tr></Table></div> </Td><Td width="350"> ＝＝＝ここに文章を書いて下さい３＝＝＝ </Td></Tr></Table> このようなタイプのものはheadやcssにあげたほうがいいのでしょうか？ 最初はこのままbodyのなかに収めておこうかと思っていたのですが、上記のような事態になってしまったのでどうしたらいいのか困っています。 HTML初心者なので、なにとぞ宜しくお願いします。

    • ベストアンサー
    • HTML
  • 入れ子にしたテーブルをheight100%にする

    お世話になります。 以下のソースで、table2の高さを100％にしたいです。 この書き方では、firefoxではうまく表示できるのですが、 IEではだめでした。どこがいけないのでしょうか？？ ---------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <style type="text/css"> <!-- html {height:100%;} body {height:100%;} .th100 {height:100%;} --> </style> </head> <body> <table width="600" border="1" cellpadding="0" cellspacing="0" class="th100"> <tr> <td width="300" rowspan="2"> 長いテキスト </td> <td height="50"><table width="300" height="50" border="0" cellpadding="0" cellspacing="0" bgcolor="#000000"> <tr> <td>table1</td> </tr> </table></td> </tr> <tr> <td><table width="300" border="0" cellpadding="0" cellspacing="0" bgcolor="#999999" class="th100"> <tr> <td>table2</td> </tr> </table></td> </tr> </table> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルに関する質問です。

    テーブルに関する質問です。 wordpressでHPを作っているのですが、テーブルが思った通りの形にならない為 試しにhtmlドキュメントで同じテーブルを作ろうと試みたのですが やはり同じ現象が起き、思った通りのレイアウトにならないです。 一行目のテーブルと二行目のテーブルはくっつけて、 二行目の列のテーブルのセルとセルの間隔を1px空けてやりたいのですが (1)のwidth:0;の空きセルを作って、それをセルとセルの間に挿入することによって 間隔を空けるという方法は、どうやっても1pxではなく2pxの間隔になってしまい、 (2)の白いborderをセルの右側だけに表示させるという方法では、 Firefoxでは思った通りのレイアウトなのですが、 IE6で見た場合に一行目のセルに線が付きぬけて表示されてしまいます。 色によっては誤魔化かされて付き出てない様に見えるのですが。 どうしたら良いでしょうか？ よろしくお願いします。 (1) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color:#b7a193; width: 300px; height: 30px; padding:0px" colspan="5"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; width: 0px; height: 40px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> <td style="background-color: #ffffff; height: 40px; width: 0px; border-collapse: collapse;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse;"></td> </tbody> </table> </BODY> </HTML> (2) <HTML> <HEAD> <TITLE>テスト</TITLE> <STYLE type="text/css"> <!-- table { border-collapse: collapse; border-spacing: 0; } a img { border: none; } --> </STYLE> </HEAD> <BODY> <table border="0"> <tbody> <td style="background-color: b7a193; width: 300px; height: 30px; padding:0px" colspan="3"></td> <tr> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> <td style="width: 100px; height: 50px; background-color: #eee8d9; border-collapse: collapse; border-right: #ffffff 1px solid;"></td> </tbody> </table> </BODY> </HTML>

    • ベストアンサー
    • CSS
  • テーブルが左右上下中央表示にできない。

    <style type="text/css"> <!-- .tableley { text-align: center; } .tableley table{ margin-left: auto; margin-right: auto; } .tableley caption{ margin-left: auto; margin-right: auto; } bodytd{ letter-spacing :2px; line-height :15pt; font-size:80%;font-family:'Verdana'; color:#ffffff; } br{letter-spacing:normal;} body{overflow-y:hidden; margin:0;padding:0; background-attachment:fixed; } a{ text-decoration:none; color:#000000; } a:hover{ color:#808080; } --> </style> </head> <body> <table border="0" width="100%" height="100%" cellspacing="0" summary="テーブル"> <tr> <td colspan="3" style="border-bottom:1px solid #000000" bgcolor="#000000" valign=bottom><font size=5><b>SITE　NAME</b></font> </td> </tr> <tr> <TD height="80%" width="250" align="center" valign="top" colspan="3"><BR> <BR> <table style="border: 1px dotted #cccccc;"> <tbody> <tr> <TD><IMG src="ConvertImage/ice.png" width="187" height="131" border="0"></TD> <TD height="120" width="200"> <div style="width: 270px; height:140px;color:#cccccc;font-size:10px;font-family:Verdana;overflow:auto; scrollbar-face-color:#000000; scrollbar-highlight-color:#000000; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #cccccc; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #000000;"><FONT color="#cecfce">ここにテキスト<BR> </FONT></div> </TD> </tr> </tbody> </table> </TD> </tr> <tr> <td colspan="3" style="border-top:1px solid #000000" bgcolor="#000000" align="right" valign="top"><FONT color="#ffffff">SINCE</a> </td> </tr> </table> </body> と、ビルダーでフレームを使わず横三分割のサイトを作ったのですが 真ん中の白い部分にあるテーブルを白ページ上下左右中央に設置出来ず悩んでいます。どうか解決策を教えてくださいお願いします。

    • ベストアンサー
    • HTML
  • TABLE内のTABLEのHEIGHT属性が利かない

    TABLEの中にTABLEを入れ子にしてHTMLを作ったのですが、 外のTABLEのHEIGHTを変動にして、内のTABLEのHEIGHTを100%にしてもHEIGHTがくっつきません。 検証したところ、IE5.0(Mac)は利くようですが、IE5.5(Win)は100%が利きません。 そういう仕様なのでしょうか？しょうがないのでしょうか？ それともCSSで解決できるものでしょうか？ ご存じの方いらっしゃいましたらご教授ください。 参考に、ソースをご覧ください。 <HTML> <HEAD> <TITLE>SAMPLE</TITLE> </HEAD> <BODY> <TABLE WIDTH="600" HEIGHT="600"> <TR> <TD> <TABLE WIDTH="500" HEIGHT="100%"> <TR> <TD>SAMPLE</TD> </TR> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML>

    • ベストアンサー
    • HTML
  • テーブルの中にiframe

    テーブルの中にiframeをしているのですが どうしてもボタンが右側に少しはみ出ますし iframeは縦400pxを超えるページを表示すると 縦スクロールバーが表示されますが それも右側にはみ出ます。 どうにか800pxの中に収まらないものでしょうか？ また、ボタンのボーダを下記ソースでは消していますが デフォルトで表示される立体感のあるボタンのまま 800pxの中に収めたいです。 HTML5、CSS2.1です。 ご相談お願いします。 <table> <tr style="width: 800px; height: 50px"> <td><input type="button" value="1"/></td> <td><input type="button" value="2"/></td> <td><input type="button" value="3"/></td> <td><input type="button" value="4"/></td> <td><input type="button" value="5"/></td> </tr> <tr style="width: 800px; height: 400px"> <td colspan="5" style="width: 800px; height: 400px"> <iframe src="hoge.htm"></iframe> </td> </tr> <tr style="width: 800px; height: 50px"> <td colspan="5" style="width: 800px; height: 50px"> <p>hoge</p> </td> </tr> </table> ------------------------------------------------------------ table { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } tr td { padding: 0px; margin: 0px; border-style: none; border-width: 0px; } input { border-style: none; border-width: 0px; padding: 0px; margin: 0px; color: Red; width: 160px; height: 50px; font-size: 20px; font-family: HGS明朝B; background-color: transparent; } iframe { padding: 0px; margin: 0px; border-style: none; border-width: 0px; background-color: transparent; width: 800px; height: 400px; }

    • ベストアンサー
    • HTML
  • テーブルを作ったんですが…

    はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>

  • スタイルシートでのデザイン

    HTMLを組む際、今までレイアウトはtableタグで組んでいたのですが、CSSで組もうと思っています。 例えば、 <table align="center"> <tr> <td colspan="2" width="500" height="80">aaa</td> <td rowspan="2" width="300" height="200">bbb</td> </tr> <tr> <td colspan="2" width="500" height="20">ccc</td> </tr> <tr> <td width="200" height="100">ddd</td> <td width="300" height="100">eee</td> </tr> </table> をスタイルシートで配置しようと思い、 <div align="center" style="width:800px"> <div style="float:left;width:500px;height:80px;background-color:#ff9999">aaa</div> <div style="float:right;width:300px;height:200px;background-color:#9ff999">bbb</div> <div style="float:left;width:500px;height:20px;background-color:#9999ff">ccc</div> <div style="float:left;width:200px;height:100px;background-color:#99ffff">ddd</div> <div style="float:center;width:300px;height:100px;background-color:#ffff99">eee</div> </div> としたのですが、センタリングされないのと、eeeの箇所がdddの隣に来ないで次の行に移ります。 うまく出来ないので、どなたか教えて下さい。お願いします。

    • ベストアンサー
    • CSS
  • テーブルの隙間をなくす

    テーブルの中に作ったテーブルを一番上に配置したいのですが、どうすれば良いでしょうか？テーブルの下で改行すると上に行くのですが、それだとしたがあまります。 ＨＴＭＬはこれです。よろしくお願いします。 <table width="800" border="0" cellspacing="0" cellpadding="0" height="600"> <tr> <td>　<TABLE width="100%"> <TBODY> <TR> <TD width="241" height="2">　　</TD> <TD width="511" align="right" valign="bottom" style="font-size : 8pt;" height="2">　</TD> </TR> </TBODY> </TABLE> </td> </tr> </table>

    • ベストアンサー
    • HTML
  • カラムで段組と段組の間に隙間が埋ができる

    カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する