PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Webdesign: Woher kommt die Lücke?


DrunkenSheep
03.10.2011, 10:52
Alohahey,

gerade sieht die Grenze zwischen Menü und Content div auf der Webseite so aus:
1928

Der weiße Streifen ist der Rahmen um den Contentbereich. Der soll (oben) weg. Wenn ich im stylesheet aber ein
border-top: 0; einfüge, sieht das ganze im FF 6.0.2 so aus:
1929
Der IE ist da toleranter und schließt den Content div direkt an das Menü an.

Das CSS sieht im ersten Fall so aus:



.menu {
width:730px;
height:30px;
background:#000;
padding: 0 10px 20px 10px;
position:relative;
margin:0 auto;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
}


#content {
width: 730px;
background-color: #000;
color: #888;
margin: 0 auto;
padding: 0 10px 20px 10px;
border: 1px solid white;
}


nach der Änderung und mit der Lücke so:




.menu {
width:730px;
height:30px;
background:#000;
padding: 0 10px 20px 10px;
position:relative;
margin:0 auto;
border: 1px solid #fff;
border-top: 0;
border-bottom: 0;
}


#content {
width: 730px;
background-color: #000;
color: #888;
margin: 0 auto;
padding: 0 10px 20px 10px;
border: 1px solid white;
border-top: 0;
}


Jemand 'ne Idee, woher die Lücke kommt?
Yamiro
03.10.2011, 11:08
Kannste noch ein Minimal-HTML anhängen, das den Fehler reproduziert?
DrunkenSheep
03.10.2011, 12:35
http://oneeyeview.de/test/test.html
Yamiro
03.10.2011, 13:53
Das Problem ist das BoxModel von CSS.
Die H2 innerhalb des Contentbereiches hat eine Margin. Diese fällt unter den Tisch, sofern die upper border nicht gerendert wird.
Würgaround: Setze die Margin der H2 auf 0 und verwende padding-top stattdessen. Beispiel folgt.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<title>OneEyeView.de | Test</title>
<style>
#content { width: 730px;
background-color: green;
border: 1px solid white;
border-top-width: 0px ;
}
h2 {
margin: 0px;
padding: 20px;
}
</style>
</head>
<body>
<div id="content">
<h2>Start</h2>
</div>
</body>
DrunkenSheep
03.10.2011, 14:37
Schnieke :ja: Vielen Dank!
fireball
03.10.2011, 17:03
Der IE ist da toleranter

*rofl*

:D :D