请帮助-IE8上的CSS宽度问题
我对网站开发非常陌生,对HTML或CSS不太了解。然而,我知道我从我的托管站点选择使用的模板在IE8上有问题,但我不知道如何修复它。页面文本所在的主内容框稍微偏左,而不是居中。我不知道如何让它匹配页面上的其他边框 有人能告诉我如何在我的网站上调整页面的宽度和总体尺寸吗 网站:Pinesanimals.com请帮助-IE8上的CSS宽度问题,css,width,Css,Width,我对网站开发非常陌生,对HTML或CSS不太了解。然而,我知道我从我的托管站点选择使用的模板在IE8上有问题,但我不知道如何修复它。页面文本所在的主内容框稍微偏左,而不是居中。我不知道如何让它匹配页面上的其他边框 有人能告诉我如何在我的网站上调整页面的宽度和总体尺寸吗 网站:Pinesanimals.com <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="{%MetaCharset%}" />
<meta name="description" content="{%MetaDescription%}" />
<meta name="keywords" content="{%MetaKeywords%}" />
<title>{%MetaTitle%}</title>
<style>
html, body {
height: 100%;
padding-top:10px;
margin:10px;
}
body {
background: #3F3F3F url("images/tile.jpg");
background-position: top center;
font-family: "Arial";
font-size: 11px;
color:#FFFFFF;
padding:0px;
margin:0px;
}
a, a:link {
text-decoration: underline;
color:#FFF;
}
a:hover {
text-decoration: none;
color:#FFF;
}
a:active {
text-decoration: underline;
color:#FFF;
}
#container {
width: 774px;
height: auto !important;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom:0px;
}
#core_header {
width: 762px;;
height: 302px;
background: url(images/header.gif);
margin:0px;
padding:0px;
position:relative;
left:7px;
}
#header_text
{
position:relative;
right:420px;
top:40px;
font-size:16pt;
float:right;
font-weight:bold;
}
#header_text span {
font-size: 12pt;
}
img
{
margin:5px;
}
#core_left {
margin: 0;
width: 774px;
height:auto;
}
#core_right {
margin: 0;
float: left;
width:750px;
min-height:100%;
height:auto !important;
height:100%;
background: #4D7942;
color:#000;
margin-left:10px;
border-left: 4px solid #FFF;
border-right: 4px solid #FFF;
}
.content-box
{
padding:6px;
height:auto !important;
float:left;
width: 720px;
margin-bottom:10px;
font-family: "Arial";
font-size: 11px;
color:#FFF;
margin-left:10px;
}
.tumb
{
float: left;
margin-right:5px;
padding:0px;
}
.pagination
{
margin-left:auto;
margin-right:auto;
text-align:center;
}
#footer {
width:758px;
background: url(images/footer.gif) bottom center no-repeat;
text-align: center;
margin-left:auto;
margin-right:auto;
padding:0px;
height:26px;
clear:both;
position:relative;
left:2px;
}
#footer2
{
clear:both;
height:10px;
background: url(images/footer.jpg);
width:758px;
margin-left:10px;
}
h2
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:18px;
height:25px;
}
h3
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:15px;
height:22px;
margin:0px;
padding:0px;
color:#FFF;
width:718px;
background: url(images/content_header.jpg) bottom left repeat-x;
margin-bottom:5px;
font-weight:bold;
}
h4
{
font-family: "Verdana", Lucida Handwriting, sans-serif;
font-size:12px;
}
#navcontainer li {
color:#FFF;
display:inline;
position:relative;
height:25px;
width:100px;
padding-left: 55px;
padding-top:20px;
top:19px;
}
#navcontainer ul {
margin:0px;
padding: 0px;
padding-top: 0px;
padding-left: 0px;
width: 774px;
list-style-type: none;
background: url("images/menu_bg.gif");
height:60px;
}
#navcontainer a, #navcontainer a:visited {
display:inline;
color:#FFF;
text-decoration: none;
font-family:Arial;
font-size:13px;
}
#navcontainer a:hover {
margin:0px;
color:#FFF;
text-decoration: none;
border-bottom:2px solid #FFF;
}
div#sth {
text-align: center;
padding-top: 10px;
}
div#sth span {
margin: 0 auto;
}
</style>
<!--[if IE]>
<style type="text/css">
#footer
{
left:1px;
}
#core_right
{
height:300px;
margin-left:5px;
}
.content-box
{
margin-left:5px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="core_header">
<div id="header_text">{%WebsiteName%}<br /><span>{%WebsiteSlogan%}</span></div>
</div>
<div id="core_container">
<div id="core_container2">
<div id="core_left">
<div id="navcontainer">
<ul>
{%menu_start=1%}
<li><a href="{%menu_href%}">{%menu_display%}</a></li>
{%menu_end=1%}
</ul>
</div>
</div>
<div id="core_right"><!-- Your content goes here -->
<div class="content-box">
<h3>{%name%}</h3>
{%content%}</div>
<!-- End of content --></div>
</div>
<div id="footer2"> </div>
</div>
</div>
<div id="footer"> </div>
<div id="sth"><span>{%WebsiteFooter%}</span></div>
<br />
</body>
</html>
谢谢,,
-Danny B这应该是标准web调试的一种情况: 首先,您需要一个DOM检查器并知道如何使用它 然后,您需要从站点中删除各种格式,直到将问题降至最低 希望一个最小的版本能让问题变得明显。 如果没有,请在此处发布HTML代码的最低版本,我们将进行查看 但是这里很少有人愿意深入研究代码中所有不相关的部分 通过尝试和错误编辑,我通过以下方式修复了它: 在第一个核心单元右侧,将宽度更改为758
In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.
在[if IE]内的第二个core_右内,将边距从左改为10
我想可以了。试着换一行:
<!--[if IE]>
到
<!--[if lt IE 8]>
问题在于添加到该条件块的右侧面板和页脚的边距。IE8不需要它们,但我猜IE7需要它们。在这个模块中
<!--[if IE]>
<style type="text/css">
#footer
{
left:1px;
}
#core_right
{
height:300px;
margin-left:5px;
}
.content-box
{
margin-left:5px;
}
</style>
<![endif]-->
删除core_right中的左边距:5px和左边距:1px,您应该在那里,尽管我不能说它是否会出现在所有浏览器中,或者只是IE8用于检查其他浏览器。如果divcore_right的左边距为10px,而不是5px,那么在IE8中看起来就很好。我想对大家说声谢谢 我使用了以下两个技巧: 1在第一个核心单元右侧,将宽度更改为758
In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.
二,
到
<!--[if lt IE 8]>
我在IE8、Safari和Firefox上试过这个网站,现在看起来不错
丹尼B。
DOM inspector和a总的来说必须具备:谢谢-我将尝试其中一些,看看它是否解决了问题。老实说,我以前从未听说过DOM检查器,但如果本页上的提示不能解决问题,我肯定会尝试一下。谢谢,-丹尼B。不客气。请对有帮助的答案进行投票,并选择一个作为接受答案。