検索したのですが、見当たらないので質問させてください。私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。 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は ------ diary blog1 日記1 blog2 日記2 diary 日記3 ----- と記述しています。この日記2と日記3の文字の開始位置はマージンで指定した左で揃っているのですが、日記1が下の２つよりもっと左に表示されてしまいます。別のページではテーブル内をテキストではなく、画像で使用しているのですが、同じく１つ目のテーブルの中の画像だけが左に寄り過ぎており、加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。（画像が動きます）テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが… どこをいじったら解消されるのかがわかりません。説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。記述しているソースがお門違いでしたら、貼り付けなおします。

テーブル内の文字が揃わない

解決済

質問者：naoe1059
質問日時：2008/07/13 16:26
回答数：3件

検索したのですが、見当たらないので質問させてください。
私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。

テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。
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件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： kuzumiHK
回答日時：2008/07/13 18:57

はっきりとはわかりませんが、

擬似クラス: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;
}