오른쪽 열이 IE6/7/8에서 올바르게 정렬되지 않습니다.

Question

저는이 기능을 처음 사용하지만 여기에 있습니다. 나는이 웹 사이트 http://www.panelmaster.co.uk을 개발해 왔으며 대부분의 설계 문제를 해결할 수있었습니다!

IE에서 사이트를 살펴보면 오른쪽 열이 아래로 떨어지고 오른쪽 열과 가운데 열에 정렬되지 않은 것 같습니다. 이 문제는 IE에서만 발생합니다. 파이어 폭스와 사파리에서는 괜찮습니다.

아래 웹 사이트의 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;} 

Answer 1

내부 클래스 "templatemo_sidebar_wrapper"로 DIV를 이동하십시오 클래스 "templatemo_content_wrapper"를 가진 DIV.

또 다른 참고로, 귀하의 사이트에는 약간의 오류가 있습니다. 나는 당신을 좌절 시키거나 실망시키려는 것이 아니지만, 웹 디자인을 배우는 데 정말로 많은 시간을 투자해야합니다. 약 10MB 크기의 사이트를로드하는 데 약 1 분 45 초가 걸렸습니다. 이것은 어떤 표준에서도 용납 될 수없는 것입니다. www.squarespace.com 또는 비슷한 것으로 전환하는 것이 좋습니다. 웹 디자인 회사가 처음부터 디자인하도록하는 것보다 사이트를 수정하는 것이 더 많은 비용이들 것이라고 지금 말씀 드릴 수 있습니다.

귀하의 웹 사이트는 도움이 될 것보다 귀하의 비즈니스에 해를 끼칠 가능성이 큽니다. 행운을 빕니다.

편집 : 내 "templatemo_content_wrapper"을 "float_r templatemo_sidebar_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>