jenskie: Margin-top

Hallo, ich möchte gerne dass mein div "haupt" ohne Rand unter dem div "logo" anliegt. Im I.E 6 und 7 wird es richtig angezeigt, aber im Firefox, Opera und Safari wird zwischen beiden divs ein Rand von 19 Pixeln angezeigt. Was soll ich tun? Habe zur Ansicht Url hinzugefügt.

hier das html:

<body>
 <div id="leinwand">
 <div id="logo"><img src="img/logo.gif" /></div>
  <div id="haupt">

<div id="navi">
    <ul>
     <li><a href="">1</a></li>
     <li><a href="">2</a></li>
     <li><a href="">3</a></li>
     <li><a href="">4</a></li>
     <li><a href="">5</a></li>
     <li><a href="">6</a></li>
     <li><a href="">7</a></li>
     <li><a href="">8</a></li>
    </ul>
   </div>
   <div id="inhalt">
    <h1>Headline</h1>
    <p>propense per jus Proprie. Sem</p>
    <p>propense per jus Proprie. Sem</p>
    <p>propense per jus Proprie. Sem</p>
    <p>propense per jus Proprie. Sem</p>

</div>
  </div><!--haupt ende-->
 </div><!--Leinwand ende-->
</body>

und css:
html{
 height:100%;
}
body {
 background-color: black;
 color:white;
 margin:0;
 padding:0;
 font-family:verdana, helvetica, sans-serif;
 height:100%;

}
#leinwand{
 background-color:white;
 color:black;
 margin:0px 150px 0px 150px;
 padding:0;
 height:100%;
}
#haupt{
 background-color:#dddddd;
 color:black;
 margin-top:0px;
 margin-left:19px;
 margin-right:0px;
 margin-bottom:0px;
 border-left:29px solid #463EEB;
 padding:0px;
 height:100%;

}

  1. Hello out there!

    aber im Firefox, Opera und Safari wird zwischen beiden divs ein Rand von 19 Pixeln angezeigt.

    Nein, es sind nicht 19. Es sind je nach Schriftgröße unterschiedlich viele.

    Was soll ich tun?

    Im Forumarchiv nach "Unterlänge" suchen.

    <div id="logo"><img src="img/logo.gif" /></div>

    Fehler: 'alt'-Attribut fehlt.

    Wenn ein Bild keinen Altenativtext braucht, muss beim 'img'-Element das 'alt'-Attribut dennoch vorhanden sein. In diesem Fall ist aber zu überlegen, ob das Bild nicht besser ein Hintergrundbild wäre. Dann brauchst du gar kein 'div id="logo"'.

    See ya up the road,
    Gunnar

    --
    „Und [dieses Forum] soll […] auch ein Fachforum bleiben und kein Psychologieforum werden.“ (Kirsten Evers)
    1. Im Forumarchiv nach "Unterlänge" suchen.

      Hallo, ich habe mittels vertical-align:bottom tatsächlich 3 Pixel wegbekommen. Die "Unterlänge" ist nun weg. Aber es bleibt immer noch ein riesen Spalt zwischen meinen Divs. Zur Veranschaulichung hier die Url http://www.dance-fitness-sued.de/test/juristischer_werdegang.html

      Ich habe mal einen roten Rahmen um das div-logo gezogen, so dass man sehen kann, dass keine Unterlänge da ist.

      1. Yerf!

        Hallo, ich habe mittels vertical-align:bottom tatsächlich 3 Pixel wegbekommen. Die "Unterlänge" ist nun weg. Aber es bleibt immer noch ein riesen Spalt zwischen meinen Divs. Zur Veranschaulichung hier die Url http://www.dance-fitness-sued.de/test/juristischer_werdegang.html

        Der Abstand kommt von einem 16px Margin der <UL> (stammt aus dem Browser-Stylesheet des FF). Durch die "collapsing margins" wird dieser Abstand dem "Haupt"-Div angerechnet. Eliminiere am besten erst mal den Margin mittels ul {margin-top:0;} und falls du dann doch einen Abstand möchtest definiere dafür ein Padding.

        Gruß,

        Harlequin

        --
        <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
        1. Das stimmt! Vielen, vielen lieben Dank.
          Gruss Jenskie

  2. Es genügt völlig, wenn du der "Leinwand" eine Höhe von 100% gibst. Dass HTML ebenfalls 100% hat, macht das Layout nur kaputt. Gleiches gilt auch für den Body.! 1x 100% genügen - und zwar im Leinwand-DIV.

    Nimm Die mal raus und sage mir dann, ob es funktioniert.

    1. Es hat leider nicht funktionert. Ich schau jetzt mal im Forumsarchiv nach "unterlänge".

    2. Yerf!

      Es genügt völlig, wenn du der "Leinwand" eine Höhe von 100% gibst. Dass HTML ebenfalls 100% hat, macht das Layout nur kaputt.

      Definiere "kaputt"! Ich befürchte ja eher, dass dies auf deinen Browser (IE) zutrifft. Eine Höhe in Prozent bezieht sich immer auf die Höhe des Elternelements. Wenn dieses aber keine Angabe zur Höhe hat ist es nur so hoch, wie Inhalt vorhanden ist und 100% vom Inhalt ist wieder nur so hoch wie der Inhalt. Ich denke aber, dass Jenskie doch eher 100% vom Viewport haben wollte...

      Gleiches gilt auch für den Body.! 1x 100% genügen - und zwar im Leinwand-DIV.

      Wenn man eine Höhe von 100% des Viewports haben will, müssen alle Elemente bis zur Wurzel (HTML) eine Höhe von 100% bekommen.

      Gruß,

      Harlequin

      --
      <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->