내가 이해하지 못하는 CSS 문제

IE 및 FireFox에서 http://keramed.com을 살펴보십시오.내가 이해하지 못하는 CSS 문제

FireFox에서는 예상대로 보입니다. IE에서는 메인 블록이 훨씬 더 아래쪽에 있으며 나는 그것을 보지 못합니다.

div#BoxHouse { 
    margin-left: 0px; /* 72 */ 
    margin-right: 25px; 
} 

div.FloatingBox { 
    text-align: center; 
    float: left; 
    width: 205px; 
    border: 1px solid #6C5C3B; 
    padding: 0px 0px 5px 0px; 
    background-image: url(transwhite.png); 
    margin-left: 0.5em; 
    margin-bottom: 30px; 
} 

div.FloatingContent { 
    text-align: center; 
    float: left; 
    width: 90%; 
    border: 0px solid #6C5C3B; 
    padding: 0px; 
    background-image: url(transwhite.png); 
    margin-left: 0.5em; 
} 

#content { 
    width: 90%; 
    height: auto; 
    background: url(transwhite.png); 
    border: 1px solid #3F4933; 
    margin-left: 35px; /* 72 */ 
    margin-right: 20px; 
    margin-top: 8px; 
    margin-bottom:20px; 
    padding: 5px 0px 5px 0px; 
    z-index: 1; 
    overflow:auto; 
    top: 5em; 
    padding-top: 5px; 
    } 

#leftnavigation { 
position : fixed; 
height : auto; 
top : 10%; 
left : 0; 
width : 30%; /* 40 */ 
margin : 0px 0px 0px 1px; 
color : #000000; 
padding : 0px; 
overflow : auto; 
} 

#columncontent { 
position : fixed; 
top : 10%; 
bottom : 100px; 
margin : 40px 0px 0px 220px; 
width : 80%; 
height : auto; 
padding-left : 5px; 
padding-right : 12px; 
color : #000000; 
border-left : 1px solid #6C5C3B; 
overflow : auto; 
}

코드는 다음과 같습니다 :이 경우 왜

<div id="leftnavigation"> 
    <div id="BoxHouse"> 
    <br /><br /><br /><br /><br /> 
      <div id="Box1" class="FloatingBox"> 
       <span class="legend"><a name="announcements">Announcements</a></span> 
       <?php include 'announcements.inc'; ?> 
      </div> 

      <br /><br /><br /><br /><br /><br /> 
      <div id="Box2" class="FloatingBox"> 
       <span class="legend"><a name="news">News</a></span> 
       <?php include 'othernews.inc'; ?> 
      </div> 
      <br /><br /> 
     </div> 
    </div> 

    <div id="columncontent"> 
     <br /> 
     <div class="FloatingContent"> 
      <div id="container"> 

        <!-- Main tabs across the top --> 
        <ul> 
         <li><a href="#Home"><span>Home</span></a></li> 
         <li><a href="#Products"><span>Products</span></a></li> 

         <?php 
          if ($_SESSION['ALLOWORDERING'] == "TRUE") 
           { ?> 
            <li><a href="#Ordering"><span>Ordering</span></a></li> 
         <?php } ?> 

         <li><a href="#AboutMain"><span>About KeraMed</span></a></li> 
         <li><a href="#MyKeramed"><span>My KeraMed</span></a></li> 
        </ul> 


      </div> 

     </div> 
    </div>

나도 몰라 여기

는 CSS입니다!

출처

2010-01-21 JT.

Doctype이 없으면 브라우저가 일치하지 않게되는 Quirks Mode을 트리거합니다. Quirks 모드에서 브라우저 간의 레이아웃 문제를 처리하는 것은 상당히 어렵습니다.

표준 (AKA 엄격) 모드를 트리거하는 Doctype을 추가하고 validate HTML을 추가하십시오. 이것은 모든 문제를 해결하지는 못하지만 (Pekka가 말한 것처럼) 그렇게하는 것이 가장 현명한 출발점입니다.

내가 권하고 싶습니다 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd">

는 또한 margins 및 기타 표현 적 마크 업으로 layout tables, 복수의 남용 <br> 요소를 버려야하는 것이 현명 할 것이다.

출처

2010-01-21 18:08:04 Quentin

+1. 어쩌면 바로 문제를 해결할 수는 없지만 * 모든 HTML/CSS 디버깅의 기초입니다. –

@David - 모든 페이지마다 DocType을 사용해야합니까? 하지만 그게 바로 해결 됐어! –

예. 모든 HTML 문서는 Doctype으로 시작해야합니다 (처리 지침 및 설명을 할인하면 일반적으로 피해야합니다) – Quentin

내가 이해하지 못하는 CSS 문제

답변

관련 문제