2012-11-11 94 views
1

我無法讓IE8識別邊距,我有一個徽標,我想垂直居中在左邊距的標題div中,但它似乎被忽略但在Chrome中顯示正常, Firefox和Safari。此外,我有一個登錄/註冊div應該在頂部右邊緣的頂部和右邊距,但他們也被忽略了。我將在這篇文章中包含JSFiddle鏈接和代碼。 下面是它看起來像在IE enter image description here 下面是它應該看起來像 enter image description hereIE 8忽略div中的邊距

的jsfiddle http://jsfiddle.net/ARhRt/

<html> 
    <head> 
     <title> 
     TESTING  
     </title> 
     <LINK href="CLLProfile.css" rel="stylesheet" type="text/css"> 


    </head> 

    <body> 
     <div id="wrapper"> 
     <div class="container"> 

      <div id="header"> 
       <img src="http://www.placekitten.com/400/100"> 

       <div class="login"> 
        <a href="http://www.signup.com">Sign Up</a> <a href="http://www.login.com">Login</a> 
       </div> 

       <div class="search"> 
        <form id ="search" action="" method="post" enctype="multipart/form-data"> 
         <label>Search:</label> 
         <input type="text" name="searchBox" id="searchBox" /> 
         <input type="submit" id="Submit" value="Submit" /> 
        </form> 
       </div> 

      </div> 

      <div class="navigation"> 
       <form id ="categoryForm" action="test1.php" method="post"> 
        <div id="categorydiv"> 
         <select name="thing" onChange="getSub(this.value)"> 
          <option value=0>Select Main Category<?=$options?> 
         </select> </div> 

        <div id="subcategorydiv"> 
         <select name="subCats" > 
          <option>Select Sub Category</option> 
         </select></div> 

         <input type="submit" value="Submit" /> 
       </form> 

      </div> 

       <div class="content"> 
        Here is the CONTENT 
        <div class="profileInfo"> 
         PROFILE INFO 
        </div> 
       </div> 

     </div> 

     </div> 
    </body> 

</html>​ 

CSS:

body{ 
    background: gainsboro; 
    text-align: center; 

} 

.container{ 
    padding-top: 20px; 
    background: gold; 
    width: 900px; 
    height: 1300px; 
    margin: 0 auto; 

} 

.content { 
    background: #aad500; 
    width: 800px; 
    height: 1000px; 
    margin: 0 auto; 
    border: black solid medium; 
    text-align: left; 
} 

#header { 

    width: 800px; 
    height: 150px; 
    margin: 0 auto; 
    background: #aad500; 
    border: black solid medium; 
    text-align: left; 

} 

#header img{ 
    position: relative; 
    left: 50px; 
    top: 25px; 


} 

.login { 
    width: 350px; 
    height: 35px; 
    float: right; 
    background: #aad500; 

} 

.search{ 
    background: #aad500; 
    color: white; 
    width: 250px; 
    height: 20px; 
    position: relative; 
    margin-top: 10px; 
    margin-left: 500px; 
} 

.profileInfo{ 
    background: whitesmoke; 
    width: 750px; 
    height: 800px; 
    margin-top: 50px; 
    margin-left: auto; 
    margin-right: auto; 


} 

.login a{ 
    float: right; 
    margin-left: 10px; 
    margin-right: 20px; 
    margin-top: 5px; 
    font-size: large; 
    color: whitesmoke; 
    text-align: right; 

} 

.login a:hover{ 
    color: green; 
} 

.navigation { 
    background: green; 
    width: 800px; 
    height: 50px; 
    margin: 0 auto; 
    border: black solid medium; 
    text-align: left; 
} 

.navigation select{ 
    float: left; 
    margin-top: 15px; 
    margin-left: 10px; 
} 

.navigation input { 
    margin-left: 10px; 
    margin-top: 15px; 
} 

.search #Submit{ 
    float: right; 
    position: absolute; 
} 

#wrapper{ 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
}​ 
+0

對我的作品(IE9在IE8模式) –

回答

2

這裏是我的對於可能會遇到同樣問題的用戶做錯了,我忘了添加!DOCTYPE A用戶提示t他和該職位因某種原因被刪除。

我離開的DOC的開始:在小提琴

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