右手邊欄在IE6/7/8中沒有正確對齊

我是新來的，但在這裏。我一直在開發這個網站http://www.panelmaster.co.uk，我已經設法解決了大多數設計問題，但只有一個！右手邊欄在IE6/7/8中沒有正確對齊

如果您在IE中查看該網站，右列似乎下拉並且與右列和中間列不對齊。這個問題只發生在IE瀏覽器上，因爲我發現它在Firefox和safari中很好。

我在網站的CSS下面提供了。

如果你們能幫我解決問題，我將不勝感激。

在此先感謝。 :)

==========================

body { 
    margin: 0; 
    padding: 0; 
    line-height: 1.5em; 
    font-family: Tahoma, Geneva, sans-serif; 
    font-size: 12px; 
    color: #666; 
    background-image: url(images/templatemo_body_top.jpg); 
    background-color: #90857c; 
    background-repeat: repeat-x; 
    background-position: top; 
    text-align: left; 
} 

a:link, a:visited { color: #073475; text-decoration: none; font-weight: normal; } 
a:active, a:hover { color: #073475; text-decoration: underline; } 

h3 { 
    color: #1e7da9; 
    font-size: 16px; 
    font-weight: bold; 
} 

h2 { 
    color: #1e7da9; 
    font-size: 16px; 
    font-weight: bold; 
} 

h1 { 
    color: #696969; 
    font-size: 20px; 
    font-weight: bold; 
} 

p { margin: 0px; padding: 0px; } 

img { margin: 0px; padding: 0px; border: none; } 

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; } 
.cleaner_h30 { clear: both; width:100%; height: 30px; } 
.cleaner_h40 { clear: both; width:100%; height: 40px; } 

.float_l { float: left; } 
.float_r { float: right; } 

.margin_r20 { margin-right: 20px; } 

#templatemo_body_wrapper { 
    width: 100%; 
    background: url(images/templatemo_body_bottom.png) repeat-x bottom center; 
} 

#templatemo_wrapper { 
    width: 970px; 
    padding: 0 10px; 
    margin: 0 auto; 
    background: url(images/templatemo_wrapper_top.jpg) no-repeat top center; 
} 

/* header */ 

#templatemo_header { 
    clear: both; 
    width: 890px; 
    height: 60px; 
    padding: 20px 40px 
} 

#templatemo_header #site_title { 
    float: left; 
    padding-top: 15px; 
} 

#site_title a { 
    font-size: 24px; 
    color: #FFFFFF; 
    font-weight: bold; 
    text-decoration: none; 
} 

#site_title a:hover { 
    font-weight: bold; 
    text-decoration: none; 
} 

#site_title a span { 
    display: block; 
    margin-top: 5px; 
    font-size: 14px; 
    color: #fff; 
    font-weight: bold; 
    letter-spacing: 2px; 
} 


/* end of header */ 

/* menu */ 

#templatemo_menu { 
    clear: both; 
    width: 970px; 
    height: 80px; 
    background: url(images/templatemo_menubar.png) no-repeat; 
} 

#search_box { 
    width: 990px; 
    height: 35px; 
    text-align: right; 
} 

#search_box form { 
    margin: 0; 
    padding: 5px 40px; 
} 

#search_box #input_field { 
    height: 20px; 
    width: 300px; 
    color: #000000; 
    font-size: 12px; 
    font-variant: normal; 
    line-height: normal; 
    border: 1px solid #CCCCCC; 
    background: #FFFFFF; 
} 

#search_box #submit_btn { 
    height: 24px; 
    width: 100px; 
    cursor: pointer; 
    font-size: 12px; 
    text-align: center; 
    vertical-align: bottom; 
    white-space: pre; 
    outline: none; 
    color:#666666; 
    border: 1px solid #CCCCCC; 
    background: #FFFFFF; 
} 

#templatemo_menu ul { 
    width: 890px; 
    height: 35px; 
    margin: 0; 
    padding: 7px 40px; 
    list-style: none; 
} 

#templatemo_menu ul li { 
    padding: 0px; 
    margin: 0px; 
    display: inline; 
} 

#templatemo_menu ul li a { 
    float: left; 
    display: block; 
    margin-right: 40px; 
    font-size: 13px; 
    text-decoration: none; 
    color: #fff;  
    font-weight: normal; 
    outline: none; 
} 
#templatemo_menu ul li a:hover, #templatemo_menu ul .current { 
    color: #162127; 
} 

/* end of menu */ 

/* contetnt */ 

#templatemo_content_wrapper { 
    clear: both; 
    padding: 0px 0; 
} 

#templatemo_content { 
    float: left; 
    margin-left: 10px; 
    width: 550px; 
} 

#banner { 
    margin: 0 0 10px 0; 
} 

#templatemo_content #content_top { 
    width: 550px; 
    height: 20px; 
    background: url(images/templatemo_content_top.png) no-repeat; 
} 

#templatemo_content #content_bottom { 
    width: 550px; 
    height: 20px; 
    background: url(images/templatemo_content_bottom.png) no-repeat; 
} 

#templatemo_content #content_middle { 
    width: 510px; 
    padding: 5px 20px 0px 20px; 
    background: url(images/templatemo_content_middle.png) repeat-y; 
} 

#content_middle p { 
    text-align: justify; 
} 

.templatemo_sidebar_wrapper { 
    width: 200px; 
} 

.templatemo_sidebar { 
    width: 197px; 
    padding-right: 3px; 
    background: url(images/templatemo_sidebar_middle.png) repeat-y; 
} 

.templatemo_sidebar_top { 
    width: 200px; 
    height: 20px; 
    background: url(images/templatemo_sidebar_top.png) no-repeat; 
} 

.templatemo_sidebar_bottom { 
    width: 200px; 
    height: 20px; 
    background: url(images/templatemo_sidebar_bottom.png) no-repeat; 
} 

.templatemo_sidebar .sidebar_box { 
    clear: both; 
    padding-bottom: 20px; 
} 

.sidebar_box1 { 
    padding: 15px; 

} 
.sidebar_box h2 { 
    color: #2d84ad; 
    font-size: 16px; 
    padding-left: 25px; 
    font-weight: bold; 
    margin: 0 0 10px 10px; 
    background: url(images/templatemo_sidebar_h1.jpg) left center no-repeat; 
} 

.sidebar_box .sidebar_box_content { 
    padding: 15px; 
    background: url(images/templatemo_sidebar_box_top.png) top repeat-x; 
} 

.sidebar_box img { 
    border: 1px solid #999; 
    margin-bottom: 5px; 
} 

.sidebar_box .discount { 
    margin: 5px 0 0 0; 
    font-weight: bold; 
} 

.sidebar_box .discount span { 
    color: #C00; 
} 

.left_sidebar_box .discount a { 
    font-weight: bold; 
    color: #000; 
} 

.sidebar_box .categories_list { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

.categories_list li { 
    padding: 0; 
    margin: 0; 
} 

.categories_list li a { 
    display: block; 
    color: #201f1c; 
    padding: 5px 0 5px 20px; 
    background: url(images/list.png) center left no-repeat; 
} 
.categories_list li a:hover { 
    color: #439ac3; 
    text-decoration: none; 
} 

.news_box { 
    clear: both; 
    margin-bottom: 5px; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #999; 
} 

.news_box h4 { 
    padding: 2px 0; 
    margin: 0; 
} 

.news_box h4 a { 
    font-size: 12px; 
    font-weight: normal; 
    color: #1893f2; 
} 

#newsletter_box label { 
    display: block; 
    margin-bottom: 10px; 
} 

#newsletter_box .input_field { 
    height: 20px; 
    width: 155px; 
    padding: 0 5px; 
    margin-bottom: 10px; 
    color: #000000; 
    font-size: 12px; 
    font-variant: normal; 
    line-height: normal; 
} 

#newsletter_box .submit_btn { 
    float: right; 
    height: 30px; 
    width: 80px; 
    margin: 0px; 
    padding: 3px 0 15px 0; 
    cursor: pointer; 
    font-size: 12px; 
    text-align: center; 
    vertical-align: bottom; 
    white-space: pre; 
    outline: none; 
} 

.product_box { 
    float: left; 
    width: 223px; 
    padding: 10px; 
    margin-bottom: 20px; 
    border: 1px solid #CCC; 
    text-align: center; 
} 

.product_box img { 
    margin-bottom: 10px; 
} 

.product_box h3 { 
    color: #2a2522; 
    font-size: 12px; 
    margin: 0 0 10px; 
} 

.product_box p { 
    margin-bottom: 10px; 
} 

.product_box p span { 
    color: #cf5902; 
    font-size: 14px; 
    font-weight: bold; 
} 

.product_box .detail { 
    float: right; 
} 

.product_box .addtocard { 
    float: left; 
    font-weight: bold; 
    padding-right: 20px; 
    background: url(images/templatemo_shopping_cart.png) bottom right no-repeat; 
} 
/* end of content */ 

/* footer */ 

#templatemo_footer_wrapper { 
    background: url(images/templatemo_footer.png) repeat-x; 
} 

#templatemo_footer { 
    width: 910px; 
    height: 85px; 
    padding: 50px 40px 30px 40px; 
    margin: 0 auto; 
    text-align: center; 
    color: #a9a098; 
} 

#templatemo_footer a { 
    color: #d7d1cc; 
    font-weight: normal; 
} 

#templatemo_footer a:hover { 
    text-decoration: none; 
    color: #FFFF33; 
} 

#templatemo_footer .footer_menu { 
    margin: 0 0 30px 0; 
    padding: 0px; 
    list-style: none; 
} 

.footer_menu li { 
    margin: 0px; 
    padding: 0 20px; 
    display: inline; 
    border-right: 1px solid #d7d1cc; 
} 

.footer_menu li a { 
    color: #d7d1cc; 
} 

.footer_menu .last_menu { 
    border: none; 
} 




/* end of footer */ 

/*twitter*/ 

#twitter_div {border-top: 0px;} 

#twitter_div a {color: #0000ff !important;} 

#twitter_update_list {margin-left: -1em !important; margin-bottom: 0px !important;} 

#twitter_update_list li {list-style-type: none; padding-right: 5px; } 

#twitter_update_list li a {color: #0000ff; padding-right: 5px;} 

#twitter_div {border-bottom: 0px; padding-bottom: 10px; padding-top:6px; padding-right: 5px;} 

#twitter_div a, #twitter_update_list li a {text-decoration: none !important;} 

#twitter_div a:hover, #twitter_update_list li a:hover {text-decoration:underline !important;}

來源

2010-04-20 Kalpesh Vasta

包括標題爲「緊急」只是降低得到響應 – 2010-04-20 22:41:46

的機會，這屬於上的DocType（http://doctype.com/）。 – 2010-04-20 22:42:37

此外，未能正確格式化您的代碼（縮進代碼與四個空格）使得它幾乎難以辨認。 – 2010-04-20 22:44:09

嘗試與類「templatemo_sidebar_wrapper」內移動DIV類「templatemo_content_wrapper」的DIV。

另一方面，您的網站存在一些問題。我並沒有試圖挫敗你，也沒有讓你失望，但是你真的應該投入大量的時間來學習網頁設計。我花了大約1分45秒來加載佔地近10MB的站點。這是任何標準都無法接受的。我強烈建議切換到www.squarespace.com或類似的東西。我現在可以告訴你，讓網站設計公司修復你的網站要花費更多的錢，而不是讓他們從頭開始設計網站。

在目前的狀態下，您的網站可能會對您的業務造成的傷害超過它的幫助。祝你好運。

編輯：移動「templatemo_sidebar_wrapper float_r」內部「templatemo_content_wrapper」（我不知道這是去工作......你已經打算在此頁面上有很多）。您的代碼目前看起來是這樣的：

<div id="templatemo_content_wrapper"> 
    <div class="templatemo_sidebar_wrapper float_l"></div> 
    <div id="templatemo_content"></div> 
    <div id="content_bottom"></div> 
</div> 


<div class="templatemo_sidebar_wrapper float_r"></div>

來源

2010-04-21 03:29:45

謝謝布賴恩的建議，但我並沒有完全明白你在移動DIV方面的意思。 – 2010-04-21 11:37:58

右手邊欄在IE6/7/8中沒有正確對齊

回答

相關問題