0

私はウェブ開発が初めてです。HTML と CSS を使用してシンプルなサイトを構築しています。テーブルから作成された 2 つの価格表を含むページがあります。私はそれらの両方を 1 つの div に持っており、それらを重ね合わせたいと思っています。それらの右側に写真があります。Firefox では絶対位置を使用してもすべて問題ありませんが、IE7 では 2 つのテーブルの間に画像がポップアップします。左右に浮かせて、絶対位置と相対位置を合わせてみました。Quirksと関係がありますか？また、doctype を次のように変更しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en">

これは私のコードの一部です。HTML:

<div id="price">
 <table> 
  <tr>
   <th>Cutting</th>
   <th>Stylist</th>
   <th>Senior Stylist</th>
  </tr>  
  <tr>
   <td>Men</td>
   <td>£32</td>
   <td>£35</td>
  </tr>
  <tr>
    <td>Women</td>
    <td>£36</td>
    <td>£40</td>
  </tr>
  <tr>
    <td>Restyle</td>
    <td>£40</td>
    <td>£45</td>
  </tr>
    <td colspan="3">student discount 10% Mon-Fri only</td>   
  </tr>

  <tr>
   <table> 
   <td>Half Head foils</td>
   <td>From £55</td>
  </tr>
  <tr>
    <td>Full Head foils</td>
    <td>From £75</td>
  </tr>
   <tr>
    <td>Colour between foils</td>
    <td>From £15</td>
  </tr>
  </tr>
   <tr>
    <td>Organic Permanent colour</td>
    <td>From £45</td>
  </tr>
  <tr>
    <td>Semi-Permanent colour</td>
    <td>From £40</td>
  </tr>
  <tr>
    <td>Colour correction</td>
    <td>By Quotation</td>
  </tr>  
</div>



 <div id="pricepicture">
  <img src="images/head.jpg" width="310" height="365" alt="picture of salon"/>
 </div>

そしてCSS：（floatを使った私の最後の試み）

 #pricepicture {
  float: right;
  margin-right: 40px;
  margin-top: 100px;
  border: 1px solid #2c2e32;
  height: 365px;
  width: 310px;
  }

 #table {
  float: left;
  margin-left: 40px;
  margin-top: 50px;
  border-collapse: collapse; 
  }

 #price {
  float: left;
  margin-left: -5px;
  margin-top: 40px;
  }

  td {
   text-align: left;
   padding: 0.2em;
   font-size: 1.3em;
   }

  th {
   text-align: left;
   padding: 0.2em;
   font-size: 1.1em;
   }

  tr {
   height: 20px;
   }

何日もの間、スタック オーバーフローの質問を検索してきました。ラップトップを窓から投げ捨てる前に助けてください！ありがとう....

4

1 に答える 1