HTML到CSS转换probs：IE和Mozilla [英] HTML to CSS conversion probs: IE and Mozilla
问题描述
大家好！
我决定将基于表格的布局转换为纯CSS，以减少
文件大小并提高我的设计灵活性。
显然，我遇到了很多问题。我在IE（6）中编写了代码并测试了它的b $ b，但在Mozilla（firefox）中看起来很糟糕。我很确定我的
问题是基本的，因为页面上没有太多代码。我所拥有的是
我的网站的简单布局。
如果你们可以帮助我在IE中显示它应该如何
和Mozilla，我们将不胜感激。此外，您可以给我的任何提示
也非常感谢。
我的代码如下：
--------------------------------
< html>
< head>< title> CSS LAYOUT< / title>
< / head>
< body>
< style type =" text / css">
<！ -
body {
background-color：#CCCCCC;
font-family：verdana;
}
#wrapper {
保证金：自动;
text-align：center;
字体大小：10px;
}
#header {
text-align：left;
background-color：white;
padding：5px ;
宽度：693px;
}
..flashBanner {
宽度：683px;
身高：198px;
border：solid #CCCCCC 1px;
}
#navigation {
}
#navlist {
保证金：0;
填充：0;
填充顶部：5px;
}
#navlist li {
display：inline;
list-style-type：none;
padding-right ：10px;
}
#centerSection {
宽度：693px;
}
#headlines {
margin-top：5px;
text-align：left;
background - 颜色：白色;
填充：5px;
宽度：230px;
高度：180px;
浮动：left;
}
#loginBox {
text-align：left;
宽度：458px;
浮动：正确;
}
#loginInfo {
margin-top ：5px;
背景颜色：白色;
填充：5px;
}
#loginGraphic {
margin-top：5px;
background-color：white;
padding：5px;
身高：153px;
}
#bottomS ection {
text-align：left;
宽度：693px;
margin-top：5px;
}
#latestPostings {
background-color：white;
宽度：340px;
身高：130px;
填充：5px;
浮动：左;
}
＃聊天室{
背景颜色：白色;
宽度：348px;
高度：130px;
填充： 5px;
浮动：正确;
}
#footer {
背景颜色：白色;
宽度：693px;
填充：5px;
text-align：left;
margin-顶部：5px;
}
- >
< / style>
< div id =" wrapper">
< div id =" header">
< div class =" flashBanner">
< / div>
< div class =" navigation">
< ul id =" navlist">
&l t; li> HOME< / li>
< li> SUPPORT< / li>
< li> DISCUSSION< / li>
< / ul>
< / div>
< / div>
< div id =" centerSection"> ;
< div id =" headlines">
ddkjdl< br /> affdaf
< / div>
< div id =" loginBox">
< div id =" loginInfo">
mjhkjh
< / div>
< div id =" loginGraphic">
hkjh
< / div>
< / div>
< / div>
< div id =" bottomSection">
< div id =" latestPostings">
最新贴子
< / div>
< div id =" ; chatroom">
blah blah
< / div>
< / div>
< ; div id =" footer">
？2004
< / div>
< / div>
< / body>
< / html>
Hello everyone!
I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.
Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.
If you guys could help me in getting this to display how it should in both IE
and Mozilla, it would be greatly appreciated. Also, any tips you can give me
along the way would also be much appreciated.
My code is as follows:
--------------------------------
<html>
<head><title>CSS LAYOUT</title>
</head>
<body>
<style type="text/css">
<!--
body {
background-color : #CCCCCC;
font-family : verdana;
}
#wrapper {
margin : auto;
text-align : center;
font-size : 10px;
}
#header {
text-align : left;
background-color : white;
padding : 5px;
width : 693px;
}
..flashBanner {
width : 683px;
height : 198px;
border : solid #CCCCCC 1px;
}
#navigation {
}
#navlist {
margin : 0;
padding : 0;
padding-top : 5px;
}
#navlist li {
display : inline;
list-style-type : none;
padding-right : 10px;
}
#centerSection {
width : 693px;
}
#headlines {
margin-top : 5px;
text-align : left;
background-color : white;
padding : 5px;
width : 230px;
height : 180px;
float : left;
}
#loginBox {
text-align : left;
width : 458px;
float : right;
}
#loginInfo {
margin-top : 5px;
background-color : white;
padding : 5px;
}
#loginGraphic {
margin-top : 5px;
background-color : white;
padding : 5px;
height : 153px;
}
#bottomSection {
text-align : left;
width : 693px;
margin-top : 5px;
}
#latestPostings {
background-color : white;
width : 340px;
height : 130px;
padding : 5px;
float : left;
}
#chatroom {
background-color : white;
width : 348px;
height : 130px;
padding : 5px;
float : right;
}
#footer {
background-color : white;
width : 693px;
padding : 5px;
text-align : left;
margin-top : 5px;
}
-->
</style>
<div id="wrapper">
<div id="header">
<div class="flashBanner">
</div>
<div class="navigation">
<ul id="navlist">
<li>HOME</li>
<li>SUPPORT</li>
<li>DISCUSSION</li>
</ul>
</div>
</div>
<div id="centerSection">
<div id="headlines">
ddkjdl<br />affdaf
</div>
<div id="loginBox">
<div id="loginInfo">
mjhkjh
</div>
<div id="loginGraphic">
hkjh
</div>
</div>
</div>
<div id="bottomSection">
<div id="latestPostings">
latest postings
</div>
<div id="chatroom">
blah blah
</div>
</div>
<div id="footer">
?2004
</div>
</div>
</body>
</html>
推荐答案
Mikejacko86写道：
Mikejacko86 wrote:
大家好！
我决定将基于表格的布局转换为纯CSS，以减少文件大小并提高设计灵活性。
Hello everyone!
I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.
请看这个链接以获得一些帮助：
http://www.cs.tut.fi/~jkorpela/usenet/xpost.html
-
Brian（删除" .invalid"给我发电子邮件）
http://www.tsmchughs.com/
文章< 20 *************************** @ mb-m21 .aol.com>，mikejacko86
@ aol.com启示我们...
In article <20***************************@mb-m21.aol.com>, mikejacko86
@aol.com enlightened us with...
显然，我遇到了很多问题。我在IE（6）中编写了代码并对其进行了测试，但在Mozilla（firefox）中看起来很糟糕。我很确定我的问题是基本的，因为页面上的代码真的不多。我所拥有的是我的网站的简单布局。
Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.
在很多情况下，重要的是doctype，我不喜欢'$
见这里。一个doctype允许你正确验证你的html，你应该总是这样做。
它还告诉IE（和其他浏览器？）是否以怪癖模式渲染
与否。
我通常使用的doctype是
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional / / EN"
" http://www.w3.org/TR/REC-html40/loose.dtd">
一旦我给了你的页面是doctype，并经过测试，它看起来像是垃圾在
IE中。 :)
当我拿出它时，它看起来很不错。
所以，你的问题是没有doctype，IE渲染怪癖
模式。 Mozilla正常渲染而没有doctype。
给你的页面提供doctype并重试。
如果你不知道，doctype就像
文件中的第一行。
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
http：//www.w3.org/TR/REC-html40/loose.dtd">
< html>
< head> ;
< title>新文档< / title>
等等。
当你完成后，去验证你的HTML。
HTH
-
-
~kaeli~
生孩子最好的部分将他们还给他们的
父母。
http： //www.ipwebdesign.net/wildAtHeart
http：// www .ipwebdesign.net / kaelisSpace
One thing that matters a lot in many cases is the doctype, which I don''t
see here. A doctype allows you to properly validate your html, which you
should always do.
It also tells IE (and other browsers?) whether to render in quirks mode
or not.
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
Once I gave your page the doctype, and tested it, it looks like crap in
IE, too. :)
When I took it out, it looked nice.
So, your problem is that without the doctype, IE is rendering in quirks
mode. Mozilla is rendering normally without the doctype.
Give your page that doctype and try again.
In case you''re unaware, the doctype goes as the very first line in the
file.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title> New Document </title>
and so on.
When you''re done, go validate your html.
http://validator.w3.org/
HTH
--
--
~kaeli~
The best part of having kids is giving them back to their
parents.
http://www.ipwebdesign.net/wildAtHeart
http://www.ipwebdesign.net/kaelisSpace
kaeli写道：
kaeli wrote:
有一件事很重要在许多情况下是doctype，我不会在这里看到。 doctype允许您正确验证您的html，您应该始终这样做。
好建议。
它还告诉IE（以及其他浏览器？）是否以怪癖模式渲染
。
不幸的是，正确的信息。
我经常使用的doctype是
<！DOCTYPE HTML PUBLIC" - // W3C // DTD HTML 4.0 Transitional // EN"
" http：//www.w3.org/TR/REC-html40/loose.dtd">
One thing that matters a lot in many cases is the doctype, which I don''t
see here. A doctype allows you to properly validate your html, which you
should always do.
Good advice.
It also tells IE (and other browsers?) whether to render in quirks mode
or not.
Correct information, unfortunately.
The doctype I usually use is
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">
糟糕的选择。使用4.01严格。
-
马克。
Poor choice. Use 4.01 Strict.
--
Mark.
这篇关于HTML到CSS转换probs：IE和Mozilla的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
