幫助請 - 在IE8上的CSS寬度問題

我對網站開發很陌生，對HTML或CSS知之甚少。不過，我知道我選擇從我的託管站點使用的模板在IE8上存在問題，但我不知道如何解決這個問題。頁面文本所在的主要內容框稍微比左側居中。我不知道如何讓它匹配頁面上的其他邊框。幫助請 - 在IE8上的CSS寬度問題

有人可以告訴我怎樣才能修復我的網站的寬度和整體頁面尺寸？

網站：PineBarrensAnimals.com

<!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">&nbsp;</div> 
</div> 
</div> 
<div id="footer">&nbsp;</div> 
<div id="sth"><span>{%WebsiteFooter%}</span></div> 
<br /> 
</body> 
</html>

謝謝 - 丹尼乙

來源

2010-02-24 user280738

這應該是標準的網絡調試的情況：

首先，你需要一個DOM檢查器（和知道如何使用它）。

然後，您需要從您的網站中刪除各種格式，直到您達到最低限度仍然顯示問題。

希望最小版本應該使問題變得明顯。如果不是，請在這裏發佈最小版本的HTML代碼，我們來看看。

但是，這裏很少有人想要挖掘代碼中所有不相關的部分。

EDIT通過試驗和錯誤，我固定這種方式：

在第一#core_right，改變寬度758

在第二#core_right（內[如果IE] ），將MARGIN-LEFT改爲10.

我認爲這樣做。

來源

2010-02-24 22:20:15 abelenky

DOM檢查和必須具備一般：https://addons.mozilla.org/en-US/firefox/addon/1843 – 2010-02-24 22:21:37

嘗試修改此行：

<!--[if IE]>

要

<!--[if lt IE 8]>

問題是與邊緣加入到右側面板和頁腳中的是條件塊。 IE 8不需要它們，但我猜IE 7的確如此。

來源

2010-02-24 22:21:24 Joel

謝謝 - 我要去嘗試其中的一些，看看它是否解決了這個問題。老實說，我從來沒有聽說過DOM Inspector，但如果這個頁面上的提示不能糾正這個問題，我一定會試試看。謝謝， - Danny B. – user280738 2010-02-24 23:18:00

在此塊

<!--[if IE]> 
    <style type="text/css"> 

    #footer 
    { 
     left:1px; 
    } 

    #core_right 
    { 
     height:300px; 
     margin-left:5px; 
    } 
    .content-box 
    { 
     margin-left:5px; 
    } 

    </style> 
    <![endif]-->

刪除margin-left: 5px在core_right和left: 1px，你應該是那裏，雖然我不能說是否會在所有的瀏覽器，或只是IE8（使用IETester與其他人一起檢查。）

來源

2010-02-24 22:24:05

如果「div＃core_right」有10px的左邊距，而不是5px，則在IE8中看起來會很好。

來源

2010-02-24 22:26:34

我想對大家說聲謝謝。

我用下面的2個提示：

1）在第一#core_right，改變寬度758

In the second #core_right (within [if IE]), changed MARGIN-LEFT to 10.

2）要

<!--[if lt IE 8]>

我嘗試的網站在IE 8，Safari和Firefox上，現在看起來不錯。

丹尼B.

來源

2010-02-25 00:44:54 user280738

不客氣。請投票選出有幫助的答案，然後選擇一個作爲「已接受」的答案。 – abelenky 2010-02-25 05:15:24

幫助請 - 在IE8上的CSS寬度問題

回答

相關問題