2016-11-06 64 views
0

因爲做錯了某些事情。 我想將我的標誌放在我的網站上,並將網站的標題放在旁邊。但我的「headerlogo.png」不會與火狐和IE中的「高度」互換,只能在Chrome中工作......不知道爲什麼...... 想要放置一些截圖但未奏效...Firefox + IE,不要在Chrome上運行圖片Html,CSS,

所以網站已經在線。你可以訪問它Click HERE。 所以這裏是我的home.html的代碼我正在研究和測試,並將最終代碼複製到其他頁面,所以不關心它們... 只有關於home.html

這裏是對於home.html的和我的style.css代碼:

body { 
 
    background-color: #222; 
 
} 
 

 
header { 
 
    background-color: #000; 
 
    color: #FFF; 
 
    font-weight: bolder; 
 
} 
 

 
table { 
 
    border-style: none; 
 
} 
 

 
.headerlogo { 
 
    height: 7%; 
 
    margin-left: 2%; 
 
    margin-bottom: 2%; 
 
    margin-top: 2%; 
 
} 
 

 
.headerpic { 
 
    padding-left: 9%; 
 
    margin-bottom: 2%; 
 
    margin-top: 2%; 
 
    width: auto; 
 
    height: 100%; 
 
} 
 

 
.navpic { 
 
    width: 17%; 
 
    float: left; 
 
    background-color: #000; 
 
    margin-right: 3%; 
 
    margin-bottom: 0.2%; 
 
    box-shadow: 5px 0px 10px black; 
 
} 
 

 
.nav { 
 
    list-style-type: none; 
 
    background-color: #000; 
 
    margin-top: -1%; 
 
} 
 

 
.navpic:hover { 
 
    background-color: #111; 
 
} 
 

 
hr.bottom { 
 
    margin-bottom: 2%; 
 
} 
 

 
div.articletd { 
 
    background-color: #111; 
 
    color: #FFF; 
 
    width: 640px; 
 
    height: 400px; 
 
    font-family: sans-serif; 
 
    float: left; 
 
    margin-top: -3px; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    margin-left: 2%; 
 
} 
 

 
td.normalarticle { 
 
    background-color: #111; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    line-height: 1.6; 
 
    height: auto; 
 
    width: 49.5%; 
 
} 
 

 
table.normalarticleeinseitig { 
 
    background-color: #111; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
    text-align: left; 
 
    vertical-align: top; 
 
    padding-left: 2%; 
 
    padding-right: 2%; 
 
    line-height: 1.6; 
 
    height: auto; 
 
    width: 100%; 
 
    ; 
 
    border: 0 solid #222; 
 
    ; 
 
} 
 

 
table.normalarticle { 
 
    width: 100%; 
 
    line-height: 1.6; 
 
    border: 0 solid #222; 
 
    ; 
 
} 
 

 
.middlearticle { 
 
    width: 1%; 
 
    background-color: #222; 
 
} 
 

 
.kontaktformularrechts { 
 
    margin-left: 20%; 
 
} 
 

 
.buttonformular { 
 
    background-color: #111; 
 
    color: #FFF; 
 
    border-width: medium; 
 
} 
 

 
h1 { 
 
    font-size: 2em; 
 
    margin-top: 2%; 
 
    text-align: left; 
 
} 
 

 
p.ptd { 
 
    line-height: 1.6; 
 
    text-align: left; 
 
    padding-left: 2%; 
 
} 
 

 
.spotifylink { 
 
    width: 4%; 
 
    height: 4%; 
 
} 
 

 
a.spotifylink:hover { 
 
    background-color: #FFF; 
 
} 
 

 
.footer { 
 
    background-color: #000; 
 
    margin-top: 1%; 
 
    color: #FFF; 
 
} 
 

 
.footerp { 
 
    margin-left: 5%; 
 
    font-family: sans-serif; 
 
} 
 

 
.footertd { 
 
    width: 100%; 
 
} 
 

 
footer td { 
 
    width: 7.5%; 
 
    text-align: center; 
 
} 
 

 
footer img { 
 
    margin-top: -20% 
 
} 
 

 
.recht { 
 
    margin-top: 1%; 
 
    background-color: #111; 
 
    color: #FFF; 
 
    font-family: sans-serif; 
 
} 
 

 
.impressumtable { 
 
    width: 37.5%; 
 
    margin-left: 3.5%; 
 
} 
 

 
.impressumtd { 
 
    text-align: left; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
a:link { 
 
    color: #FFF; 
 
} 
 

 
a:visited { 
 
    color: #FFF; 
 
} 
 

 
a:active { 
 
    color: #FFF; 
 
} 
 

 
a:hover { 
 
    color: #AAA; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
    <link rel="shortcut icon" type="image/x-icon" href="bilder/favicon.png"> 
 
    <title>DJ Dre Loo</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
      <table> 
 
       <tr> 
 
       <td > 
 
         <img class="headerlogo" src="bilder/headerlogo.png"> 
 
       </td> 
 
       <td class="headerpic"> 
 
        <img src="bilder/headertitle.png"> 
 
       </td> 
 
       </tr> 
 
      </table> 
 

 
    </header> 
 
    <hr> 
 
    <nav> 
 
     <div> 
 
      <ul class="nav"> 
 
       <li class="navfirst"> 
 
        <a href="home.html"><img class="navpic" src="bilder/home.png"></a> 
 
       </li> 
 
       <li> 
 
        <a href="biografie.html"><img class="navpic" src="bilder/biografie.png"></a> 
 
       </li> 
 
       <li> 
 
        <a href="djing.html"><img class="navpic" src="bilder/djing.png"></a> 
 
       </li> 
 
       <li> 
 
        <a href="kontakt.html"><img class="navpic" src="bilder/kontakt.png"></a> 
 
       </li> 
 
       <li> 
 
        <a href="td.html"><img class="navpic" src="bilder/td.png"></a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 
     <hr class="bottom"> 
 
    </nav> 
 

 
    <article> 
 
     <table class="normalarticleeinseitig"> 
 
      <tr> 
 
       <td> 
 
        <div style="height:10px;font-size:10px;"></div> 
 
        <div align="center"> 
 
         <img width="100%" src="bilder/eingebunden/Homepic.png"> 
 
        </div> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
    </article> 
 
    <hr height="0px" color="#222"> 
 
    <footer> 
 
     <div class="footer"> 
 
      <table class="footertd"> 
 
       <tr> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.facebook.com/djdreloo/">Facebook</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="mailto:[email protected]">Email</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.instagram.com/dreloo/">Instagram</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://twitter.com/djdreloo">Twitter</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://open.spotify.com/user/andreschuele">Spotify</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="http://www.mixcrate.com/djdreloo">Mixcrate</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.mixcloud.com/DJ_DRE_LOO/">Mixcloud</a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.facebook.com/djdreloo/">Mixify</a> 
 
         </p> 
 
        </td> 
 
       </tr> 
 
       <tr> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.facebook.com/djdreloo/"><img width="25%" src="bilder/facebooklogo.png"></a> 
 
         </p> 
 
        </td> 
 

 
        <td> 
 
         <p class="footerp"> 
 
          <a href="mailto:[email protected]"><img width="30%" class="linklogos" src="bilder/maillogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.instagram.com/dreloo/"><img width="25%" class="linklogos" src="bilder/instagramlogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://twitter.com/djdreloo"><img width="25%" class="linklogos" src="bilder/twitterlogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://open.spotify.com/user/andreschuele"><img width="25%" class="linklogos" src="bilder/spotifylogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="http://www.mixcrate.com/djdreloo"><img width="25%" class="linklogos" src="bilder/mixcratelogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://www.mixcloud.com/DJ_DRE_LOO/"><img width="30%" class="linklogos" src="bilder/mixcloudlogo.png"></a> 
 
         </p> 
 
        </td> 
 
        <td> 
 
         <p class="footerp"> 
 
          <a href="https://open.spotify.com/user/andreschuele"><img width="45%" class="linklogos" src="bilder/mixifylogo.jpg"></a> 
 
         </p> 
 
        </td> 
 
       </tr> 
 

 
      </table> 
 
     </div> 
 
     <div class="recht"> 
 
      <table class="impressumtable"> 
 
       <tr> 
 
        <td class="impressumtd"> 
 
         <a href="Impressum.html">Impressum</a> 
 
        </td> 
 
        <td class="impressumtd"> 
 
         <a href="Disclaimer.html">Disclaimer</a> 
 
        </td> 
 
        <td class="impressumtd"> 
 
         <a href="selber.html">(*)Warum...</a> 
 
        </td> 
 

 
       </tr> 
 
      </table> 
 
     </div> 
 
    </footer> 
 

 
</body> 
 

 
</html>

也許你可以幫我:)

回答

0

問題是與表元素,當我檢查我的Firefox瀏覽器時,該網站是不可見的,因爲我在鉻上查看。

更好地刪除表和使用HTML float屬性

http://www.w3schools.com/cssref/pr_class_float.asp

+0

該網站不包含任何css3元素,所以你不需要跨瀏覽器supprorting標籤。它與您的表代碼 –

+0

與浮動左所有看起來真的令人毛骨悚然......圖片也沒有rezised也在鉻和我的導航欄不內聯... –

+0

但另一方面,我也在使用一個表在頁腳那裏rezising工作正常... –

0

您是否嘗試過加入compabiity你的CSS FIL像-WebKit-和-moz-圖像?

+0

沒有......你能解釋一下? –

相關問題