IEのテーブル表示の不具合について

このQ&Aのポイント
  • IEでテーブルの表示が崩れる問題について調査しています。
  • 特に2列のテーブルの右側の部分が左側にかぶって表示される問題が発生しています。
  • WindowsXP(HomeEdition)・SP2インストール済・IE6の環境で問題が発生しています。
回答を見る
  • ベストアンサー

IEのテーブル表示の不具合でしょうか・・・?

IEで正しく表示されているものが、別のページへ行って「戻る」ボタンを押すと、テーブルの表示が崩れてしまいます。 2列のテーブルの右側の部分が左側にかぶって表示されてしまうのです。 参考までにその部分のソースを以下に記述します。 何か気になる点などお気づきになられたら教えてください。 <table width="320" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="200"> <table width="200" border="0" cellspacing="0" cellpadding="5"> <tr> <td class="px12"> ・<a href=>あああああ</a><br> ・<a href=>いいいいい</a><br> ・<a href=>ううううう</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>えええええ</a><br> <hr width="160" size="1" noshade align="left"> ・<a href=>おおおおお</a><br> <hr width="160" size="1" noshade align="left"> </td> </tr> </table> </td> ※以下から左側のテキストにかぶって表示されてしまいます。 <td width="120"><a href=><img src="images/画像.gif" width="120" heigt="180" border="0"></a><br> <table width="120" border="0" cellspacing="2" cellpadding="0"> <tr> <td valign="top"><img src="images/矢印画像.gif" width="11" height="11" border="0"></td> <td class="px12"><a href=>テキストテキストテキスト</a></td> </tr> </table> </td> </tr> </table> 以下が私の環境です。 WindowsXP(HomeEdition)・SP2インストール済・IE6 よろしくお願いします。

noname#69111
noname#69111

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

  • ベストアンサー
回答No.1

こんにちは。 掲載されているHTMLに関しては、問題ないように思います。 (同環境でテストしてみました) ほかの場所を疑ってみてください・・・。 (^^ゞ

noname#69111
質問者

お礼

ご回答ありがとうございます。 やはり問題はないですよね。 その後、その部分のテーブルを組みかえたりなど色々試してはいるのですが、 やはり画像がテキストの上にかぶってしまいます(T_T) ご指摘いただいたとおり、他の場所を調べてみますね。

noname#69111
質問者

補足

ちなみに私も以下の環境で試したのですが同じような不具合は起こりませんでした・・・。 ・WindowsXP(ネスケ7.1) ・windows98(IE4.0、ネスケ4.5) ・Mac9.2(IE5、ネスケ7、ネスケ6.1、ネスケ4)

関連するQ&A

  • ヤフオクのテンプレートでバックグラウンドを使いたい

    今、オークション用のテンプレートを作ってるのですが、テーブルの背景に、 <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> と言った感じで画像を背景に配置したいと考えていますが、どうやってもうまくいきません。 プレビュー表示の段階で、ソースコードを見てみたのですが、ちゃんと設定されているにもかかわらず、背景画像だけが表示されません。 別の方法で、 <div style="background-image:url(http://www.000.com/000.png);"> でも試して見ましたが、同じ結果でした。 背景画像の上に「商品説明」などの画像を重ねて配置したいので、どうにか上手くできる方法がありましたら是非教えて下さい。 ※上に重ねる画像だけが表示されます。 参考までに今編集中のソースを貼っておきます。 <center> <table width="900" height="1000" border="0" cellspacing="0" cellpadding="0" background="http://000.com/000.png"> <tr> <td align="center" valign="top"><br /> <center> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/001.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 商品説明 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/002.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 発送方法 </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/003.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> お支払い方法 </p></font></td> </tr> </table> <br /> <br /> <br /> <table width="650" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="http://000.com/004.png"></td> </tr> </table> <table width="650" border="0" cellspacing="0" cellpadding="5"> <tr> <td><font color="#a00e15"><p align="left"> 注意事項 </p></font></td> </tr> </table></td> </tr> </table> </center>

  • Dreamweaverのデザインで表示がおかしい時

    IEだと綺麗に表示されるけど、Dreamweaverのデザインで見ると表示がおかしい時って結構あり困ってます。 ソースフォーマットとかやってもやはり駄目です。 今回の場合、どのタグが悪そうでしょうか? <HTML> <HEAD> <META HTTP-EQUIV="CONTENT-TYPE" CONTENT="TEXT/HTML; CHARSET=EUC-JP"> </HEAD> <BODY> <BR> <BR> <BR> <TABLE align="center" cellSpacing=0 cellPadding=0 width="95%" bgColor=#0066cc border=0> <TBODY><TR><TD> <TABLE cellSpacing=2 cellPadding=1 width="100%" border=0> <TBODY> <TR bgColor=#0066cc> <TD align=middle><SMALL><B><FONT color=#ffffff> テキストツール </FONT></A></B></SMALL>&nbsp; </TD></TR> <TR bgColor=#ffffff> <TD align=middle> <TABLE height="400" cellSpacing=0 cellPadding=1 width="95%" border=0> <TBODY> <TR valign=top> <TD width="100%" valign="center" align="center"> <BR><A>トップページ</A><BR><BR> </TD> </TR> <TR valign=top> <TD width="100%" valign="top" align="center"> <A HREF="list">あ</A><BR><BR> <A HREF="clist">い</A><BR><BR> <A HREF="slist">う</A><BR><BR> </TD> </TR> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE> </BODY></HTML>

  • テーブルが二重で表示されてしまいます。

    <TABLE border=1 width="50" rules="cols" align="left" cellspacing="1" cellpadding="0" bordercolor="black"> <TR bgcolor="white"><TD><a href="test1.html">test</a></TD></TR> <TR bgcolor="white"><TD><a href="test2.html">test</a></TD></TR> </TABLE> このHTMLをIEで開くと、テーブルが二重に表示されてしまいます。 一本にしたいのですが、うまくいかなくて困っています。 どのようにすれば一本に出来るのでしょうか… どなたか詳しい方教えてください。 よろしくお願いします。

    • ベストアンサー
    • HTML
  • Mac IEのバグなのでしょうか?

    TMEspionです。 <table border="0" cellpadding="5" cellspacing="5"><tr><td width="100" align="left" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="center" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td><td width="100" align="right" bgcolor="#999999"><table width="50" border="0" cellpadding="5" cellspacing="5"><tr><td align="left" bgcolor="#FFFFFF">左</td></tr><tr><td align="center" bgcolor="#FFFFFF">中</td></tr><tr><td align="right" bgcolor="#FFFFFF">右</td></tr></table></td></tr><tr><td align="left" bgcolor="#999999">左</td><td align="center" bgcolor="#999999">中</td><td align="right" bgcolor="#999999">右</td></tr></table> --------------------------------- 上記のソースの様に、テーブルを縦2段、横2列にセルを作り、上段はテーブルタグ、下段はテキストでそれぞれalign属性をleft、center,rightと設定しています。 ところがInternet Explorer 5.2 for Macで見ると、 上段右のテーブルタグは「align="right"」の効果が出ていません。 この質問を呼んでいる回答者様には、ブラウザでどう表示されるんでしょうか? どう表示されたかという結果とブラウザ名を教えて下さい。

    • ベストアンサー
    • HTML
  • テーブルの線について

    下記のようなHPをつくっています。 一番大きなテーブルの上下の線を消すにはどこをどのようにすればいいのでしょうか? ご回答いただけると嬉しいです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS"> <title></title> <style type="text/css"> <!-- BODY TD { FONT-SIZE: 10pt } A.menu:link,A.menu:visited { BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #666666 1px solid; COLOR: #ffffff; PADDING-TOP: 12px; BORDER-BOTTOM: #666666 1px solid; HEIGHT: 40px; BACKGROUND-COLOR: pink; TEXT-DECORATION: none } A.menu:hover,A.menu:active { BORDER-RIGHT: #ffffff 1px ridge; PADDING-RIGHT: 15px; BORDER-TOP: #ffffff 1px ridge; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ffffff 1px ridge; COLOR: gray; PADDING-TOP: 12px; BORDER-BOTTOM: #ffffff 1px ridge; HEIGHT: 40px; BACKGROUND-COLOR: #ffffff; TEXT-DECORATION: none } --> </style> </head> <body bottommargin="0" background="sozai/kabegami.gif" topmargin="0"> <table height="100%" cellspacing="1" cellpadding="1" width="730" align="center" bgcolor="#c0c0c0" border="0"> <tr> <td bgcolor="#ffffff" colspan="2"> </td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" height="120" background="sozai/title_back.gif"> <p align="center"><img height="50" alt="" src="sozai/title.gif" width="369" border="0"></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2" valign="top" align="left"><br> <table cellspacing="0" cellpadding="0" width="155" align="left" border="0"> <tr> <td> <table style="MARGIN-TOP: -2px; FONT-WEIGHT: bold; WIDTH: 146px; FONT-FAMILY: 'mspゴシック'; HEIGHT: 241px" cellspacing="3" cellpadding="0" width="146" align="center" border="0"> <tr> <td style="BORDER-RIGHT: #666666 1px solid; PADDING-RIGHT: 15px; BORDER-TOP: #666666 1px solid; PADDING-LEFT: 15px; PADDING-BOTTOM: 10px; BORDER-LEFT: #666666 1px solid; PADDING-TOP: 10px; BORDER-BOTTOM: #666666 1px solid" align="center"><font color="gray">Top</font></td> </tr> <tr> <td><a class="menu" href="">News</font></a></td> </tr> <tr> <td><a class="menu" href="">作品集</font></a></td> </tr> <tr> <td><a class="menu" href="">お教室情報</font></a></td> </tr> <tr> <td><a class="menu" href="">Shopping</a></td> </tr> <tr> <td><a class="menu" href="">お友達サイト</a></td> </tr> </table> <p align="center"> <img src="http://counter1.fc2.com/counter_img.php?id=47426"><br> </p></td></tr></table> <table cellspacing="1" bgcolor="#c0c0c0" border="0" cellpadding="20" width="565" align="left"> <tr> <td bgcolor="#ffffff" ><br> <br><br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br><br> <br> </td> </tr> </table> </td></tr> <tr> <td bgcolor="#ffffff" colspan="2"> <p align="center"> <font color="#808080">Copyright &copy; 2005-2007 princess-ichigo, All rights reserved.</font></font></p></td> </tr> <tr> <td bgcolor="#ffffff" colspan="2"><br> </td> </tr> </table> </body></html>

    • ベストアンサー
    • HTML
  • IEでのテーブル幅

    質問させて下さい。 テーブルのソースが以下のようになっています。 <table width="450" height="300" border="1" cellpadding="10" cellspacing="0" bordercolor="#333333"> <tr> <td width="225" height="150" align="left" valign="top">あああああああああああああああああああああああ</td> <td width="225" height="300" rowspan="2" background="haikei.jpg">&nbsp;</td> </tr> <tr> <td width="225" height="150" align="left" valign="top">いいいいいいいいいいいいいいいいいいいいいい</td> </tr> </table> このときに、ファイアーフォックス3での表示と、IE8での表示に 違いが大きいんです。(IEの表示の方が縦が長くなります) このままだと右側の背景画像の高さと左のテキストの高さが あいません・・・それぞれのテーブル幅などの指定はきちんと しているつもりなのですが、どうすれば良いのでしょう。 CSSの利用はなしとして、どなたか教えて頂けないでしょうか。

    • ベストアンサー
    • HTML
  • HTMLでテーブルを作成すると上に大きなスペースが空いてしまいます。

    HTMLでテーブルを作成すると上に大きなスペースが空いてしまいます。 色々ネットで検索して他の方がおっしゃる通りためしてみたのですができなくて困っています。 できないのは下記の二点です。 間違ってるところがあればご教授下さい。 1. <table width=600 border="5" bgcolor=#FFC0CB> 2. <table width=800 border=0 cellpadding=30 cellspacing=0 bgcolor=#FFB6C1><tr> <td width=0%><br></td></tr><tr> <td width=0%><br></td> <td align=left> <font color=#696969 size=3> よろしくお願いしますm(__)m

  • tableをcssで表記したい

    下記のhtmlのスタイル部分をcssで表記したいのですが、 どのようにすればよいのでしょうか? tableの種類が一つの場合はできるのですが・・・ <table width="100" border="1" cellpadding="1" cellspacing="1" bgcolor="#AAAAAA"> <tr> <td width="30" bgcolor="#FFFFFF">a</td> <td ">b</td> </tr> </table> <br> <table width="50" border="2" cellpadding="2" cellspacing="2" bgcolor="#BBBBBB"> <tr> <td width="25" bgcolor="#CCCCCC">c</td> <td>d</td> </tr> </table>

  • テーブルの枠の中にテーブルを設置

    TOPページに下記のような大きな4等分の枠なしテーブルを作り、中にテーブルを埋め込みたいと思っています。 <TABLE border="0" width="700" height="500"> <TR> <TD>●1</TD> <td>●2</td></TR> <TR> <TD align="left" valign="bottom">◎1</TD> <td align="center" valign="middle"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="8" cellspacing="0" bgcolor="greenyellow"><tr><td align="center"> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="4" cellspacing="0" bgcolor="#ccff99"><tr><td align="center"><font color="mediumseagreen">★ ★ ★</font> おしらせ <font color="mediumseagreen">★ ★ ★</font></td></tr> <tr><td bgcolor="white"> <textarea cols="28" rows="5"> ここに文字 </textarea> </td></tr></table> <br> <table bordercolordark="white" bordercolorlight="black" border="1" cellpadding="3" cellspacing="0" bgcolor="white"><tr><td bgcolor="white"> 最終更新 ≫ </td></tr></table> </td></tr></table> </TR> </TABLE> (HEADの間にスタイルシートを挿入します。) このように書くとテーブルを入れた場所の親テーブルが大きく広がってしまいます。 広がらずにテーブルを形成する方法をご教授下さい。 初心者で申し訳ございません。

    • ベストアンサー
    • HTML
  • ホームページのテーブルをWordに貼り付けると左にづれる?

    以下のコードのHTMLで作られたテーブルをブラウザーに表示→コピー→Wordに貼り付けると、テーブルがWordの文字列開始位置よりも左側にづれてペーストされるのですが、どのようにして回避できるのでしょうか? コード: <table width="550" border="1" cellspacing="0" cellpadding="40"> <tr> <td width="466" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="118"> 表見出し行 </td> <td width="266"> データ </td> </tr> </table> どうやら、テーブルのcellpaddingが関係しているようで、cellpaddingの値を以下のコードのように小さくすると、テーブルをWordに貼り付けたときに文字列開始位置よりも左にずれる割合は小さくなります。 コード: <table width="550" border="1" cellspacing="0" cellpadding="5"> <tr> <td width="536" colspan="2" align="center"> 表タイトル </td> </tr> <tr align="left" valign="top"> <td width="188"> 表見出し行 </td> <td width="336"> データ </td> </tr> </table> ただ、それでも少し左にずれることには変わりませんし、cellpaddingの値が大きなテーブルをWordに貼り付けるときの回避策とはなりません。 どのようにしたら、cellpaddingの値が0ではないホームページのテーブルをブラウザーからコピーしWordに貼り付けたとき、Wordの文字列開始位置より左にずれないようにできるのでしょうか? よろしくお願いします。