Dre Loo Dre Loo - 1 month ago 7
HTML Question

Firefox + IE, don´t height Picture Html, CSS , on Chrome working

so sry for doing something wrong.
I want to place my logo on My Website and the Title of the Website as Picture right next to it. But my "headerlogo.png" will not rezise with "height" in Firefox and IE, only in Chrome working... Dont know why...
Wanted to place some screenshots but didnĀ“t worked...

So the Website is already online. You can visit it Click HERE.
So Here is the code for my home.html I am working on this and testing and will copy the final code to the other Pages, so dont care about them...
Only about home.html

Here is the code for the home.html and my 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:your.dj.dreloo@gmail.com">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:your.dj.dreloo@gmail.com"><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>





maybe you can Help me :)

Answer

The problem is with table element, when i check it on my firefox browser the site is not visible as is i viewed on chrome.

better remove the table and use html float property

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