リンクの下線のガタつきを解消する方法について

2023/08/14 22:11

このQ&Aのポイント

リンクの下線のガタつきを解消する方法について教えてください
ソースコードの一部を修正することでリンクの下線のガタつきが解消できるか確認しましたが、他の要素が影響を受ける可能性もあるため、回避策を模索しています
IE6でのみリンクの下線がガタつく現象を解消する方法をご教示いただけないでしょうか

ベストアンサー

リンクの下線のガタつきを解消する方法について

2011/09/19 10:40

下記のソースを主要ブラウザで表示チェックした所、IE6でリンクの下線がガタついてしまいました。 http://ameblo.jp/coosytest/entry-10324805136.htmlと同様の現象だと思います。 <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。 td * { vertical-align:middle; } ただし、これを行うとtwitterの画像が天地中央揃えになっていたのが、上揃えになってしまうようなので、この記述は有効のままにしたいと思います。また、下記を消してもガタつく現象が回避できることは確認しました。 body { font-family: "ＭＳＰゴシック","MS PGothic",Sans-Serif; } ただし、これを行うとこの部分のフォントが意図しないフォントになってしまうため、出来れば回避したいと思っています(回避策がなければIE6だけフォント指定を消すかもしれませんが)。 FirefoxやChromeなどで見た際の表示は今のソースのままで大丈夫そうなので、今の表示を維持したままIE6のリンクのガタつきを解消したいと思ったのですが、どうすれば良いかわからなかったのでアドバイスいただける方がいらっしゃいましたら、ご教示の程、よろしくお願いします。以上、よろしくお願いします。

iroha_168
お礼率89% (204/228)

CSS
回答数5
ありがとう数5

みんなの回答 （5）
専門家の回答

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

ベストアンサー

Questa
ベストアンサー率48% (13/27)

2011/09/20 19:51 回答No.5

td * {vertical-align:middle;}で P要素と A要素に vertical-align:middleが適用されますが、 td * {vertical-align:middle;} td a {vertical-align:baseline;} /* 追加 */ とし、A要素の指定のみを baselineに変えたところ、IE6でのガタつきがなくなり、表示位置も変わりませんでした。（IETester）実際の環境でお試しください。

質問者

お礼 2011/09/23 11:07

ご回答ありがとうございます。ご教示いただいたソースで意図した動作となりました。このたびはどうもありがとうございました。以上、よろしくお願いします。

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/20 09:11 回答No.4

なら、IE6(シェア2.98%),IE5(シェア)を無視して妥協するか、日本のバージョン別ブラウザシェアグラフ（StatCounter Global Statsより） ( http://lhsp.s206.xrea.com/misc/browser-share-version.html ) 他の方法でアイコンを配置するか・・ body { font-family: "MS PGothic",Sans-Serif; } td img { /* vertical-align:middle;*/ position:absolute; right:-62px; } td { border-bottom:1px dotted red; line-height:2em; } p { position:relative; width:auto; padding:0; margin: 5px 0; } 　それよりも、Transitinalではなくstrictで作成することを心がけたほうがよさそうな気がする。XHTML1.0strict、XTHML1.1、HTML5,XHTML5はHTML4.01strictと本質的に同じものだし。

質問者

お礼 2011/09/23 11:09

ご回答ありがとうございます。アイコンの数は不定で、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。このたびはどうもありがとうございました。以上、よろしくお願いします。

naokita
ベストアンサー率57% (1008/1745)

2011/09/19 18:44 回答No.3

NO.2 naokitaです（お礼拝見済み） baselineにする事でズレは無くなりますが、 font-familyもミソでしょうね。 ------------------ dl{width:500px; line-height:1.2;} dt{ float: left; clear:left; padding: .3em 0; width: 6.5em; text-indent:18px; background:url(img.gif) no-repeat 0 .4em;} dd{ margin:0; padding-left: 6.5em; border-bottom: dotted 1px red;} dd p { margin:0; padding: .4em .2em .3em;} dd p img { vertical-align:middle; margin-left:.3em;} *:first-child+html dd p img { margin: 0 0 -.3em .3em;} * html dd p img { vertical-align:baseline; margin: 0 0 -.3em .3em;} <dl> <dt>2011/09/17</dt> <dd><p><a href="#">メッセージ１message２</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> <dt>2011/09/16</dt> <dd><p><a href="#">メッセージ１<br />message２メッセージ１</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> <dt>2011/09/10</dt> <dd><p><a href="#">メッセージ３</a><img src="img.gif" width="16" height="16" alt="*" /></p></dd> </dl>

質問者

お礼 2011/09/23 11:10

ご回答ありがとうございます。ぱっと見、動作しているように見受けられましたが、今回はNo.5さんの修正方法が一番簡単だったのでそちらを採用させていただきました。このたびはどうもありがとうございました。以上、よろしくお願いします。

naokita
ベストアンサー率57% (1008/1745)

2011/09/19 14:05 回答No.2

<?xml version="1.0" encoding="Shift_JIS"?> <!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=shift_jis" />

質問者

お礼 2011/09/19 15:51

ご回答ありがとうございます。ご教示いただいたソースを試した所、確かに解消したのですが、文字コードはサイトの根幹に関わり、これをUTF-8以外に変更することは避けたいと思います。そのため、文字コードを変更しない形での回避策をご存知でしたら、アドバイスの程、よろしくお願いします。 <!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" /> <title>title</title> <style type="text/css">  </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 以上、宜しくお願いします。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/09/19 12:07 回答No.1

td * {vertical-align:middle;} の意味理解して使ってますか？ →5.3 全称セレクタ（Universal selector） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html#universal-selector ) →10.8.1 行間と半行間（Leading and half-leading） ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visudet.html#propdef-vertical-align ) ＞上記ソースの中の下記を消すとガタつく現象が回避できることは確認しました。＞td * {vertical-align:middle;} ＞　複雑な話ではなく、この現象一つから結論は導き出せる結果は『全称セレクタではなく、単純にタイプセレクタを記述すればよい』はずです。すなわち td img{vertical-align:middle;} 　--子孫セレクタで詳細度は[0,0,0,2]ですね。!! 　なお、<td>内に文字がある場合は<p>、画像だけの場合は<p>なしで記述されていますが、いずれかに統一してください。<img>もインライン要素ですから<p></img></p>にしたほうが良いでしょう。　この場合も子孫セレクタで詳細度を上げて他の部分のpと設定が重ならないようにしましょう。 table td p { padding:0; margin:5px 0; /* 簡略化プロパティが使えるものは活用しましょう */ } →【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから 'margin'は簡略化プロパティで、'margin-top'、'margin-right'、'margin-bottom'、'margin-left'という4つのプロパティを1箇所で設定できる。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［ボックスモデル( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#propdef-margin )］より　せっかくのカスケーディングスタイルシートです。継承や詳細度などカスケーディングを使わなきゃダメですよ。

質問者

お礼 2011/09/19 13:10

ご回答ありがとうございます。ご教示いただいたソースを試してみたのですが、IE6でリンクの下線のガタつきを解消する事はできませんでした(下記のソースの2011/09/17の行で確認できると思います)。 <!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=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>title</title> <style type="text/css">  </style> </head> <body> <table width="500" cellspacing="0" cellpadding="0" border="0" summary="記事一覧"> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/19</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージが表示されます。</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/18</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１メッセージ２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/17</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２</a> <img src="http://cdn.oshiete.goo.ne.jp/images/2010renew/btn_twitter.png?20110912_1" alt="新着" /></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/16</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ１message２メッセージ３メッセージ４メッセージ５メッセージ６メッセージ７message８</a></p></td> </tr> <tr> <td width="16"><p><img width="16" height="16" alt="" src="http://cdn.oshiete.goo.ne.jp/images/2010renew/arrow_green.png" /></p></td> <td width="90"><p>2011/09/10</p></td> <td><p><a href="http://oshiete.goo.ne.jp/">メッセージ３</a></p></td> </tr> </table> </body> </html> 何か私が勘違いして移植しているのでしょうか？引き続きアドバイスのほど、よろしくお願いします。以上、宜しくお願いします。

関連するQ&A

tableの作成方法について
よろしくお願いします。表を以下のように作成しました。表の横のラインに罫線を引きたいのですが記述方法が分かりません。表の周りにはcssで記述して2pxの罫線を引いてあります。どなた様か、ご指導の程よろしくお願いします <table> <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt21.gif" alt="" width="168" height="24" /><br /> </td> </tr> <tr> <td class="d"><img src="img/9.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /></td> </tr> <tr> <td class="e"><a href="http://www."><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> ----------------------------------------------------------------ここに横の罫線を引きたいのですが記述方法が分かりません。 <tr> <td rowspan="3" class="b"><img src="img/wg.jpg" alt="パソコンノウハウ" width="190" height="250" /></td> <td class="c"><img src="img/txt22.gif" alt="" width="103" height="23" /><br /> </td> </tr> <tr> <td class="d"><img src="img/1.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/ten.gif" alt="パソコンノウハウ" width="21" height="63" /><img src="img/8.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /><img src="img/0.gif" alt="パソコンノウハウ" width="41" height="63" /> <img src="img/en.gif" alt="パソコンノウハウ" width="131" height="63" /> </td> </tr> <tr> <td class="e"><a href="http://"><img src="img/enter_off.gif" alt="" width="349" height="83" /></a></td> </tr> </table>
- ベストアンサー
- HTML
助けてください＞＜IE上で1pxのズレ
こんにちわ。組んだテーブルに謎の１ｐｘがはいってしまいます。ファイヤーフォックスでは正常なのですがIEでは1pxの隙間ができてしまうようで。どなたか分かる方いらっしゃたらお願いします＞＜ <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2" valign="top"> <img src="img/test_01.jpg" width="660" height="177" alt=""></td> </tr> <tr><td rowspan="2" valign="top"> <table width="316" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="2"> <img src="img/test_02.jpg" width="316" height="46" alt=""></td> </tr> <tr> <td> <img src="img/test_05.jpg" width="144" height="47" alt=""></td> <td> <img src="img/test_06.jpg" width="172" height="47" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_08.jpg" width="316" height="169" alt=""></td> </tr> </table> </td></tr> <tr><td valign="top"> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_03.jpg" width="181" height="62" alt=""></td> <td> <img src="img/test_04.jpg" width="163" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_07.jpg" width="344" height="83" alt=""></td> </tr> </table> </td></tr> <tr><td> <table width="344" border="0" cellpadding="0" cellspacing="0"> <tr> <td> <img src="img/test_09.jpg" width="160" height="62" alt=""></td> <td> <img src="img/test_10.jpg" width="184" height="62" alt=""></td> </tr> <tr> <td colspan="2"> <img src="img/test_11.jpg" width="344" height="23" alt=""></td> </tr> <tr> <td> <img src="img/test_12.jpg" width="160" height="32" alt=""></td> <td> <img src="img/test_13.jpg" width="184" height="32" alt=""></td> </tr> </table> </td></tr> </table> </td></tr> <tr><td colspan="2"> <table width="660" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="5"> <img src="img/test_14.jpg" width="660" height="141" alt=""></td> </tr> <tr> <td> <img src="img/test_15.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_16.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_17.jpg" width="140" height="150" alt=""></td> <td> <img src="img/test_18.jpg" width="130" height="150" alt=""></td> <td> <img src="img/test_19.jpg" width="130" height="150" alt=""></td> </tr> <tr> <td colspan="5"> <img src="img/test_20.jpg" width="660" height="40" alt=""></td> </tr> </table> </td></tr> </table>
- 締切済み
- HTML
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボ
ブログにリンク画像を並べて付けたいのですが、下記のタグを入れると「※ボタンをクリックしてね」の文字と画像の間に何行かの空白が出来てしまいます。これを詰めるにはどうしたらよいでしょうか？ ※ボタンをクリックしてね <TABLE><TR> <TD><a href="リンク先"><img src="images/1103fukunoki.jpg" width="134" height="86" alt="" class="pict" /></a></TD><TD> <a href="リンク先"><img src="images/1123yabusati.jpg" width="134" height="86" alt="" class="pict" /></a></TD> </TR> </TABLE>
- ベストアンサー
- ブログ
透過してしまうのですが・・・
現在タグでメニューバーをつくっているのですが、背景が透過されるテーブルタグを利用したところあとから設置した画像までもが透過されてしまいました。その場合はどこのタグを直せばいいのでしょうか？ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>○○</title> <style type="text/css">  </style></head> <body> <p> </p> <table style="filter:Alpha(opacity=50); background-color:#ffffff;"> <tr> <td width="281"><p align="center"> <img src="about.png" width="144" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="schedule.png" width="225" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="event.png" width="139" height="28" /></p> </td> </tr> <tr> <td><p align="center"><img src="blog.png" width="112" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="access.png" width="173" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="link.png" width="94" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="mail.png" width="96" height="27" /></p> </td> </tr> <tr> <td><p align="center"><img src="toppage.png" width="200" height="27" /></p> </td> </tr> <tr> <td height="15"> </td> </tr> </table> </body> </html>
- 締切済み
- その他（インターネット・Webサービス）
HTML CSS 表示画像のサイズ
表示画像のサイズについて。元の画像サイズはばらばらです。初歩的な質問ですがよろしくお願いします。 <tr> <td><img src="images/A.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/B.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> <tr> <td><img src="images/C焼.jpg" width="100" height="100" border="2"></td> <td>コメント</td> </tr> これをCSSで書く場合なのですが、 img{ 　　width：100 height：100 border：2 } としたのですが、うまくいきません。なぜでしょうか？
- ベストアンサー
- HTML
CSSのdivで何故かボックスセンタリング出来ない
CSSのdivで何故かボックスセンタリング出来ません。全体を中央に寄せたいと思っています。質問させていただきます。まず、全体をdivで囲い、 #contena { margin-right: auto; margin-left: auto; width: 1000px; height: 1000px; } と、記述したのですが、何故かボックスセンタリングになりません。しかも、ナビゲーションだけ、センタリングされています。下記に、htmlを記述します。4000文字入るはずですが、これも何故か400文字程の数が入りきらないので、途中まで記載します。詳しい方がいましたら、よろしくお願いします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>名称未設定-1</title> <link rel="stylesheet" type="text/css" href="./index.css" media="all">  </head> <body> <div id="contena"> <form action="#" method="get"> <div id="Div"> </div> <div id="Div2"> </div> <h3 id="見出し_3"> This Month PicUp </h3> <div class="1"> <p class="lastNode">テキスト </p> </div> <div id="Div3"> </div> <h3 id="見出し_32"> This Month PicUp </h3> <div class="2"> <p class="lastNode">テキスト </p> </div> <div class="Txt_メールアドレス"> <p class="lastNode">メールアドレス </p> </div> <input type="text" name="テキストフィールド__mac" id="テキストフィールド__mac" value=""> <input type="submit" id="ボタン__win" value="送信"> <img src="images/index_r2_c2.gif" alt="" id="index_r2_c2"> <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="600">  <tr> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="99" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="2" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="101" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="100" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="97" height="1"></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="1"></td> </tr> <tr> <td colspan="8"><img name="navibar4_r1_c1" src="images/navibar4_r1_c1.gif" width="874" height="223" alt=""></td> <td><img src="images/spacer.gif" alt="" name="undefined_2" width="1" height="157"></td> </tr> <tr> <td rowspan="3"><img name="navibar4_r2_c1" src="images/navibar4_r2_c1.gif" width="99" height="343" alt=""></td> <td><a href="index1.html"><img name="navibar4_r2_c2" src="images/navibar4_r2_c2.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c3" src="images/navibar4_r2_c3.gif" width="1" height="343" alt=""></td> <td rowspan="2"><a href="navibar.html"><img name="navibar4_r2_c4" src="images/navibar4_r2_c4.gif" width="100" height="30" alt=""></a></td> <td rowspan="3"><img name="navibar4_r2_c5" src="images/navibar4_r2_c5.gif" width="2" height="343" alt=""></td> <td rowspan="2"><a href="navibar1.html"><img name="navibar4_r2_c6" src="images/navibar4_r2_c6.gif" width="101" height="30" alt=""></a></td> <td><a href="javascript:;" onMouseOut="MM_nbGroup('out');" onMouseOver="MM_nbGroup('over','navibar4_r2_c7','images/navibar4_r2_c7_s2.gif','images/navibar4_r2_c7_s4.gif',1);" onClick="MM_nbGroup('down','navbar1','navibar4_r2_c7','images/navibar4_r2_c7_s3.gif',1);"><img name="navibar4_r2_c7" src="images/navibar4_r2_c7.gif" width="100" height="28" alt=""></a></td> <td rowspan="3"><i
- ベストアンサー
- ホームページ作成ソフト
FireFoxで背景が表示されない。
Webページを作っておりまして、FireFoxで表示を確認した際にボックスの背景が出ない問題が起こっており、調べたりしても出てこず、1週間位頭を悩ませております。どこがイタズラしてるか分からないので、CSS,HTML全てのせます申し訳ありません。 CSSはこのように書いています  そしてHTMLはこのようになっています <!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-Script-Type" content="text/javascript"> <Meta http-equiv="Content-Style-Type" content="text/css"> <Meta name="GENERATOR" content="AmBuilder"> <link rel="StyleSheet" href="Style.css" type="text/css"> <link rel="stylesheet" type="text/css" href="http://wing2.jp/add/adv.css" /></head> <body> <div align="center"> <p class="box1"> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="TitleTable"> <tr valign="top"> <td width="5"><img src="./img/TitleSpace-Left.png" width="5" height="41" alt="TitleSpace"></td> <td width="183"><img src="./img/Title2.png" width="183" height="41" alt="Title"></td> <td width="557"><img src="./img/TitleSpace.png" width="557" height="41" alt="Title" ></td> <td width="5"><img src="./img/TitleSpace-Right.png" width="5" height="41" alt="TitleSpace"></td></tr> </table> <table width="750" border="0" cellspacing="0" cellpadding="0" summary="MenuTable"> <tr valign="top"> <td width="33"><a href="index.htm" target="_self"><img src="./img/HomeIcon.png" width="33" height="25" border="0" alt="ReturnHome"></a></td> <td width="57"><a href="about.htm" target="_self"><img src="./img/M-About.png" width="57" height="25" border="0" alt="About"></a></td> <td width="56"><a href="movie.htm" target="_self"><img src="./img/M-Movie.png" width="56" height="25" border="0" alt="Movie"></a></td> <td width="46"><a href="link.htm" target="_self"><img src="./img/M-Link.png" width="46" height="25" border="0" alt="Link"></a></td> <td width="557"><img src="./img/M-Space.png" width="557" height="25" border="0" alt="Space"></td> <td width="1"><img src="./img/M-Right.png" width="1" height="25" border="0" alt="MenuLine"></td> </tr> </table> <table style="float:right"> <tr align="left"> <td> <p class="box2"> ◇ 更新履歴 </td> </p> </tr> </table> </p> </div> </body> </html> 前回も同じような下らない質問をしてしまったのですが。今回も皆さんよろしくお願い致します。長文、駄文すみませんでした一応、サイトのURIです http://wing2.jp/~movie_village/
- ベストアンサー
- CSS
Webの表で画像を並べたい
テーブルを使って画像を並べているのですが、どうしても空白ができてしまいます。ソースを見ても何が原因だかわかりません。左側に145*89のセルが一つあり、右上に604*54のセル、右下には35*35、60*35、509*35の3つのセル（今後増やす予定です）を作り、画像を並べたいと思っています。が、左の画像と右下（2つ）の画像、右下（2つ）の画像と右上の画像との間にそれぞれ少しだけ空白ができてしまいます。何が原因だか分かりますか？どうかよろしくお願いします。ソースは以下の通りです。 <table width="749" height="89" border="0" cellspacing="0" cellpadding="0"> <tr> <td rowspan="3" width="145" height="89"><IMG SRC="images/main_up_01.gif" width="145" height="89"> </td> </tr> <tr> <td width="604" height="54" colspan="10"><IMG SRC="images/main_up_02.gif" width="604" height="54"> </td> </tr> <tr> <td width="35" height="35"> <img src="images/top.gif" width="35" height="35"> </td> <td width="60" height="35"> <img src="images/top2.gif" width="60" height="35"> </td> <td width="509" height="35">　</td> </tr> </table>
- ベストアンサー
- HTML
Firefoxで崩れる
IE6.0　IE7.0では、問題なく表示されるのですが、Firefoxで一部のページが右にずれてしまうのです。問題点を教えていただけますと幸いです。正常なページのソース <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXXXXXXXXXXXXXサイト</title> <META HTTP-EQUIV="Imagetoolbar" CONTENT="no"> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td height="95" colspan="2"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td width="213" rowspan="4"><a href="../index.html"><img src="../common/images/rogo.jpg" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2"><img src="images/" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td height="21" colspan="2" class="td-bar"> </td> </tr> <tr> <td width="556" height="111" valign="top"><table width="543" height="182" cellpadding="10" cellspacing="0" class="td-0e3758"> <tr> <td colspan="2" class="bottom-border0e3758"><strong>200X/XX/XX</strong></td> </tr> <tr> <td width="94" height="131"><img src="images/s_img.jpg" width="94" height="125" /></td> <td width="407" valign="top">テテキストテキスト</td> </tr> </table></td> ***************************** 崩れてしまう方 <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>XXXXXXXXXX</title> <link href="../common/base.css" rel="stylesheet" type="text/css" /> </head> <body> <a name="top" id="top"></a> <table width="758" border="0" cellpadding="0" cellspacing="0" class="table-base"> <tr> <td width="758" height="95"><table width="758" cellspacing="0" cellpadding="0"> <tr> <td rowspan="4"><a href="../index.html"><img src="../common/" width="213" height="93" border="0" /></a></td> <td height="38"> </td> </tr> </table></td> </tr> <tr> <td height="31" colspan="2" class="td-bar"><img src="images/blog-.gif" alt="blog" width="758" height="31" border="0" /></td> </tr> <tr> <td align="center"><table width="725" cellspacing="0" cellpadding="7"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="37" align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td width="658" align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span>　　XXXXXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span>　　XXXXXXXX</td> </tr> <tr> <td align="right"><img src="../common/images/arrow.gif" width="8" height="9" /></td> <td align="left" class="text-ffffff"><span class="text-71b8ff">2007.00.00</span>　　XXXXXXXXXXXXXXXXXXXXXXX</td> </tr>
- 締切済み
- HTML
ページ上部にスペースが空いてしまう・・・
今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="～.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="～html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="～html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="～.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML

リンクの下線のガタつきを解消する方法について

リンクの下線のガタつきを解消する方法について