私はコーディングに不慣れで、最初の一歩を踏み出しました。私は今2日間答えを探していて、今のところ私だけではありませんが、人々が使用しているのを見たテクニックのいくつかを使用または追加しようとしましたが、この時点で困惑しています。
私の問題はFirefox内でのみ発生し、IEとChromeで完全に正常に表示されます。比較チャートを作成しましたが、テーブルが上に押し上げられ、すべてのセルの位置がずれているようです。幅を100％に変更してみました。また、CSSリセットを使用しているため、最初からパディングとマージンがゼロに設定されています。また、境界線の間隔も試しました。以下のコードを添付しました。スクリーンショットがありますが、新しいので添付できません。
Windows7OSでFirefoxバージョン15.0を使用しています
私のHTMLの一部私はもっと必要なものを追加することができます
<div id="tblCenter">
<table class="contItems">
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
<td class="yes"><div class="row1"></div></td>
<td class="yes"><div class="row2"></div></td>
<td class="yes"><div class="row1"></div></td>
</tr>
<tr>
私のページのテーブルとデザイン部分のCSS
`@charset" utf-8 "; /*CSSドキュメント*/
#seoBox{
width: 950px;
margin: auto;
padding: 0px;
`enter code here`}
#seoContent{
margin: 25px 10px 25px 5px;
}
#seoContent h1 p tr td{
font-family:Arial, Helvetica, sans-serif;
color:#000000;
}
#seoContent p{
padding: 0 0 10px 0;
}
#seoContent #bulletPoint{
width: 500px;
padding: 20px 20px 0 20px;
}
#seoContent #bulletPoint ul{
display: block;
list-style-type:none;
}
#bulletPoint li{
background: url(../styleImages/Star.png) top left no-repeat ;
padding: 0 0 7px 25px;
}
#packages{
width: 935px
}
#sideBar{
width: 190px;
float: left;
margin-top: 92px;
font-weight:bold;
}
#sideBar td{
height: 25px;
padding: 8px 0 0 0;
background: url(../styleImages/tbl_line_lght.png) bottom left no-repeat;
}
#mainTbl{
width: 664px;
text-align: center;
}
#mainTbl .contItems{
border-collapse:collapse;
margin-top: 0px;
font-weight: bold;
font-size: 16px;
}
.contItems td{
width: 220px;
height: 25px;
padding-top: 8px;
}
.row1{
width: 167;
height: 3px;
background:url(../styleImages/tbl_line_lght.png) no-repeat;
position: relative;
bottom: -12px;
left: 20px;
}
.textR1{
width: 167;
height: 3px;
background:url(../styleImages/tbl_line_lght.png) no-repeat;
position: relative;
bottom: -20px;
left: 20px;
}
.row2{
width: 167;
height: 3px;
background: url(../styleImages/tbl_linedrk.png) no-repeat;
position: relative;
bottom: -12px;
left: 20px;
}
.textR2{
width: 167;
height: 3px;
background:url(../styleImages/tbl_linedrk.png) no-repeat;
position: relative;
bottom: -20px;
left: 20px;
}
.contItems .yes{
text-align: center;
background: url(../styleImages/green_yes.png) center center no-repeat;
}
.contItems .no{
text-align: center;
background: url(../styleImages/red_no.png) center center no-repeat;
}
#packbg{
width: 730px;
height: 1100px;
background: url(../styleImages/tblbg.png) top left repeat-x;
float:left;
margin-bottom: 50px;
}
#tblTop, #tblCenter, #tblRibbon, #tblBottom{
margin-left: 25px;
}
#tblTitle{
width: 535px;
height: 50px;
margin-left: 80px;
background: url(../styleImages/Tbl_title.png) bottom left no-repeat;
}
#tblTop{
width: 665px;
height: 40px;
background: url(../styleImages/tbl_top.png) no-repeat top left;
}
#tblCenter{
width: 665px;
height: 910px;
background: url(../styleImages/tbl_center.png) repeat-y top left;
}
#buyButton {
margin-left: 35px;
width:650px;
height: 42px;
}
.buyNow{
width: 121px;
height: 42px;
background: url(../styleImages/Buy_Now.jpg) top center no-repeat;
border: 0px;
margin: 0 45px;
}
#tblRibbon{
width: 650px;
height: 65px;
background: url(../styleImages/Ribbon.png) no-repeat;
position: relative;
top: -140px;
left: 8px;
}
#tblBottom{
width: 665px;
height: 33px;
background: url(../styleImages/tbl_bottom.png) no-repeat top left;
}
/* end Table CSS */