HTML 表格和图像问题 - Firefox



我在 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;
}

任何帮助都非常感谢!!

非常感谢。

单位添加到 colgroup 中的值。似乎对我有用的代码。

列宽度="40%"

列宽度="60%"

HTML:

  • 正如评论中所说,您的 DOCTYPE 拼写错误,将文档置于 Quirks 模式。不同的浏览器有不同的怪癖,所以如果你追求浏览器互操作性,不要使用它。
  • 如今,最好以
  • 小写形式编写标签名称,因此<html>而不是<HTML>。但是,当然,您可以随心所欲地编写它们;只要保持一致。
  • </head>结束标记丢失,但这也不是错误。只是现在不推荐;我的意思是,省略该标签所做的只是节省 8 或 9 个字节。
  • 图像的宽度和高度属性有错误。这些应该只包含整数。此外,谁听说过182.13像素高的图像?
  • img 标签中的那些分号是不好的。摆脱它们。
  • 第二个 img 也缺少一个>
  • 没有</img>结束标签这样的东西。
  • 您的 img 没有 alt 属性。
  • 您的评论有奇数个破折号。理顺这些。
  • 在表中,width 属性再次处于关闭状态。真的,你应该阅读你的CSS。所有这些宽度和高度属性现在都没有用处。
  • <i><strong>的结束标记是错误的。此外,你的意思是<cite>,而不是<i><strong>.
  • 缺少</table>结束标记。

CSS:

  • align不是样式属性。
  • 你不清除你的浮标。养成始终清除浮标的习惯。
  • 最好始终在字体系列名称两边加上引号,尤其是在它们包含空格的情况下。
  • 有一个没有选择器的样式规则。

如果您纠正所有这些错误,您的网站可能会在各个浏览器中看起来更加相似。

最新更新