みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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

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

テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。
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が下の2つよりもっと左に表示されてしまいます。

別のページではテーブル内をテキストではなく、画像で使用しているのですが、
同じく1つ目のテーブルの中の画像だけが左に寄り過ぎており、
加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。(画像が動きます)

テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが…
どこをいじったら解消されるのかがわかりません。
説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。
記述しているソースがお門違いでしたら、貼り付けなおします。

投稿日時 - 2008-07-13 16:26:06

QNo.4173480

暇なときに回答ください

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

はっきりとはわかりませんが、
擬似クラス: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;
}

投稿日時 - 2008-07-13 18:57:10

お礼

わ!
早速教えていただいたとおりやってみました!
見事解決できました、ありがとうございます!!!

first-letterは削除するしかないのか…と思っていたのですが、
これなら使えます。
わがままな質問にお答えいただきありがとうございました!

投稿日時 - 2008-07-13 22:18:41

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

ちょっと調べてみましたが、原因はよく分かりませんね。
ただ、一番上とその下二つと入れ替えてみても一番上にあるのが
必ずそのような状態になるようなのでHTML側よりもCSS側にあるように
思います。

CSSに詳しくないので後の回答は別の方にお任せします。

投稿日時 - 2008-07-13 16:57:30

お礼

私も、入れ替えてやったのですがやはり、一番上に来るものが左に寄ってしまったので困っておりました。

アドバイスをいただいて、CSSのfirst-letter{color:#e68080;}を削除したら解消いたしました。
お時間をとらせてしまって申し訳ありませんでした。
ありがとうございます!

投稿日時 - 2008-07-13 17:03:50

ANo.1

:first-letter
の実装上のバグっぽいですね。使わないに限ります。

投稿日時 - 2008-07-13 16:43:28

お礼

!!
first-letterを削除したところ、解消致しました。
助かります、これですっきりしました!
迅速なご回答どうもありがとうございます!

投稿日時 - 2008-07-13 17:05:36

あなたにオススメの質問