- ベストアンサー
テーブル内の文字が揃わない
検索したのですが、見当たらないので質問させてください。 私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。 テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。 cssは外部から呼び出しで、 ------- .t{ font-size:15px; color:#666; margin:1px 8px; text-align:right; } .t:first-letter{color:#e68080;} .text2{ line-height:18px; margin:2px 0px 20px 0px; border:1pt dotted; padding:8px 2px 8px 2px; color:#e69999; } ------ htmlは ------ <html> <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"> <link rel="stylesheet" type="text/css" href="left.css"> <title>diary</title> <base target="main"> </head> <body> <div class="t">blog1</div> <div class="text2"><a href="http://■.jp">日記1</a></div> <div class="t">blog2</div> <div class="text2"><a href="http://●/">日記2</a></div> <div class="t">diary</div> <div class="text2"><a href="http://▲">日記3</a></div> </body> </html> ----- と記述しています。 この日記2と日記3の文字の開始位置はマージンで指定した左で揃っているのですが、 日記1が下の２つよりもっと左に表示されてしまいます。 別のページではテーブル内をテキストではなく、画像で使用しているのですが、 同じく１つ目のテーブルの中の画像だけが左に寄り過ぎており、 加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。（画像が動きます） テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが… どこをいじったら解消されるのかがわかりません。 説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。 記述しているソースがお門違いでしたら、貼り付けなおします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
はっきりとはわかりませんが、 擬似クラス:first-letterとIEのバグのようです。 :first-letterを使用しているクラスのmarginを0にすると解決します。 余白はpaddingで指定すれば問題なさそうです。 .t{ font-size:15px; color:#666; margin:0; padding:1px 8px; text-align:right; } .t:first-letter {color:#e68080;} .text2{ line-height:18px; margin:2px 0px 20px 0px; border:1pt dotted; padding:8px 2px 8px 2px; color:#e69999; }
その他の回答 (2)
- pick52
- ベストアンサー率35% (166/466)
ちょっと調べてみましたが、原因はよく分かりませんね。 ただ、一番上とその下二つと入れ替えてみても一番上にあるのが 必ずそのような状態になるようなのでHTML側よりもCSS側にあるように 思います。 CSSに詳しくないので後の回答は別の方にお任せします。
お礼
私も、入れ替えてやったのですがやはり、一番上に来るものが左に寄ってしまったので困っておりました。 アドバイスをいただいて、CSSのfirst-letter{color:#e68080;}を削除したら解消いたしました。 お時間をとらせてしまって申し訳ありませんでした。 ありがとうございます！
- yambejp
- ベストアンサー率51% (3827/7415)
:first-letter の実装上のバグっぽいですね。使わないに限ります。
お礼
！！ first-letterを削除したところ、解消致しました。 助かります、これですっきりしました！ 迅速なご回答どうもありがとうございます！
お礼
わ！ 早速教えていただいたとおりやってみました！ 見事解決できました、ありがとうございます！！！ first-letterは削除するしかないのか…と思っていたのですが、 これなら使えます。 わがままな質問にお答えいただきありがとうございました！