minicrispie: Abstände

Hallo,

Ich steh vor einem Rätsel!
Die Webseite liegt auf dem Localhost und wird mit php Erstellt, weswegen ich nur Quelltext posten kann und keine Demo( sorry ).
Hier mal der XHTML-Teil( valide ):

<!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">  
	<head>  
		<title>Christoph Ludwig ~ Startseite</title>  
		  
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
		  
		<link rel="shortcut icon" href="./img/favicon.ico" />  
		  
		<link href="./css/main.css" rel="stylesheet" type="text/css" />  
		<link href="./css/menu.css" rel="stylesheet" type="text/css" />  
  
		<link href="./css/content.css" rel="stylesheet" type="text/css" />  
	</head>  
	  
	<body>  
		<div id="webseite">  
			<img id="header" src="./img/header.png" alt="header" />  
			  
			  
			<ul id="menu">  
				<li class="aktiv"><a href="index.php">Startseite</a></li>  
				<li><a href="index.php">Über mich</a></li>  
  
				<li><a href="index.php">Projekte</a></li>  
				<li><a href="index.php">Gallery</a></li>  
				<li><a href="index.php">Forum</a></li>  
				<li><a href="index.php">Blog</a></li>  
				<li><a href="index.php">Kontakt</a></li>  
				<li><a href="index.php">Impressum</a><div /></li>  
  
			</ul>  
			  
			<div id="content">  
<p>Willkommen auf meiner Webseite!</p>  
  
			</div>  
		</div>  
		  
		<p id="footer">&copy; Christoph Ludwig 2009 &middot; <a href="admin.php">Adminlogin</a></p>  
  
	</body>  
</html>

Nun der CSS-Teil für das HTML-Gerüst( "main.css", auch valide ):

*{  
	font-family:Arial;  
	font-size:11pt;  
	color:#ccc;  
}  
html, head, body, img#header, div#webseite{  
	margin:0px;  
	padding:0px;  
}  
body{  
	background:#282828;  
}  
div#webseite{  
	width:1024px;  
	margin:0px auto 20px auto;  
	background:#181818;  
	border:1px solid #999;  
	border-top:none;  
}  
img#header{  
	height:150px;  
	width:100%;  
	margin-bottom:30px;  
	background:#000;  
	border-bottom:1px solid #999;  
}  
div#content{  
	padding:30px;  
}  
p#footer{  
	display:block;  
	width:1024px;  
	margin:auto;  
	text-align:center;  
}  
  
p#footer a:link, p#footer a:visited{  
	text-decoration:none;  
	color:#888;  
	font-size:10pt;  
}  
p#footer a:hover{  
	text-decoration:underline;  
}

Jetzt steh ich vor dem Problem, das oben ein sehr unschöner Abstand von 20 Pixeln ist. Nur kann ich mir den Abstand nicht erklären, da ja body und div#webseite beide keine Abstände haben( weder margin, noch padding ).

Kann mir jemand sagen, was da schief läuft?

MfG. Christoph Ludwig

--
Wo die Sprache aufhört, fängt die Musik an...
Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
Go to this
  1. Hi,

    Die Webseite liegt auf dem Localhost und wird mit php Erstellt, weswegen ich nur Quelltext posten kann und keine Demo( sorry ).

    Wenn Du den Quelltext hier reinkopieren kannst, kannst Du ihn ebenso in Dateien kopieren und diese auf einem HttpServer verfügbar machen ...

      <link href="./css/main.css" rel="stylesheet" type="text/css" />  
      <link href="./css/menu.css" rel="stylesheet" type="text/css" />  
      <link href="./css/content.css" rel="stylesheet" type="text/css" />  
    

    Du zeigst nur den Code aus einer von den dreien.

    <body>
    <div id="webseite">
    <img id="header" src="./img/header.png" alt="header" />
    <ul id="menu">
    <li class="aktiv"><a href="index.php">Startseite</a></li>

    ist für eines dieser Elemente ein margin-top definiert (entweder in Deinem CSS oder im Browser-Stylesheet)?
    Wenn ja, könnte es sich um "collapsing margins" handeln.

    Kann mir jemand sagen, was da schief läuft?

    Du zeigst nur Teile des Codes.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    O o ostern ...
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
    1. Hallo,

      Du zeigst nur den Code aus einer von den dreien.

      hmja, content.css ist noch leer( soll alles für div#content enthalten )
      Hier mal das menu.css:

      ul#menu{  
      	height:35px;  
      	width:800px; /* Anzahl_der_Listenpunkte * 100 + "px" */  
      	margin:0px auto;  
      	padding:0px;  
      }  
        
        
      /* Die Links im Menüpunkt */  
      ul#menu li a:link, ul#menu li a:visited{  
      	display:block;  
      	width:100px;  
      	height:35px;  
      	line-height:35px;  
      	color:#ccc;  
      	text-decoration:none;  
      }  
      ul#menu li a:hover{  
      	color:#ddd;  
      }  
      ul#menu li a:active{  
      	color:#aaa;  
      }  
        
        
      /* Ein Menüpunkt */  
      ul#menu li{  
      	float:left;  
      	width:100px;  
      	height:35px;  
      	line-height:35px;  
      	list-style:none;  
      	text-align:center;  
      	background:url(../img/button/normal.png) no-repeat;  
      	color:#ccc;  
      	margin:0px;  
      }  
      ul#menu li:hover{  
      	background:url(../img/button/hover.png) no-repeat;  
      }  
      ul#menu li:active{  
      	background:url(../img/button/active.png) no-repeat;  
      	width:99px;  
      	padding-left:1px;  
      }  
      ul#menu li div{  
      	clear:both;  
      }  
        
        
      /* ein aktiver Menüpunkt */  
      ul#menu li.aktiv{  
      	background:url(../img/button/aktiv_normal.png) no-repeat;  
      }  
      ul#menu li.aktiv:hover{  
      	background:url(../img/button/aktiv_hover.png) no-repeat;  
      }  
      ul#menu li.aktiv:active{  
      	background:url(../img/button/aktiv_active.png) no-repeat;  
      }
      
      <body>  
        <div id="webseite">  
        	<img id="header" src="./img/header.png" alt="header" />  
        	<ul id="menu">  
        		<li class="aktiv"><a href="index.php">Startseite</a></li>  
      

      ist für eines dieser Elemente ein margin-top definiert (entweder in Deinem CSS oder im Browser-Stylesheet)?

      Ob ein margin-top definiert ist, kannst du für body, div#webseite und img#header selbst lesen( main.css ) => nein, ist es nicht.
      Für ul#menu ist margin und padding ebenfalls 0px.
      Ich hab jetz alles von der Seite gepostet. Alles ist als UTF-8 abgespeichert und wird auch so deklariert. Ich kanns mir nicht erklären.

      Du zeigst nur Teile des Codes.

      Jetzt nicht mehr ;)

      MfG. Christoph Ludwig

      --
      Wo die Sprache aufhört, fängt die Musik an...
      Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
      Go to this
      1. Hallo!

        Jetzt nicht mehr ;)

        Gilt das jetzt auch für den nicht gewollten Abstand? Ich kann nämlich keinen entdecken auf der verlinkten Seite (FF3.5 Win).

        Dafür habe ich aber etwas anderes entdeckt in Zeile 63:

        document.write("<scr" + "ipt type=\"text/javascr" + "ipt\" src=\"http://bin-layer.de/layer-178904-1-subid:pc-labor.js\"></scr" + "ipt>");  
        
        

        Das verträgt sich nicht mit deinem Doctype.

        Gruß Gunther

        1. Hallo,

          Gilt das jetzt auch für den nicht gewollten Abstand? Ich kann nämlich keinen entdecken auf der verlinkten Seite (FF3.5 Win).

          Das Problem ist jetzt gelöst( lag am BOM )  :)

          Dafür habe ich aber etwas anderes entdeckt in Zeile 63:

          document.write("<scr" + "ipt type="text/javascr" + "ipt" src="http://bin-layer.de/layer-178904-1-subid:pc-labor.js"></scr" + "ipt>");

          
          > Das [verträgt sich nicht](http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite) mit deinem Doctype.  
            
          Das ist Werbung, die automatisch vom Hoster( www.hn.vc ) eingefügt wird. Darauf hab ich keinen Einfluss.  
          Zudem ist es ein kostenloser Hoster, der hier nur zu Testzwecken dient.  
            
            
          MfG. Christoph Ludwig
          
          -- 
          Wo die Sprache aufhört, fängt die Musik an...  
          Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&  
            
          Go to [this](http://home.arcor.de/minicrispie) 
          
          1. Hallo,

            Das Problem ist jetzt gelöst( lag am BOM )  :)

            na prima! ;-)

            Das ist Werbung, die automatisch vom Hoster( www.hn.vc ) eingefügt wird. Darauf hab ich keinen Einfluss.
            Zudem ist es ein kostenloser Hoster, der hier nur zu Testzwecken dient.

            Ah, OK! Dann ist es ja kein Problem.

            Viel Spaß & Erfolg weiterhin!

            Gruß Gunther

  2. Hallo,

    ich habs hier noch mal hochgeladen( hab noch nen Server gefunden ;) )

    MfG. Christoph Ludwig

    --
    Wo die Sprache aufhört, fängt die Musik an...
    Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
    Go to this
    1. Hi,

      ich habs hier noch mal hochgeladen( hab noch nen Server gefunden ;) )

      grrmpf, mit einem Werbeblock ...

      Okay, was fällt auf ...

      * Das Dokument beginnt mit *zwei* BOMs. Warum zwei?!
       * Firefox sagt mir, ich müsste noch ein Plugin installieren. - Wozu?
       * Firefox hat beschlossen, dass das head-Element bereits vor dem ersten
         link-Element zu Ende ist, die vier link-Elemente sind laut Firebug im
         body. Warum, kann ich am Quelltext nicht erkennen - vielleicht die zweite
         BOM?

      Wo genau der Abstand oben herkommt, kann ich aber auch mit Firebug nicht erkennen. Aber wenn die Grundstruktur mal stimmt, kann man vermutlich mehr sehen.

      Ciao,
       Martin

      --
      Man sollte immer wissen was man sagt
       - aber auf keinen Fall alles sagen, was man weiß.
      1. Hallo,

        grrmpf, mit einem Werbeblock ...

        Das ist doch normal bei kostenlosen Hostern.

        * Das Dokument beginnt mit *zwei* BOMs. Warum zwei?!

        what?

        * Firefox sagt mir, ich müsste noch ein Plugin installieren. - Wozu?

        Das kann dann eigentlich nur von der Werbung kommen. Im Quelltext verwende ich nur XHTML und CSS.

        * Firefox hat beschlossen, dass das head-Element bereits vor dem ersten
           link-Element zu Ende ist, die vier link-Elemente sind laut Firebug im
           body. Warum, kann ich am Quelltext nicht erkennen - vielleicht die zweite
           BOM?

        HÄ? Ok ... jetz ist die pure Verwirrung da.
        Den Seitenkopf baue ich mit folgender PHP-Funktion zusammen:

        function build_head( $seitentitel )  
        	{  
        		?><!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">  
        	<head>  
        		<title>Christoph Ludwig ~ <?php echo $seitentitel; ?></title>  
        		  
        		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        		  
        		<link rel="shortcut icon" href="./img/favicon.ico" />  
        		  
        		<link href="./css/main.css" rel="stylesheet" type="text/css" />  
        		<link href="./css/menu.css" rel="stylesheet" type="text/css" />  
        		<link href="./css/content.css" rel="stylesheet" type="text/css" />  
        	</head>  
        	  
        	<body>  
        		<div id="webseite">  
        			<img id="header" src="./img/header.png" alt="header" />  
        			  
        			  
        			<ul id="menu">  
        <?php  
        	}
        

        Da sind die link-Elemente im head.
        Wenn ich aber bei mir im Firebug schaue, sind die im Body?
        Also langsam kapier ich nix mehr oO

        MfG. Christoph Ludwig

        --
        Wo die Sprache aufhört, fängt die Musik an...
        Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
        Go to this
        1. Hi,

          grrmpf, mit einem Werbeblock ...
          Das ist doch normal bei kostenlosen Hostern.

          möglich, aber ich hatte versehentlich noch Javascript an vom letzten Test.

          * Das Dokument beginnt mit *zwei* BOMs. Warum zwei?!
          what?

          You heard me. ;-)

          * Firefox sagt mir, ich müsste noch ein Plugin installieren. - Wozu?
          Das kann dann eigentlich nur von der Werbung kommen. Im Quelltext verwende ich nur XHTML und CSS.

          Okay, dann vergessen wir das mal.

          * Firefox hat beschlossen, dass das head-Element bereits vor dem ersten
             link-Element zu Ende ist, die vier link-Elemente sind laut Firebug im
             body. Warum, kann ich am Quelltext nicht erkennen - vielleicht die zweite
             BOM?

          HÄ? Ok ... jetz ist die pure Verwirrung da.
          Den Seitenkopf baue ich mit folgender PHP-Funktion zusammen:

          Dann lass mich raten - an der Ausgabe der index.php sind (mindestens) zwei PHP-Dateien beteiligt, einmal die index.php, und eine weitere, die includiert wird? Wenn du die auch noch beide mit BOM gespeichert hast, dann haben wir doch das Schweinerle schon gefunden.
          Und Firefox betrachtet die zweite BOM schon als Nutzinhalt, erklärt sich selbst intern also head für geschlossen und beginnt mit dem body-Element. Dann springt aber die Fehlerkorrektur an und sorgt dafür, dass title und meta wieder in das bisher leere head-Element verschoben werden. Warum dieser Korrekturmechanismus bei den link-Elementen versagt, ist allerdings nicht nachvollziehbar, schließlich dürfen die auch nicht in body vorkommen.

          Da sind die link-Elemente im head.
          Wenn ich aber bei mir im Firebug schaue, sind die im Body?

          Ach, bei dir auch? Da bin ich ja immerhin beruhigt.

          So long,
           Martin

          --
          Lieber eine Stumme im Bett, als eine Taube auf dem Dach.
          1. Hallo,

            Hi,

            grrmpf, mit einem Werbeblock ...
            Das ist doch normal bei kostenlosen Hostern.

            möglich, aber ich hatte versehentlich noch Javascript an vom letzten

            hm, Javascript ist bei mir immer an :)

            * Das Dokument beginnt mit *zwei* BOMs. Warum zwei?!
            what?

            You heard me. ;-)

            yes, but with "what?" I mean, "what is BOM?" ;)

            HÄ? Ok ... jetz ist die pure Verwirrung da.
            Den Seitenkopf baue ich mit folgender PHP-Funktion zusammen:

            Dann lass mich raten - an der Ausgabe der index.php sind (mindestens) zwei PHP-Dateien beteiligt, einmal die index.php, und eine weitere, die includiert wird? Wenn du die auch noch beide mit BOM gespeichert hast, dann haben wir doch das Schweinerle schon gefunden.
            Und Firefox betrachtet die zweite BOM schon als Nutzinhalt, erklärt sich selbst intern also head für geschlossen und beginnt mit dem body-Element. Dann springt aber die Fehlerkorrektur an und sorgt dafür, dass title und meta wieder in das bisher leere head-Element verschoben werden. Warum dieser Korrekturmechanismus bei den link-Elementen versagt, ist allerdings nicht nachvollziehbar, schließlich dürfen die auch nicht in body vorkommen.

            hmja.

            diese php-Funktion ist in build.php
            die index.php sieht so aus:

            <?php  
            	include "build.php";  
            	  
            	build_seitenkopf( "Startseite" );  
            ?>  
              
            <p>Willkommen auf meiner Webseite!</p>  
              
            <?php  
            	build_footer();  
            ?>
            

            MfG. Christoph Ludwig

            --
            Wo die Sprache aufhört, fängt die Musik an...
            Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
            Go to this
            1. Mahlzeit,

              möglich, aber ich hatte versehentlich noch Javascript an vom letzten
              hm, Javascript ist bei mir immer an :)

              bei mir nur in zwingend notwendigen Ausnahmefällen, oder wenn ich etwas Bestimmtes testen will.

              * Das Dokument beginnt mit *zwei* BOMs. Warum zwei?!
              what?
              You heard me. ;-)
              yes, but with "what?" I mean, "what is BOM?" ;)

              Byte Order Mark in UTF-x Documents

              Die BOM dient dem verarbeitenden System zur Erkennung der Byte-Reihenfolge (Lo-Byte first/Intel oder Hi-Byte first/Motorola). Das ist aber nur in den Codierungen UTF-16 oder UTF-32 (und ihren Varianten) sinnvoll. In UTF-8 ist die BOM vollkommen überflüssig und oft ein Grund für Probleme. Also besser weglassen.

              Dann lass mich raten - an der Ausgabe der index.php sind (mindestens) zwei PHP-Dateien beteiligt, ...
              die index.php sieht so aus:

              [code lang=php]<?php
              include "build.php";

              build_seitenkopf( "Startseite" );
              ?>

              Prächtig. Vermutlich ist index.php mit BOM vor dem <?php gespeichert, und build.php auch. Lass die mal in beiden Dateien (und allen weiteren Quellcodes) weg.

              Ciao,
               Martin

              --
              Ein Snob ist ein Mensch, der sich auf ein Stachelschwein setzt, ohne eine Miene zu verziehen - nur weil ihm jemand gesagt hat, das sei ein Designersessel.
              1. Hallo,

                Prächtig. Vermutlich ist index.php mit BOM vor dem <?php gespeichert, und build.php auch. Lass die mal in beiden Dateien (und allen weiteren Quellcodes) weg.

                Naja ich hab jetzt alle Dokumente( *.php, *.css ) per Notepadd++ auf UTF-8 ohne BOM formatiert. Jetzt funktionierts :)

                MfG. Christoph Ludwig

                --
                Wo die Sprache aufhört, fängt die Musik an...
                Selfcode:  sh:( fo:| ch:} rl:( br:> n4:? ie:{ mo:) va:} js:| de:> zu:) fl:( ss:) ls:&
                Go to this
            2. @@minicrispie:

              nuqneH

              yes, but with "what?" I mean, "what is BOM?" ;)

              Bei Fragen „what is…“ bietet es sich IMMER an, diese der Wikipedia zu stellen.

              Oder auch der Suche im Forumsarchiv. Dann hättest du auch den Artikel Darstellungsprobleme durch das UTF-8-BOM gefunden.

              Qapla'

              --
              Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)