Firefoxで隙間が空いてしまう
-
0 名前： ぶっぽ ： 2006/12/07（木） 13:30 ［URL］ ID:F164F6yz
- はじめまして。
CSSを使い始めて間もない初心者です。
ですが、わからない単語があっても勉強しながら追いついていくつもりなので相談に乗ってくださいませ。
【現在の状況】
現在、ブログのテンプレートをカスタマイズしようと奮闘中です。
IE,Slepnirでは正常動作が確認出来たのですがFireFoxで見るとdiv要素毎の間に隙間が出来てしまいます。
この隙間と戦い続ける日々を送っているのが現段階です。
【どうしたいのか】
FireFoxでもきちんと表示されるCSS、HTMLを製作したいです。
プラグインのところが解決できれば他も同時に解決できると思うので、どうかよろしくお願いします。
【HTML】
<div id="layout">
<table width="790" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="165" valign="top">
<!--plugin-->
<div id="menu">
<!--plugin_first-->
<div class="plugtop">
<h2 style="text-align:<%plugin_first_talign>"><%plugin_first_title></h2>
</div>
<div class="plugmain"><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p><%plugin_first_content><p style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
</div>
<div class="plugbottom"></div>
<!--/plugin_first-->
</td>
</tr>
</table>
</div>
【CSS】
#layout {
width: 790px;
margin-top: 0px;
padding-top: 0px;
padding-left: 0px;
padding-right: 0px;
}
#menu {
width : 165px;
margin: 10px 0px 0px 2px;
padding: 0px;
color: #000000;
text-align: left;
float : left;
}
.plugtop { margin : 0px;
padding-bottom: 0px;
width : 165px;
background-image: url(http://blog69.fc2.com/p/pokugazou/file/plug2_03.gif
);
background-position: 0% 0%;
background-repeat: no-repeat;
}
.plugmain {
width : 165px;
padding-top: 0px;
background-image: url(http://blog69.fc2.com/p/pokugazou/file/plug_05.gif);
background-repeat: repeat-y;
}
.plugbottom {
width : 165px;
padding-bottom: 10px;
background-image: url(http://blog69.fc2.com/p/pokugazou/file/plug_07.gif);
background-repeat: no-repeat;
}
#menu p{
font-size: 10px;
color: #969696;
padding: 0px 10px 0px 10px;
}
#menu p a {
font-size: 10px;
color: #888888;
padding: 0px 10px 0px 10px;
}
#menu p a a:hover {
font-size: 10px;
text-decoration: none;
color: #888888;
padding: 0px 10px 0px 10px;
}
h2 {
font-size: 12px;
color: #61AFCC;
text-align: left;
margin-top: 10px;
padding-left: 10px;
padding-right: 10px;
}
【備考】
URL欄にあるHPが実際に今のCSS、HTMLを使用しているブログです。
FireFoxで見ると全ての要素がばらばらになってしまっているのがわかると思います…。
-
1 名前： ぶっぽ ： 2006/12/07（木） 13:30 ［URL］ ID:F164F6yz
- すみません。記述漏れです。
<div id="menu">の</div>が記述されていませんが、
実際には記述された状態で稼動しています。
-
2 名前： Ryu ： 2006/12/07（木） 13:30 ID:braAjNZo
- 該当する部分（CSS）を以下の通りに変更してみてください
ばらばらになるのは直ります。
変えたのはマージンの設定です。
.entry_text {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #777777
}
.entry_state {
FONT-SIZE: 12px; MARGIN: 0px; COLOR: #eeeeee; TEXT-ALIGN: right
}
表示確認をするのであれば、IE、Firefox、Operaがいいと思いますよ。
ちなみにお聞きしたいのですが、このHTMLはどうやって記述したものでしょうか？けっこう酷いので・・・ブログのテンプレートってこんな感じなんですか？それもとFC2が酷いのか・・・
一度文法を採点してもらうといいと思いますよ。
http://openlab.ring.gr.jp/k16/htmllint/htmllint.html
);
);
);
