IEで背景透明テーブル内の文字が表示されない問題
- dreamweaverMXを使って制作したHPでは、firefoxでは表示されるがIEでは透明なテーブル内の文字が表示されないという問題が発生しています。
- また、外部CSSでスクロールバーのスタイルも変えていますが、IEでは表示されますがfirefoxではデフォルトのスタイルになってしまいます。
- これらの問題を解決する方法について情報をお探しです。
- ベストアンサー
IEだと背景透明テーブル内の文字が見れない
dreamweaverMXを使ってHPを制作しました。 firefoxだと表示されるのですが、IEだと透明なテーブル内の文字が表示されません。以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Script-Type" content="text/css"> <meta name="keywords" content="○○"> <title>○○</title> <style type="text/css"> <!-- body { background: url(../sozai/haikei_info_05.gif) fixed; } p { line-height: 150%; } </style> <link href="../scrollber.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="50" topmargin="50"> <table width="400" border="0" cellpadding="10" cellspacing="0" style="filter:alpha(style=0,opacity=0)"> <td height="441" nowrap><p align="left"><font size="-1">文章文章文章</font></p></td> </table> </body> </html> 外部CSSでスクロールバーも変えているのですが、こちらはIEは表示されてもfirefoxではデフォルトになってしまいます。 よろしくお願いいたします。
- -suteki-
- お礼率56% (26/46)
- HTML
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは、ちょっと勘違いしてますね まずfilter:alphaはIE独自拡張ですのでIEにしか効果がありません。 firefoxとoperaにも追加するには -moz-opacity:0.00; /* Mozilla(たぶん廃止になった) */ opacity:0.00; /* Opera */ （dreamweaverからボタンひとつで入力できるプロパティじゃないと思うのでどこからから探してきたんだと思いますが、そこに書いてなかったですか？） そしてopacity=0になってるのでIEだけtableが表示されなくなります。 tableの中身もtableの一部なので表示されなくなります。 次に、スクロールバーですが scrollbar-base-colorなどもIE独自拡張なのでIEにしか効果がありません
関連するQ&A
- 表示すると文字化けします
下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- CSSでテーブルを中央にする方法
CSSでテーブルを中央にする方法を教えてください いろいろなサイトで見た通りにしたのですが、どうしてもFirefoxではテーブルが中央によりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="description" content=""> <meta name="keywords" content=""> <title>テーブル</title> <style type="text/css"> <!-- .tableley { margin-left: auto; margin-right: auto; text-align: center; } //--> </style> </head> <body> <div class="tableley"> <table cellpadding="0" cellspacing="0" summary="テスト" border="1"> <caption style="font-weight: bolder;">てすと</caption> <tbody> <tr> <td>てすと1</td> <td>てすと2</td> <td>てすと3</td> <td>てすと4</td> </tr> <tr> <td>てすと5</td> </tr> </tbody> </table> </div> </body> </html> 何が悪いのでしょうか？ <div align="center">にするしか方法がないのでしょうか？ 文法検証すると<div align="center">はあまりよくない使い方と指摘されてしまいます よろしくお願いします。
- ベストアンサー
- HTML
- Firefoxでテーブルの外側の背景色が出ない
IE8では中央にテーブルが配置し外側の背景色が出るのですが、Firefoxではテーブルの位置も左側に寄り、外側の背景色がテーブル内と同じ白一色になってしまうのですが、どう直したらいいのでしょうか。 以下、ソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 9.0.0.0 for Windows"> <TITLE>○○○</TITLE> <STYLE TYPE="text/css"> <!-- BODY {background:'palegreen';color:#000000;text-align:center;} TABLE {background:#FFFFFF;color:#000000;} CAPTION {background:#FFFFFF;color:#000000;text-align:left;font-weight:bold;} .tmscntr {text-align:center;font-size:14px;font-family:'Times New Roman';} .tmsrght {text-align:right;font-size:14px;font-family:'Times New Roman';} .tmslft {text-align:left;font-size:14px;font-family:'Times New Roman';} SPAN {margin-left:20PX;"}}}}}}}} .cntr {text-align:center;} .rght {text-align:right;} .lft {text-align:left;} A:visited {color:#000099;} A:active {color:#FFFFFF;background:#CCCCFF;} A:hover {color:#DCDCDC;background:#000099;} --> </STYLE> </HEAD> <BODY text="#000000" bgcolor="#FFFFFF" link="#ff3535" vlink="#808080" alink="#ff8040"> <DIV><BR> <TABLE cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION><TR><TD> <TABLE border="0" cellpadding=5 cellspacing=0><CAPTION>○○○</CAPTION> <TR><TD><b>(1)○○○</b></TD><TD><b>○○○</b></TD><TD colspan="3"><b>○○○○○○</b> <b><font color="#ff0000">○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</TD><TD><b>○○○○○○○○○</b></TD></TR> <TR><TD><br><b>(2)○○○</b></TD><TD><br><b>○○○</b></TD><TD colspan="3"><br><b>○○○<b><font color="#008800">○○○○○○○○○</b></font></TD></TR> <TR><TD></TD><TD style={text-indent:24px;}><b>○○○</b></TD><TD><b>○○○○○○○○○</b></TD></TR> <TABLE align="center"><br><br><br> </TABLE> </TD></TR></TABLE></DIV> </BODY> </HTML>
- ベストアンサー
- レンタルサーバ・ASP
- テーブルが二つ横に並んでしまう
タイトルの通りりです。 どうして横にならんでしまうのか、いまいち よくわかりません。 どなたか教えて頂けないでしょうか。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML LANG="JA"> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="text/html; charset=Shift_JIS"> <META HTTP-EQUIV="CONTENT-STYLE-TYPE" CONTENT="text/css"> <TITLE></TITLE> </HEAD> <STYLE TYPE="text/css"> <!-- BASEFONT { font-size: x-small; } BODY { background-image: url( top/back_line.gif ); background-repeat: repeat-y; margin-left: 30px; } --> </STYLE> <BODY BGCOLOR="#9900CC" TEXT="#FFCCFF" LINK="#FF66CC" ALINK="#66CCFF" VLINK="#000066"> <BASEFONT FACE="Verdana, ＭＳ Ｐゴシック, Osaka"> <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ --> <TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" ALIGN="LEFT" WIDTH="550"> <TR> <TD>aaa</TD><TD>bbb</TD> </TR> <TR> <TD>eed</TD><TD>sss</TD> </TR> </TABLE> <BR> <TABLE BORDER="3" CELLSPACING="3" CELLPADDING="3" ALIGN="LEFT" WIDTH="550"> <TR> <TD>aaa</TD><TD>bbb</TD> </TR> <TR> <TD>eed</TD><TD>sss</TD> </TR> </TABLE> <!-- ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ --> </BODY> </HTML>
- ベストアンサー
- HTML
- tableの分割画像 隙間について
いつもお世話になります。 助かります。 さてテーブル内画像分割についてお尋ねいたします。 画像分割をいたしたく、４分割にphotoshopでスライスいたしました。 確認画面では奇麗に表示されますが作業のサイトに収めるとcenterに 縦に１ピクセルのぐらいのラインの隙間が入ります。 サイト内の記述は.... 例えばこんな感じにしています。 <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <linkrel="stylesheet"type="text/css"href="css/xx.css" /> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/xxx.css"> <link rel="stylesheet" type="text/css" href="css/sxxx.css"> <link rel="stylesheet" type="text/css" href="css/xxxxx.css" > <link rel="stylesheet" type="text/css"href="css/xxxxxxx.css" > <SCRIPT LANGUAGE="JavaScript"> <!-- function subwin1(){ window.open("shop01.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} function subwin2(){ window.open("shop02.html", "01"," width=600px,height=700px,scrollbars=yes"); scrollbars=yes} --> </SCRIPT> <style type="text/css"> <!-- * { font-family: Verdana, Helvetica; font-size: 10pt; margin:0; padding:0; } h2.s{ margin:0; padding:0; font-size:13px; font-family: "ＭＳ Ｐ明朝", "細明朝体", "ヒラギノ明朝 Pro W3"; font-weight:100; line-height: normal; color: #999999; } .style6 {font-size: 10px} .style7 {font-size: xx-small} .style8 {color: #376BA0} table { width:100%; height:auto; padding:0; margin:0; } --> </style> </hade> <body>....................]........... ........省略......... <div id="photo"> <table border=0 cellspacing=0 cellpadding=0 > <tr> <td><img src="../13.jpg" width="263" height="114" alt""></td> <td><img src="../10.jpg" width="292" height="114"/></td> </tr> <tr> <td><img src="../11.jpg" width="263" height="91"/></td> <td><img src="../12.jpg" width="292" height="91"/></td> </tr> </table> </div> <!----- photo ead-----> です。 他のものと競合するのでしょうか？ どうしてこうなるのでしょうか？ 隙間をとり前に進みたいのですが教えて頂けませんか？ お願いいたします。 表現 伝え方に誤りがありますればご容赦くださいね。
- 締切済み
- その他([技術者向] コンピューター)
- tableの縦横センタリングについて
お世話になります。 html4.01のhtmlのDOCTYPEですが、URL付きに変更しました。 ＜!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"＞ ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> そうしたところ、tableのセンタリングがされなくなってしまいました。 css指定で、横のセンタリングはできたのですが 縦方向がどうしても、topの位置になってしまいます。 ネット検索したところ、いろいろ解決策があるのですが、どれを試しても どうしてもうまくいきません。 どこがダメなのか、アドバイスお願いできないでしょうか。 ソースコードを以下に記します。 tableのborde色を赤にしています。 この赤が、画面横縦に中央に表示されるようにしたいのです。 画面サイズを変更しても。 よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Language" content="ja"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <style type="text/css"> <!-- body{ background-color:#f5f5dc; } .container { display: table; width:100%; height:100%; } .contents { display: table-cell; vertical-align: middle; } --> </style> <title>test</title> </head> <body> <div class="container"> <div class="contents"> <table style="width:100%;height:100%;border:1px solid red;" cellpadding="0" cellspacing="1" summary="test"> <tr> <td style="text-align:center;vertical-align:middle;"> <input type="button" value="新規"></td> <td style="text-align:center;vertical-align:middle;"> <input type="button" value="変更"></td> </tr> <tr> <td style="text-align:center;vertical-align:middle;" colspan="2"> <input type="button" value="戻る"></td> </tr> </table> </div> </div> </body> </html>
- ベストアンサー
- CSS
- （超初心者）ウインドウサイズを小さくするには。
今、HPB9.0にて、以下のページに対し、 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="0"> <TBODY> <TR> <TD height="0" align="center" width="248"><FONT color="#ff0000">パスワードが誤っています。<BR> 再度入力して下さい。</FONT></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 以下のような記述で、サイズを指定したいのですが、 <script type="text/javascript"> <!-- window.resizeTo(300, 300); // --> </script> どこに（どのように）記述をすれば良いでしょうか？ ご教示下さい。
- ベストアンサー
- ホームページ作成ソフト
- 背景画像のＸ方向繰り返し表示を止めたい
掲題の通り、Ｘ方向のみ背景画像が繰り返し表示されてしまいます。 テキストスペースも中央部のみの640ピクセルに収まるようにしていますが、背景画像の記述方法が解りません。 制御部分のソースは下記の通りです。 宜しくお願いします。 <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 6.5.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <STYLE type="text/css"> <!-- body { background-image: url(img/bg.jpg) background-repeat:no-repeart; } --> </STYLE> </HEAD> <BODY text=#333333 background="img/bg.jpg"> <TABLE cellspacing="0" width="630" align="center" border="0"> <TBODY> <TR> <TD align=middle> <TABLE width="100%" border="0"> <TBODY> <TR> <TD align=center bgColor=#228b22><STRONG><FONT color=#ffffff>『ご挨拶』</FONT></STRONG></TD></TR>
- ベストアンサー
- HTML
- tableのheight指定が効かない
tableの高さを固定したく、heightとoverflowを指定したんですが、 tableに記述したソース分の大きさ（高さ）になり、スクロールバーが表示されません。 /*----外部CSS----*/ .sample{ color: #ffffff; background-color: #000000; height: 500px; width : 90%; overflow:scroll； } /*----ソース-----*/ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" type="text/css" hrefstyle.css"></head> <body> <table class="sample"><tbody><tr> <td class="a1"></td><td class="a0"></td><td class="a2"></td></tr><tr> <td class="a0"></td><td class="a0"> <div class="text">本文（heightが700pxくらいの内容）</div> </td><td class="a0"></td></tr><tr> <td class="a3"></td><td class="a0"></td><td class="a4"></td> </tr></tbody></table> ※tdのclassはテーブルのふちに用いてる画像を指定してあります。 </body> </html> 解決方法をご存知の方、よろしくお願いします。
- ベストアンサー
- HTML
- font-familyで書式が指定しても変化しない
cssでfont-familyを指定しているのですが、 デフォルト書式のまま変化しません。 原因が分からないのですが、可能性として どんなことが考えられますか？ ちなみにエディタはTeraPadです。 html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <head> <body> <p>テスト</p> </body> </head> css p{ font-family:ＭＳ明朝; }
- ベストアンサー
- CSS
お礼
なかなか難しいですね、勉強になりました。 ありがとうございました。