解決済み

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

  • 暇なときにでも
  • 質問No.4173480
  • 閲覧数309
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 100% (3/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が下の2つよりもっと左に表示されてしまいます。

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

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

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

  • 回答No.3

ベストアンサー率 72% (132/183)

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

お礼率 100% (3/3)

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

first-letterは削除するしかないのか…と思っていたのですが、
これなら使えます。
わがままな質問にお答えいただきありがとうございました!
投稿日時 - 2008-07-13 22:18:41
感謝経済

その他の回答 (全2件)

  • 回答No.2

ベストアンサー率 35% (166/466)

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

CSSに詳しくないので後の回答は別の方にお任せします。
お礼コメント
naoe1059

お礼率 100% (3/3)

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

アドバイスをいただいて、CSSのfirst-letter{color:#e68080;}を削除したら解消いたしました。
お時間をとらせてしまって申し訳ありませんでした。
ありがとうございます!
投稿日時 - 2008-07-13 17:03:50
  • 回答No.1

ベストアンサー率 51% (3827/7415)

:first-letter
の実装上のバグっぽいですね。使わないに限ります。
お礼コメント
naoe1059

お礼率 100% (3/3)

!!
first-letterを削除したところ、解消致しました。
助かります、これですっきりしました!
迅速なご回答どうもありがとうございます!
投稿日時 - 2008-07-13 17:05:36
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


感謝指数によるOK-チップ配布スタート!

ピックアップ

ページ先頭へ