[英]CSS div width in IE8
I'm very new to html and css so feel free to critique any bad practices you see in the code below... 我对html和css很新,所以请随意批评你在下面的代码中看到的任何不良做法......
I am trying to create a centered column that's 800 pixels across and the banner will be resized to 800 pixels. 我正在尝试创建一个800像素的居中列,横幅将调整为800像素。 When view this page in chrome or firefox it looks great. 在chrome或firefox中查看此页面时,它看起来很棒。 When I view it in IE8 the font is huge, there is a giant empty spot on the right side of the banner all the way down to the bottom, and the size of the "container" will not change no matter what I do in the css file. 当我在IE8中查看它的字体是巨大的时,横幅的右侧一直到底部有一个巨大的空白点,无论我在做什么,“容器”的大小都不会改变。 css文件。
CSS: CSS:
body {
font-family: Arial;
font-size: small;
background-color: #FFFFFF;
background-image: url(../images/victorianBackground.jpg);
background-position: top;
background-repeat: repeat;
color: #000000;
}
#container {
margin: -10 auto;
background-color: #D3CDBA;
text-align: left;
}
html>body #container {
width: 800px;
min-height:800px;
padding: 0 0px;
}
#banner {
width:800px;
}
#banner img {
width:800px;
padding:45 0px;
}
#content {
width:500px;
padding: 15px;
background-color: transparent;
}
/* Navigation */
#navigation ul {
list-style-type: none;
width: 800px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
background-color: #D3CDBA;
}
#navigation li:hover {
float: left;
color: #4676A4;
background-color: #D3CDBA;
}
#navigation a {
font-weight: bold;
text-decoration: none;
color: #000000;
display: block;
padding: 5px;
}
#navigation a:hover {
font-weight: bold;
text-decoration: none;
color: #992332;
}
#content a {
color:teal;
}
HTML: HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Park Avenue Neighborhood Association</title>
<meta name="keywords" content="Park Avenue Neighborhood Association Syracuse New York"/>
<link rel="stylesheet" type="text/css" href="../styles/style1.css">
</head>
<body>
<div id="container">
<div id="banner">
<img src="../images/banner.jpg" id="banner">
<br/>
</div>
<div id="navigation">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="History.html">History</a></li>
<li><a href="Houses.html">Houses</a></li>
<li><a href="LocalBusiness.html">Local Business</a></li>
<li><a href="events.html">Events</a></li>
<li><a href="Contacts.html">Contacts</a></li>
</ul>
</div>
<div id="content">
<h2>Content Header 1 </h2>
<p>Awesome Content </p>
<h2>Content Header 2 </h2>
<p>Awesome Content </p>
</div>
</body>
</div>
</html>
There are multiple issues I see with your source. 我在您的来源中看到了多个问题。 Non-exhaustive list: 非详尽清单:
1) You need a doctype. 1)您需要一个doctype。 Otherwise, browsers will render items in a non-standard way. 否则,浏览器将以非标准方式呈现项目。
Example: 例:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2) You have a <div>
ending after the </body>
tag. 2)在</body>
标记之后有一个<div>
结尾。 This is invalid. 这是无效的。
Fix: 固定:
<p>Awesome Content </p>
</div>
</div>
</body>
</html>
3) You don't need the extra <br>
in <div id="banner">
. 3)您不需要<div id="banner">
的额外<br>
。
Fix: 固定:
<div id="banner">
<img src="../images/banner.jpg" id="banner">
</div>
4) Now, if you want <div id="container">
to be centered and have a width of 800px, try the following. 4)现在,如果您希望<div id="container">
居中并且宽度为800px,请尝试以下操作。
Centering code that goes in your css (replaces existing): 对css中的代码进行居中(替换现有代码):
body { text-align: center; }
#container {
text-align: left;
width: 800px;
margin: auto;
}
5) For your font-size
declaration, you're using small
. 5)对于你的font-size
声明,你使用的是small
。 This will behave unpredictably. 这将表现得不可预测。 Instead, consider using either em
or px
for font size. 相反,请考虑使用em
或px
作为字体大小。
Font size with em
: em
字体大小:
body { font-size: 100%; line-height: 1.125em; }
#container { font-size: 0.875em; }
Font size with px
: 字体大小与px
:
body { font-size: 16px; line-height: 1.125em; }
#container { font-size: 12px; }
First thing I saw, you need to add this to the very first line of your HTML to force IE to render in standards mode, instead of quirks mode: 我看到的第一件事,你需要将它添加到HTML的第一行,以强制IE以标准模式呈现,而不是怪异模式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
In regard to centering the banner, try adding the following: 关于横幅中心,请尝试添加以下内容:
in body selector: 在体选择器中:
text-align: center; text-align:center;
in banner: 横幅:
margin-right: auto; margin-right:auto; margin-left: auto; margin-left:auto;
In regard to font size try using em or % sizing. 关于字体大小尝试使用em或%大小。
Other than that just tackle the problems one at a time, fine tune the details incrementally. 除此之外,一次只解决一个问题,逐步微调细节。 Throwing in everything all at once will only create confusion - chances are it wont work as expected, but will frustrate you. 一下子抛出所有东西只会造成混乱 - 它有可能无法按预期工作,但会让你感到沮丧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.