0 css
我有一个网页和文件,在最新版本的IE中显示正常.需要它在最新版本的Firefox和Safari中显示相同内容.
将网页和支持文件存档以供审阅.我将粘贴下面的页面,然后是CSS.用图像更容易看到.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="left">
<div id="left_top">
<div id="left_grey">
<h1 class="lb_blk_hdr">Water. Pure and Simple</h1>
<p class="text">United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in <a href="brandpg.html" target="_self" class="text">water treatment</a> technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your <a href="home_solutions.html" target="_self" class="text">Home</a>, <a href="office.html" target="_self" class="text">Office</a>, <a href="food_service.html" target="_self" class="text">Restaurant /Food Service</a> and <a href="medical.html" target="_self" class="text">Medical Facilities</a> and <a href="commercial_ind.html" target="_self" class="text">Commercial/Industrial facilities</a>. </p>
<p class="text">Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p class="text">Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h1 class="lb_blk_hdr">Our Promise to You...</h1>
<p class="text">We are committed to market innovative and creative <a href="brandpg.html" target="_self" class="text">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
</div>
<div id="left_bot">
<p><span class="lg_blue_hdr">Our Guarantee</span></p>
<p class="text"> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="right">
<div id="fla"><img src="fla.gif" width="430" height="380" /></div>
<div id="right_bot"><img src="bbb_logos.gif" width="430" height="160" vspace="50" /></div>
</div>
<div id="bottom">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
@charset "utf-8";
body {
background: #EEEEE4;
}
.lg_blue_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000066;
line-height: 10px;
}
.lb_blk_hdr {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
color: #000000;
line-height: 10px;
}
.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
a.text:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a.text:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto auto;
padding: 0px;
width: 800px;
}
#top {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#left {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: D9DAD5 repeat-y 50% 0%;
margin: 0px;
padding: 0px;
width: 370px;
}
#left_grey {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#bottom {
background: #000000;
float: left;
width: 770px;
margin: 0px;
padding: 15px;
}
如果您可以将我们指向页面的实时版本,这将有很大帮助.有很多事情会影响浏览器中的页面显示(标准或怪癖渲染模式,doctypes,有效/无效的HTML和CSS等)
目前,您的问题中没有足够的信息让人们准确地找出问题的根源.
另外,请记住,Firefox和Safari最有可能"正确"呈现您的页面.但是因为你已经为IE编写了代码,所以你可能已经编写了CSS,使其在IE中看起来很好,但代价是符合标准的浏览器.
编辑:使用上面正确格式化的代码,我稍微重构了你的代码.在编写HTML时,它被认为是最佳实践,使用class和id描述内容的属性,而不是它的外观.所以"标题"而不是"顶部"和"内容"而不是左边.
这个更简单的代码也应该使调试更容易.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header"><img src="top.jpg" width="800" height="115" /></div>
<div id="wrap">
<div id="content">
<div id="left_top">
<h2>Water. Pure and Simple</h2>
<p>United Distributors, Inc. is the region’s top provider of Water Treatment Solutions and Supplies. For over 30 years, you have trusted us to provide the latest in <a href="brandpg.html" target="_self">water treatment</a> technology and related products. We have met your needs through a broad range of products that provide you the purest of water for use in your <a href="home_solutions.html" target="_self">Home</a>, <a href="office.html" target="_self">Office</a>, <a href="food_service.html" target="_self">Restaurant /Food Service</a> and <a href="medical.html" target="_self">Medical Facilities</a> and <a href="commercial_ind.html" target="_self">Commercial/Industrial facilities</a>. </p>
<p>Call us today. With over 80 years combined experience, our Certified Staff can be called upon to share their experience and expertise with you. At United Distributors we not only provide you with water solutions, our Certified Staff accurately installs your treatment equipment and ensures your system is maintained for the highest level of quality water.</p>
<p>Let us help you enjoy the healthy benefits of safe, pure water.</p>
<h2>Our Promise to You...</h2>
<p>We are committed to market innovative and creative <a href="brandpg.html" target="_self">water treatment</a> and water related products to meet and fulfill your needs. We’ll provide you with experienced and educated service professionals who proudly represent our company, products, business associates and community. </p>
</div>
<div id="left_bot">
<h2 class="blue">Our Guarantee</h2>
<p> United Distributors, Inc. guarantees your customer satisfaction. Our water treatment solutions are manufactured by some of the most trusted companies in the water treatment industry.</p>
</div>
</div>
<div id="images">
<img src="fla.gif" width="430" height="380" />
<img src="bbb_logos.gif" width="430" height="160" vspace="50" />
</div>
<div id="footer">Content for id "bottom" Goes HereHereContent for id "left_bot" Goes HereContent for id "left_bot" Goes HereContent for id "left_bot" Goes Here </div>
</div>
</body>
</html>
CSS:
@charset "utf-8";
body {
background-color: #EEEEE4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 17px;
color: #000000;
}
h2 {
font-size: 15px;
line-height: 10px;
}
h2.blue {
color: #000066;
}
a:link {
font-size: 12px;
font-weight: bold;
color: #003366;
text-decoration: underline;
}
a:hover {
font-size: 12px;
font-weight: bold;
color: #009900;
text-decoration: underline;
}
#wrap {
background: url(blue_white_bkgd.gif) repeat-y 50% 0%;
margin: 0px auto;
padding: 0px;
width: 800px;
}
#header {
margin: 0px auto;
padding: 0px;
width: 800px;
}
#content {
margin: 0px;
padding: 0px;
float: left;
width: 370px;
background: url(none);
}
#left_top {
background: #D9DAD5;
margin: 0px;
padding: 15px;
width: 340px;
}
#left_bot {
margin: 0px;
padding: 15px;
width: 340px;
}
#right {
margin: 0px;
padding: 0px;
float: right;
width: 430px;
}
#footer {
clear: both;
background: #000000;
width: 770px;
margin: 0px;
padding: 15px;
color: white;
}