2016-11-06 92 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

没有......你能解释一下? –

相关问题