IE看起来很好，Mozilla看起来很乱，请定位帮助 [英] IE Looks fine, Mozilla looks garbled, Positioning Help please
问题描述
我在IE 6和Mozilla上遇到问题时显示了一个
完全CSS定位页面，并且想知道是否有任何常驻CSS大师
可能很快就能找到问题所在。谢谢。
在IE中，页面看起来我希望它看起来如下（图片如下）：
www.sunbadgeco.com/sunmetal/ie.jpg
在Mozilla Firefox中，不知何故它不太对劲（如下图所示）：
www。 sunbadgeco.com/sunmetal/mozillafirefox.jpg
这里是CSS和HTML（为简洁起见省略一些）：
身体{
background-image：url（../ images / bg.jpg）;
border：4px inset＃454545;
宽度：636px;
保证金：20px自动;
text-align：center;
}
#container {
背景色：＃000000;
颜色：＃AEAA9D;
font-family：Trebuchet MS，Tahoma，Arial，" Times New Roman"，sans-serif;
font-size：100％;
padding：0;
margin： 0;
text-align：left;
}
#mainart {
display：block;
margin-left：auto;
margin-right：auto;
margin-top：55px;
margin-底部：35px;
text-align：center;
}
..artblock {
宽度：450px ;
边框：4px一开始＃AEAA9D;
颜色：＃F8F4E5;
背景颜色：＃857F75;
}
..artistname {
float：left;
padding：10px;
top：80px ;
text-align：left;
}
..artistfirst {
颜色：＃F8F4E5;
字体大小：150％;
font-weight：bold;
}
..limitededition {
字体大小：70％;
}
..artimage {
float：right;
字体大小：1px;
border：4px inset＃AEAA9D;
text-align：center;
}
#footer {
font-size：70％;
text-align：center;
}
..hrgraphic {
font-size：1px;
}
#navfooter {
display：block;
margin-top：2px;
margin-bottom：5px;
}
< body>
< div id =" container">
< div id = " mainart">
< div class =" artblock">
< div class =" artistname">
< span class =" artistfirst"> S< / span> teven< span
class =" artistfirst"> H< / span> ofberger< br />< ; span
class =" limitededition">限制版：50< / span>
< / div>
< div class =" artimage">
< img src =" images / hofberger_minivase.jpg"高度= QUOT; 200"宽度= QUOT; 200" alt =""
/>
< / div>
< / div>
< / div>
< div id =" footer">
< div class =" hrgraphic">
< img src =" images / bottomlights.jpg"宽度= QUOT; 246"高度= QUOT; 52" ALT ="" />< br />
< img src =" images / hr.jpg"宽度= QUOT; 580"高度= QUOT 1 QUOT; ALT ="" />
< / div>
< div id =" navfooter">
< a HREF =" artists.htm" class =" navfooter">艺术家< / a> |< a href =" contact.htm"
class =" navfooter">联系信息< / a> |< a href =" about.htm"
class =" navfooter">关于我们< / a>
< / div>
< div id =" copyright">
版权所有？2004 Sunmetal Fine Art Co.版权所有。
< / div>
< / div>
< / div>
Hi, I''ve run into a problem with IE 6 vs. Mozilla when displaying a
completely CSS positioned page, and was wondering if any resident CSS guru
might quickly be able to find the problem(s). Thank you.
In IE, the page looks how I want it to look (picture below):
www.sunbadgeco.com/sunmetal/ie.jpg
In Mozilla Firefox, somehow it''s not quite right (pic below):
www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
Here is the CSS and HTML (with some omissions for brevity):
body {
background-image: url(../images/bg.jpg);
border: 4px inset #454545;
width: 636px;
margin: 20px auto;
text-align: center;
}
#container {
background-color: #000000;
color: #AEAA9D;
font-family: Trebuchet MS, Tahoma, Arial, "Times New Roman", sans-serif;
font-size: 100%;
padding: 0;
margin: 0;
text-align: left;
}
#mainart {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 55px;
margin-bottom: 35px;
text-align: center;
}
..artblock {
width: 450px;
border: 4px outset #AEAA9D;
color: #F8F4E5;
background-color: #857F75;
}
..artistname {
float: left;
padding: 10px;
top: 80px;
text-align: left;
}
..artistfirst {
color: #F8F4E5;
font-size: 150%;
font-weight: bold;
}
..limitededition {
font-size: 70%;
}
..artimage {
float: right;
font-size: 1px;
border: 4px inset #AEAA9D;
text-align: center;
}
#footer {
font-size: 70%;
text-align: center;
}
..hrgraphic {
font-size: 1px;
}
#navfooter {
display: block;
margin-top: 2px;
margin-bottom: 5px;
}
<body>
<div id="container">
<div id="mainart">
<div class="artblock">
<div class="artistname">
<span class="artistfirst">S</span>teven <span
class="artistfirst">H</span>ofberger<br /><span
class="limitededition">Limited Editions: 50</span>
</div>
<div class="artimage">
<img src="images/hofberger_minivase.jpg" height="200" width="200" alt=""
/>
</div>
</div>
</div>
<div id="footer">
<div class="hrgraphic">
<img src="images/bottomlights.jpg" width="246" height="52" alt="" /><br />
<img src="images/hr.jpg" width="580" height="1" alt="" />
</div>
<div id="navfooter">
<a href="artists.htm" class="navfooter">Artists</a>|<a href="contact.htm"
class="navfooter">Contact Information</a>|<a href="about.htm"
class="navfooter">About Us</a>
</div>
<div id="copyright">
Copyright ?2004 Sunmetal Fine Art Co. All Rights Reserved.
</div>
</div>
</div>
推荐答案
On Sun，2004年6月13日19:04:19 GMT，Applebrownbetty
< applebrown@deletethisspace_gamebanshee.com>写道：
On Sun, 13 Jun 2004 19:04:19 GMT, Applebrownbetty
<applebrown@deletethisspace_gamebanshee.com> wrote:
我在IE 6和Mozilla上遇到问题时显示完全CSS定位的页面，并且想知道是否有任何常驻CSS
guru
可能很快就能找到问题所在。谢谢。
在IE中，页面看起来我希望它看起来如下（图片如下）：
www.sunbadgeco.com/sunmetal/ie.jpg
在Mozilla Firefox中，不知何故它不太对劲（如下图所示：
www.sunbadgeco.com/sunmetal/mozillafirefox。 jpg
以下是CSS和HTML（为简洁起见省略一些）：
Hi, I''ve run into a problem with IE 6 vs. Mozilla when displaying a
completely CSS positioned page, and was wondering if any resident CSS
guru
might quickly be able to find the problem(s). Thank you.
In IE, the page looks how I want it to look (picture below):
www.sunbadgeco.com/sunmetal/ie.jpg
In Mozilla Firefox, somehow it''s not quite right (pic below):
www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
Here is the CSS and HTML (with some omissions for brevity):
屏幕截图和不完整的代码是不够的。一个遗漏 - 无论是否适当地使用了文档类型，可能是至关重要的。请代替
剪切代码，上传显示问题的示例并提供URL。
Screenshots and incomplete code are not sufficient. One omission - whether
you used a doctype properly or not - might be critical. Please, instead of
snipped code, upload an example showing the problem and give us the URL.
" Neal" <是ne ***** @ yahoo.com>在消息中写道
news：op ************** @ news.individual.net ...
"Neal" <ne*****@yahoo.com> wrote in message
news:op**************@news.individual.net...
On Sun，Jun Jun 2004年19:04:19 GMT，Applebrownbetty
< applebrown@deletethisspace_gamebanshee.com>写道：
On Sun, 13 Jun 2004 19:04:19 GMT, Applebrownbetty
<applebrown@deletethisspace_gamebanshee.com> wrote:
我在IE 6和Mozilla上遇到问题时显示完全CSS定位的页面，并且想知道是否有任何常驻CSS
guru
可能很快就能找到问题所在。谢谢。
在IE中，页面看起来我希望它看起来如下（图片如下）：
www.sunbadgeco.com/sunmetal/ie.jpg
在Mozilla Firefox中，不知何故它不太对劲（如下图所示：
www.sunbadgeco.com/sunmetal/mozillafirefox。 jpg
以下是CSS和HTML（为简洁起见，有一些遗漏）：
Hi, I''ve run into a problem with IE 6 vs. Mozilla when displaying a
completely CSS positioned page, and was wondering if any resident CSS
guru
might quickly be able to find the problem(s). Thank you.
In IE, the page looks how I want it to look (picture below):
www.sunbadgeco.com/sunmetal/ie.jpg
In Mozilla Firefox, somehow it''s not quite right (pic below):
www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
Here is the CSS and HTML (with some omissions for brevity):
屏幕截图和不完整的代码是不够的。一个遗漏 - 无论你是否正确使用了doctype - 都可能是至关重要的。请代替
剪切代码，上传一个显示问题的示例并给我们提供URL。
Screenshots and incomplete code are not sufficient. One omission - whether
you used a doctype properly or not - might be critical. Please, instead of
snipped code, upload an example showing the problem and give us the URL.
这是接近完整代码Neal和接近完整的CSS。我遗漏的唯一东西是导航栏信息，它们在两个页面上都能完美运行。这里
是完整的HTML，但你会发现它几乎一样。徽标，
导航栏和页脚部分适用于IE和Mozilla，它只是导致问题的页脚的
mainart类： br />
这是指向该网站主页的链接。除了我在
艺术家页面上更改的中间mainart类之外，没有
的情况完全相同： www.sunbadgeco.com/sunmetal/index.htm
这是讨论中页面的相关HTML。你可以看到
我只剪掉了navbar的东西。
< link href =" css / sunstyle.css"的rel ="样式表"类型= QUOT;文本/ CSS" />
< / head>
< body>
< div id =" container"> ;
< div id =" logo">
< a href =" / sunmetalfineart /">< img src = QUOT;图像/ logo.jpg" width =" 450"
height =" 120"边界=" 0" alt =" Sunmetal Fine Art Co. Home" />< / a>
< / div>
< div id =" navmain">
< div>
< img src =" images / navbar.jpg" ALT ="" />
< / div>
< a href =" artists.htm" id =" artists">< img src =" images / artists_active.jpg"
class =" pload"边界=" 0"宽度= QUOT; 148"高度= QUOT 35 QUOT; ALT ="" />< img
src =" images / pixel.gif"边界=" 0"宽度= QUOT; 148"高度= QUOT 35 QUOT; alt ="精选
艺术家" />< / a>< img src =" images / diamond.gif"宽度= QUOT; 55"高度= QUOT 35 QUOT; alt =""
/>< a href =" contact.htm" id =" contact">< img src =" images / contact_active.jpg"
class =" pload"边界=" 0"宽度= QUOT; 163"高度= QUOT 35 QUOT; ALT ="" />< img
src =" images / pixel.gif"边界=" 0"宽度= QUOT; 163"高度= QUOT 35 QUOT; alt ="联系
信息" />< / a>< img src =" images / diamond.gif"宽度= QUOT; 55" height =" 35"
alt ="" />< a href =" about.htm" id =" about">< img src =" images / about_active.jpg"
class =" pload"边界=" 0"宽度= QUOT; 90"高度= QUOT 35 QUOT; ALT ="" />< img
src =" images / pixel.gif"边界=" 0"宽度= QUOT; 90"高度= QUOT 35 QUOT; alt ="关于我们>
/>< / a>
< div>
< img SRC ="图像/ navbar.jpg" ALT ="" />
< / div>
< / div>
< div id =" mainart" >
< div class =" artblock">
< div class =" artistname">
< span class =" artistfirst"> S< / span> teven< span
class =" artistfirst"> H< / span> ofberger< br />< span
class =" limitededition">限制版：50< / span>
< / div>
< div class =" artimage">
< img src =" images / hofberger_minivase.jpg"高度= QUOT; 200"宽度= QUOT; 200" alt =""
/>
< / div>
< / div>
< / div>
< div id =" footer">
< div class =" hrgraphic">
< img src =" images / bottomlights.jpg"宽度= QUOT; 246"高度= QUOT; 52" ALT ="" />< br />
< img src =" images / hr.jpg"宽度= QUOT; 580"高度= QUOT 1 QUOT; ALT ="" />
< / div>
< div id =" navfooter">
< a HREF =" artists.htm" class =" navfooter">艺术家< / a> |< a href =" contact.htm"
class =" navfooter">联系信息< / a> |< a href =" about.htm"
class =" navfooter">关于我们< / a>
< / div>
< div id =" copyright">
版权所有？2004 Sunmetal Fine Art Co.版权所有。
< / div>
< / div>
< / div>
< / body>
< / html>
That is near complete code Neal and near complete CSS. The only things I
left out are the navbar information which work perfectly on both pages. Here
is the complete HTML but you''ll find it just about the same. The logo,
navbar and footer sections work on both IE and Mozilla, it''s just the
mainart class to the footer that''s causing the problem:
Here''s a link to the main page of the site. It''s exactly the same without
the new CSS, except for the middle mainart class that I changed on the
artists page: www.sunbadgeco.com/sunmetal/index.htm
This is the relavant HTML of the page in discussion however. As you can see
I only cut out the navbar stuff.
<link href="css/sunstyle.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="logo">
<a href="/sunmetalfineart/"><img src="images/logo.jpg" width="450"
height="120" border="0" alt="Sunmetal Fine Art Co. Home" /></a>
</div>
<div id="navmain">
<div>
<img src="images/navbar.jpg" alt="" />
</div>
<a href="artists.htm" id="artists"><img src="images/artists_active.jpg"
class="pload" border="0" width="148" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="148" height="35" alt="Featured
Artists" /></a><img src="images/diamond.gif" width="55" height="35" alt=""
/><a href="contact.htm" id="contact"><img src="images/contact_active.jpg"
class="pload" border="0" width="163" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="163" height="35" alt="Contact
Information" /></a><img src="images/diamond.gif" width="55" height="35"
alt="" /><a href="about.htm" id="about"><img src="images/about_active.jpg"
class="pload" border="0" width="90" height="35" alt="" /><img
src="images/pixel.gif" border="0" width="90" height="35" alt="About Us"
/></a>
<div>
<img src="images/navbar.jpg" alt="" />
</div>
</div>
<div id="mainart">
<div class="artblock">
<div class="artistname">
<span class="artistfirst">S</span>teven <span
class="artistfirst">H</span>ofberger<br /><span
class="limitededition">Limited Editions: 50</span>
</div>
<div class="artimage">
<img src="images/hofberger_minivase.jpg" height="200" width="200" alt=""
/>
</div>
</div>
</div>
<div id="footer">
<div class="hrgraphic">
<img src="images/bottomlights.jpg" width="246" height="52" alt="" /><br />
<img src="images/hr.jpg" width="580" height="1" alt="" />
</div>
<div id="navfooter">
<a href="artists.htm" class="navfooter">Artists</a>|<a href="contact.htm"
class="navfooter">Contact Information</a>|<a href="about.htm"
class="navfooter">About Us</a>
</div>
<div id="copyright">
Copyright ?2004 Sunmetal Fine Art Co. All Rights Reserved.
</div>
</div>
</div>
</body>
</html>
Applebrownbetty写道：
Applebrownbetty wrote:
我遇到了问题在显示完全CSS定位页面时，IE 6与Mozilla相比，并且想知道是否有任何常驻CSS大师可能很快就能找到问题。谢谢。
在IE中，页面看起来我希望它看起来如下（图片如下）：
www.sunbadgeco.com/sunmetal/ie.jpg
在Mozilla Firefox中，不知何故它不太对劲（如下图所示：
www.sunbadgeco.com/sunmetal/mozillafirefox。 jpg
Hi, I''ve run into a problem with IE 6 vs. Mozilla when displaying a
completely CSS positioned page, and was wondering if any resident CSS guru
might quickly be able to find the problem(s). Thank you.
In IE, the page looks how I want it to look (picture below):
www.sunbadgeco.com/sunmetal/ie.jpg
In Mozilla Firefox, somehow it''s not quite right (pic below):
www.sunbadgeco.com/sunmetal/mozillafirefox.jpg
首先，您应该将网址引用为网址（而不仅仅是带有路径的主机名
） 。其次，除非你把CSS和HTML放在你的服务器上，否则那些愿意支付你b $ b的人几乎不可能帮你实际这样做，
而不是甩掉它在你的Usenet文章的最后。
-
Shawn K. Quinn
First, you should cite Web addresses as URLs (not just hostnames with a path
slapped on the end). Second, it''s nearly impossible for those willing to
help you to actually do so unless you put the CSS and HTML on your server,
as opposed to slopping it on the end of your Usenet article.
--
Shawn K. Quinn
这篇关于IE看起来很好，Mozilla看起来很乱，请定位帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
