• ベストアンサー

ALIGN="RIGHT"がIE6でくずれます・・・。

タイトルに書かれているように、テーブルタグ内で <td align="right"><img src="?????"></td> とするとIE6では右によらず、デフォルトにままになってしまいます。マックのIE5.1,NN6.2, LINUXのNNではうまくいくのですが、どうしてでしょうか? IEでくずれるので正直こまっています。 あと、文字のサイズ指定は<FONT SIZE=....>よりもスタイルシートを使ったほうがいいのでしょうか?

  • loto6
  • お礼率47% (8/17)
  • HTML
  • 回答数4
  • ありがとう数1

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

  • ベストアンサー
  • callhiro
  • ベストアンサー率35% (54/152)
回答No.4

試してみましたが、テーブル要素の幅がうまく指定されていない のがうまくいかない原因のようですね。 2つ修正するとうまくいくと思います。 【1つ目】 全体で幅700のテーブルでと指定していますが、 一行の5つのセルを「2 1 2」とくっつけて3つのセルがあり、 両端の幅をそれぞれ50と指定されていますが、真中は空白ですよね? そこに試しにwidth=600と書きましょう。 いつもこういう固定的な幅指定はしないのですが、 省略してはいけないようです。 【2つ目】 数字の5と7が入っているセルが上で指定している幅とあっていません。 width=350となっているところを、それぞれwidth=50と修正してください。 これでセンタリングや右寄せはうまく見えると思います。 これまで右端によっていないように見えていたのは、 実際にはもっと広い幅で表示されているのに、 それよりも小さい範囲の幅のなかで右端によっていたからのようです。 こんな説明でわかりましたか?

loto6
質問者

お礼

ありがとうございました。 ちょっと複雑でわかりにくかったと思いますが、 上の1と3の幅指定、真中の5と7の幅指定、一番下の幅指定 やはりこれらが違うのが間違いだったようですね。 真中の幅が一番重要だったのでこっちにあわさせたのですが それでうまく行きました。 あとは帰って家のパソコンで崩れてないこと祈ります。 どうもありがとうございます。

その他の回答 (3)

  • Adams2001
  • ベストアンサー率67% (70/103)
回答No.3

WindowsのIE6で、BODY直下のTABLE要素ではまったく問題なく表示されます。 そのTD要素が含まれるTABLE要素だけを別ファイルにコピーして表示してみてはどうでしょう。その表内の記述が問題なのか、その外側の要素との兼ね合いなのか、までは判明すると思うのですが。 >あと、文字のサイズ指定は<FONT SIZE=....>よりもスタイルシートを使ったほうがいいのでしょうか? <FONT SIZE=・・・>を単純に<SPAN style="font-size:・・・">に置き換える、ということなら、ページの作者、読者双方に何のメリットもありませんので変更する必要はないと思いますよ。

loto6
質問者

補足

みなさん、回答ありがとうございます。 みなさんの回答を読んだ限り、はっきり言ってどの回答も当てはまりそうで困っております。 今の時点ではっきりしている事は、 僕の環境はマックで、IE5.1,NN6.2(いづれもfor mac)では完全動作 学校にあるwinマシンのIE6ではALIGN属性がまったく有効ではない(centerなどもでした。。。) Linux NN4.75ではフォントサイズが指定できない。その他有効(これはしょうがないのかな?) !DOCTYPEはもともと指定していませんでした。 (初耳でした、これは書かなくてもよいのでしょうか?) で、実際簡単な物を作って見てみたらALIGN="RIGHT"がうまく行きました。 これって、どっかで終了タグがないからなのでしょうか? かなり複雑なテーブルを作ってしまったので自分でも自身がありません。 もしよろしければ、下に書いてあるのが正しいか試していただけませんか? ご面倒かけてすいません。 <html> <head> <TITLE></TITLE> </head> <body bgcolor="gray"> <table border="1" width="700" height="980" bgcolor="white" align="center" cellpadding="1" cellspacing="1" > <tr> <td width="50" height="50" colspan="2">1</td> <td>2</td> <td width="50" height="50" colspan="2" align="right">3</td> </tr> <tr> <td width="700" height="100" colspan="5">4</td> </tr> <tr> <td width="330" colspan="2" rowspan="3" valign="top">5</td> <td width="10" rowspan="3" valign="middle" align="center">6</td> <td colspan="2" align="right" height="350" width="360">7</td> </tr> <tr > <td colspan="2" height="10" align="left" >8</td> </tr> <tr> <td colspan="2" align="center" height="370">9</td> </tr> <tr> <td colspan="5" width="700" height="50">10</td> </tr> <tr> <td width="50" height="50" colspan="2">11</td> <td width="10">12</td> <td width="50" height="50" align="right" colspan="2">13</td> </tr> </table> </body> </html>

  • shiba1
  • ベストアンサー率41% (10/24)
回答No.2

!DOCTYPEが関係しているとか何とか??? IE6だと、入れ子テーブルで、親テーブルのalign属性を受ける。 とか?そういう話題をちょっと耳にしました。 私は使っていないのでなんとも分かりませんが、 参考URLを見てみて下さい。 思いっきり関係ないかも・・・。

参考URL:
http://hp-design.net/announce/ie6_ie55.html
loto6
質問者

補足

回答ありがとうございます。 参考URL見させていただきました。 まったくDOCTYPEは書いてなかったのですが、 書くとテーブルの使い方が制限されてしまうと言う事でしょうか?

  • callhiro
  • ベストアンサー率35% (54/152)
回答No.1

今試してみたんですけど、IE6でもちゃんと右寄りに表示されましたけどね~。 マックのIE6なんですか? 画像しかないテーブルでしたら <th align="right"><img src="?????"></th> で試してみてはいかが? <th>は標準でセンタリングされるはずなんですけど。 もしかしたら、その<td>自体ではちゃんと右端に表示されているけど それより外側のタグがなんか影響して右に寄ってないように見えるのかも。

loto6
質問者

補足

回答ありがとうございます。 学校じゃないと確認できないので、返事が遅れてすいません。 簡単なもので試してみたのですが、表示できました。。。 なんか、感じではテーブルタグの書き方がおかしい気がしてきました。 上の方の回答で簡単なソースを載せていますので、試してもらえるとうれしいです。よろしくお願いします。

関連するQ&A

  • IE8とsafariでの表示、余白の違い

    IE8では、きれいに表示されますが、Safariでは、表示が微妙に崩れます。画像2が少し内側に表示されます。 そこで、tableの幅を620から650などに広げる、またはhspace="7"を2などに狭くすると指定位置に表示されますが、どちらもIE8より画像の右側の余白が広くなります。 IE8とSafariでは、余白の捉え方が違うということは調べたんですが、初心者なので、なかなか上手にできません。 双方に対応するには、どのような方法がありますか? アドバイスよろしくお願いいたします。 <table width="620" border="0" cellspacing="1" cellpadding="5"> <tr><td> <font size="3" color="DDFFFF">写真1</font></font><br /><br /> ひまわり<br /> 11111111111111111111<br/> <img src="http://画像1.jpg" height="310" width="300" border="0" alt="" hspace="7" vspace="5" align="left" /> <br /> <br /><br /> <br /><br /> <br /><br /> <br /> <font style="background:ff9900"> <font size="3" color="DDFFFF">写真2</font></font><br /><br /> あさがお<br /> 11111111111111111111<br/> <img src="http://画像2.jpg" height="303" width="300" hspace="8" vspace="7" align="right" /> <br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /> <font style="background:ff9900"> <font size="3" color="DDFFFF">写真3</font></font><br /><br /> マリーゴールド<br /> 11111111111111111111<br/> <img src="http://画像3.jpg" height="430" width="300" border="0" alt="" hspace="7" vspace="5" align="left" /> <br clear="all" /> <br /> <br />

  • align="middle"が無視される TOPに

    <!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"> <title lang="ja">文書タイトル</title> </head> <body> <div style="text-align:center;" style="font-size:400%;"> <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> test <IMG SRC="http://pic.prepics-cdn.com/sugarcherry/21910244.jpeg" WIDTH=100 HEIGHT=100 align="middle"> </div> </body> </html> これをブラウザで表示すると、align="middle"とやってるのに、画像のように文字がTOPの位置に表示されてしまいます。 <div style="text-align:center;" style="font-size:400%;"> がなければ、文字は画像のど真ん中に表示されるのですが、 font-size:400%;はまだしも、画像もブラウザの真ん中に表示させたいので <div style="text-align:center;"で画像と文字を挟みたいです。 どうすれば、画像&文字をブラウザの真ん中に表示させつつ、文字を画像の真ん中に表示できるのでしょうか?

    • ベストアンサー
    • HTML
  • imgタグでalignのrightとbottomの同時設定

    imgタグでalignのrightとbottomの同時設定 例えば次のようなソースを書いてみました。 <p>AAA <img src="sakura.jpg" align="right" align="bottom"> BBB</p> しかし、これでは文字がtopに来てしまいます。 その他にalign="right:bottom"とかalign="right bottom"とか やってみましたけどダメでした。 alignでrightとbottomを実現させるにはどうしたらいいですか。

  • IE以外のブラウザでスペース

    お世話になります 現在、ホームページを作っているのですが <?xml version="1.0" encoding="EUC-JP"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <body style="margin-top:0px;"> <table cellpadding="0" cellspacing="0"> <tr> <td style="vertical-align: top;"><img src="img/01.gif" width="180" height="20" alt="画像1" /></td> <td style="vertical-align: top;"><img src="img/02.gif" width="180" height="5" alt="画像2" /></td> </tr> </table> </body> </html> とやったときに IE6.0では上にスペースなく表示されるのですが NN7.1やOpera、Firefoxなどでは画像2の方の上にスペースが入ってしまいます このスペースをなくす方法はないでしょうか? よろしくお願いします

    • ベストアンサー
    • CSS
  • IE(5.5)とNN(4.7)のフォントサイズについて。

    フォントサイズがデフォルトのままだと、IE(5.5)とNN(4.7)とではフォントサイズが違うのです。 IEの方でフォントサイズを「小」にするとNNと丁度良いサイズになるので、 IEでアクセスしたときには強制的にフォントサイズを「小」に変更することなど出来ませんでしょうか? CSSで「12px」とかにしたんですけど、やはりIEでサイズが「中」になっていると 微妙にサイズが違ってしまうのです。 また、テーブル内のフォントのサイズも同じように変更したいのでNNに対しては融通が利かないのです。 なにとぞお知恵をお貸しくださいませm(_ _)m

  • winのIEで正しく表示させたい

    一行に、画像3つを左寄せ、画像2つを右寄せに表示しようとしています。 macのIE5、NN7、winのNN7での確認では、なんとか思うとように表示できたのですが、winのIEではどうにもなりません。 ソースは以下のように作っております。 <html> <div class="icon"> <img A>&nbsp;<img B>&nbsp;<img C> </div> <div class="inquiry"> <img D>&nbsp;<img E> </div> </html> ......... CSS .icon { margin-left: 140px; font-size: 12px; color: #333399; float: left; vertical-align: middle; white-space: nowrap; } .inquiry { margin-right: 30px; float: right; vertical-align: middle; white-space: nowrap; } ちなみに長くなるので省きましたが、右寄せの2つの画像はジャバスクリプトでカーソルが乗ると変わるようにしてあります。

  • Fontのサイズを変更したい(MacのIE対応で)

    以前table内のフォントサイズを調整するために<td>タグ内に<span style="font-size:12px;">や<p style="font-size:12px;">といったタグいれることによって上手くいくと教えていただいたのですが、WindowsのIE、ネスケ、およびMacのネスケではこれで上手く見えるのですが、MacのIEには通用しません。マックのIEでフォントサイズを調整するにはどうすれば良いのでしょうか。

  • 同じ<table align="center">を用いていますが、セルの中身の行揃えが代わってしまいます。

    どちらも<table align="center">を用いています。 ですが、タグ1は特にセルの位置を指定せずとも、セルの中身が自動的に左詰めになりますが タグ2のセルの中身は、中央ぞろえになってしまいます。 タグ1のように、<table align="center">を用い、セルを左詰め指定(<align="left">)をせずとも なぜセルの中身が左詰めになるのか分かりません。。。 -------------タグ1------------- <table width="600" border="0" align="center" cellpadding="0" cellspacing="5"> <tr> <td width="10"><img src="img/concept_title.gif" width="10" height="30"></td> <td><img src="img/concept_title01.gif" alt="テキスト" width="127" height="16"></td> </tr> <tr> <td width="10">&nbsp;</td> <td class="t01">テキスト</td> </tr> </table> ------------------------------ -------------タグ2------------- <table width="640" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="3" rowspan="2" valign="top"><img src="image/grade_line.gif" width="3" height="177" /></td> <td width="8" valign="bottom"><img src="image/grade_line30.gif" width="20" height="2" /></td> <td width="368"><img src="image/kisyo/01t.gif" width="368" height="32" /></td> <td align="left" valign="bottom"><img src="image/grade_line_right.gif" width="42" height="2" /></td> </tr> <tr> <td>&nbsp;</td> <td height="145" align="left">テキスト <td rowspan="2"><img src="image/kisyo/01_ph.jpg" alt="井戸" width="200" height="139" /></td> </tr> <tr> <td valign="top"><img src="image/grade_line_bottom02.gif" /></td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> </table> ------------------------------ 初心者的な質問・タグで恐れ入りますが、ご助力頂けますと幸いです。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • 画像拡大で不具合発生

    画像をクリックすると拡大するという設定をした所、htmlファイルだと何も問題なく拡大できるのですが、HP上だと拡大できるヤツと出来ないヤツが発生しました。 漠然と質問ですが何が原因か分かる範囲でいいので教えてください。 <table> <tr style="font-size:8pt"> <td><img src="http:***1.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">あ</td> <td><img src="http:***2.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">い</td> <td><img src="http:***3.gif" align="left" onClick="this.width=200" onMouseout="this.width=80">う</td> </tr> </table> *文章が長くなるので省略しましたが実際は画像100枚分あります。 *元の画像サイズは80x80ピクセルで、ブラウザはIE6です。 (念のため、画像は著作権の無い物です)

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

    重ね重ね質問してごめんなさい! スタイルシートを使ってみたんですけど・・・ <HTML> <HARD> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <META name="robots" content="noindex,nofollow"> <TITLE>**************</TITLE> <style type="text/css"><!-- body{font-size:12px;} div{font-size:14pt;font-weight:bold;color:orange;text-indent:47em;} .moji{font-size:13px;font-weight:normal;color:black;text-indent:65em;} span{font-size:14px;color:orange;margin-left:75em;} .rire{font-size:12px;color:black} --></style> </HEAD> <BODY> <BR><BR><BR><BR> <div>***********</div> <BR> <div class="moji">***************</div> <BR><BR> <span><A HREF="mail.htm"><IMG SRC="image/******.gif" border=0></A>(←mail)</span> <BR><BR><BR><BR> <table class="rire" border align="right" border="0" cellpadding="0" cellspacing="1" bordercolor="orange"> <tbody> <tr> <td>**** <img src="image/***.gif"></td> <BR> <tr> <td align="left"> <table style=" border:1px;solid #ffa000; cellpadding: 3px;width: 320px;height: 63px ;color:black; font-size:12px;"> <tr> <td>****</td> </tr> </tbody> </table>    ・    ・    ・ テーブルタグを閉じても文字がテーブルの中に入ってしまうんです・・・。 何が間違っているのか分かりません・・・。閉じるタブは閉じてます・・・よね? 教えてください!

    • ベストアンサー
    • HTML

専門家に質問してみよう