1

Firefox でテーブルを表示する際に問題が発生しました。だれか助けていただけないでしょうか? Firefox でのページの表示方法は次のとおりです。

http://s15.postimg.org/sx6cn6ktn/Problem_Firefox.jpg

ただし、Internet Explorer では問題なく表示されます。

http://s16.postimg.org/e96xsuwj9/Problem_IE.jpg

私のHTMLコーディングは以下の通りです:

<!DOCTYPE_HTML>
<HTML>
<head>
<link rel="stylesheet" type="text/css" href="css.css">  
<title>Website Name | Album Name</title>

<body>
<div id="wrap">
<div id="logo"><img height="182.135433071px"; width="276.699212598px"; src="ctlogonew.jpg"></img> </div>
<div id="header"><img height="182.135433071px"; width="700px"; src="header1.png"</img>   </div>
<ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#news">About</a></li>
    <li><a href="#Album Name">Album</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>
   <hr>
    <!---HEADER ENDS HERE--->


    <h1>Welcome to Website</h1>
    <table border="1px" width="100%">
<col width="40">
<col width="60">
<tr>
    <td><img width="400px" src="homepic.jpg"></img></td>
    <td><p>Welcome to xxxxx - an indie-rock band from Norwich.</p><p> The band are known in the industry for creating great music, with all members, including xxxxxxxxxx having a passion for the genre. Formed in 2010, and based in Norwich, Norfolk, the band have increased massively in popularity since then, selling out all performances for their tour in 2012, with more scheduled for 2013, as well as developing a following in London and on the festival scene.</p><p>The band are known musically for their own brand of indie pop music, containing riffs, hooks and soaring choruses, which has seen them become an online sensation worldwide</p><p>Explore our website for our latest news, details of our latest album <strong><i>Album Name</strong></i>, and purchase merchandise from the store.</p><p> Fans can also explore our Facebook and Twitter profiles, and get in touch with us via the Contact Us page. </p></td>
</div>
</body>
</html>

私のCSSコーディングは以下の通りです:

#wrap {
width:1000px;
height:1000px;
background-color:black;
margin: 0 auto;
}
#logo {
width:276.699212598px;
height:182.135433071px;
background-color:black;
align:left;
float:left;
margin-top:0px;
margin-left:5px;
margin-right:5px;
}
#header {
width:700px;
height:182.135433071px;
background-color:white;
float:right;
}
ul{
line-height:90px;
list-style-type:none;
text-align:center;
margin:0;
padding:0;
padding-top:6px;
padding-bottom:6px;
}
li{
display:inline;
}
a:link,a:visited {
font-family:Reprise Title, Gill Sans MT, Trebuchet MS, Sans-serif;
font-size:2em;
font-weight:bold;
border-radius:5px;
color:#000000;
background-color:#FFFFFF;
text-align:center;
padding:6px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active {
background-color:#7A991A;
}


  {
  border:1px solid #0000ff;
}
div.desc {
text-align:center;
font-weight:normal;
width:120px;
 margin:2px;
}
hr {
height:4px;
background-color:white;
margin-left:20px;
margin-right:20px;
margin-bottom:30px;
}
/*HEADER ENDS HERE*/
h1 {
font-family:Reprise Title, Gill Sans MT, Trebuchet MS, Sans-serif;
font-size:2em;
color:#FFFFFF;
font-weight:bold;
margin-left:20px;
}
p {
font-family: Gill Sans MT, Trebuchet MS, Sans-Serif;
font-size: 1em;
color: #FFFFFF;
}


table {
font-family: Gill Sans MT, Sans-Serif;
color: #FFFFFF;
padding: 3px;
}

どんな助けでも大歓迎です!!

どうもありがとう。

4

2 に答える 2

0

colgroup の値に単位を追加します。あなたのコードでうまくいくようです。

列幅="40%"

列幅="60%"

于 2013-11-08T16:36:30.930 に答える
0

HTML:

  • コメントで述べたように、DOCTYPE のスペルが間違っているため、ドキュメントが Quirks モードになります。また、ブラウザーごとに癖が異なるため、ブラウザーの相互運用性を求める場合は、使用しないでください。
  • 最近では、タグ名を小文字で書くことをお勧めし<html>ます<HTML>。もちろん、好きなように書くこともできます。一貫性を保つだけです。
  • </head>終了タグがありませんが、それもエラーではありません。最近はお勧めしません。つまり、そのタグを省略すると、8 バイトまたは 9 バイトを節約できます。
  • 画像の幅と高さの属性に誤りがあります。それらには整数のみを含める必要があります。それに、高さ 182.13 ピクセルの画像を聞いたことがありますか?
  • img タグのセミコロンは不適切です。それらを取り除きます。
  • 2 番目の画像にも>.
  • </img>終了タグのようなものはありません。
  • あなたの imgs には alt 属性がありません。
  • コメントのダッシュの数が奇数です。それらをまっすぐにします。
  • 表では、幅属性が再びオフになっています。そして実際には、CSS をよく読む必要があります。これらの幅と高さの属性はすべて、今日では目的を果たしません。
  • <i>との終了タグ<strong>が間違っています。その上、あなたが意味したのは、および<cite>ではありません。<i><strong>
  • </table>終了タグがありません。

CSS:

  • alignスタイル プロパティではありません。
  • フロートをクリアしません。常にフロートをクリアすることを習慣にしてください。
  • 特にスペースが含まれている場合は、フォント ファミリ名を常に引用符で囲むことをお勧めします。
  • セレクターのないスタイル ルールが 1 つあります。

これらのエラーをすべて修正すると、Web サイトがブラウザー間でより似たものになる可能性があります。

于 2013-11-25T21:10:38.363 に答える