✔ Lücke zwischen Header und Content nur im FF

Papi62 · 16. November 2007

Hallo erstmal ^^

Ich hab schon fast einen Krampf in den Augen vom Suchen aber ich find den Fehler nicht, sicher nur etwas kleines. In allen IE Versionen wird die Site korrekt angezeigt aber Im Firefox hab ich eine Lücke zwischen Header und Content, bzw. Top und Content.

Im Anhang 2 Bilder die das verdeutlichen und nachstehen das CSS.

Code:

body{
 margin: 0;
 background: #000;
}

#wrapper{
 position:absolute;
 left: 50%;
 top: 10px;
 margin-bottom: 10px;
 width: 812px;
 height: auto;
 margin-left: -406px; /* negative Hälfte von width:812px */
}

#header{
 width: 812px;
 height: 165px;
 background-image: url(images/vernetzt/header.gif);
 background-repeat: no-repeat;
}

#top{
 width: 812px;
 height: 26px;
 background-image: url(images/vernetzt/content_top.gif);
 background-repeat: no-repeat;
}

#wrapp{
 width: 812px;
 min-height:100%; /* Moderne Browser */
 height:auto !important; /* Moderne Browser */
 height:100%; /* IE */
 padding-top: 0px !important;
 padding-top: 0px;
 background: url(images/vernetzt/content_wrap.gif);
 background-repeat: repeat-y;
}

#menue{
 float: left;
 width: 164px;
 margin-top: 0px;
 padding-left: 35px;
 padding-top: 0px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

#menue ul{
 margin: 0;
 padding: 0;
 list-style: none;
 white-space: nowrap;
 font-size: 12px;
}

#menue li{
 text-align: center;
 margin-top: 0px;
 margin-bottom: 5px;
 height: 35px;
 width: 164px;
}

#menue li a{
 display: block;
 color: #00FF00;
 text-decoration: none;
 font-family: arial, verdana, sans-serif;
 font-weight: bold;
 padding-top: 10px;
 padding-bottom: 12px;
 cursor: pointer;
 background: url(images/vernetzt/button.gif) no-repeat;
}

#menue li.current a{
 color:#00FF00;
 background:url(images/vernetzt/button_hover.gif) no-repeat;
}

#menue li a:hover{
 color:#FF0000;
 background: url(images/vernetzt/button_hover.gif) no-repeat;
}

#menue li.current a:hover{
 color:#FF0000;
 background: url(images/vernetzt/button_hover.gif) no-repeat;
 cursor:default;
}

#content{
 width: 527px;
 padding-left: 10px;
 padding-right: 0px;
 padding-bottom: 5px;
 margin-left: 235px !important;
 margin-left: 235px
}

.subhead{
 width: 527px;
 height: 35px;
 text-align: center;
 margin-bottom: 10px;
 background-image: url(images/vernetzt/subhead.gif);
}

.subhead h1{
 padding-top: 10px;
 text-align: center;
}

#content p{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #00FF00;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: justify;
}

.kursiv{
 font-style: italic;
 color: #00FF00 !important;
}

.fett{
 font-weight: bold;
}

#content em{
 font-weight: bold;
}

#content h1{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #00FF00;
 font-size: 12px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content h2{
 margin-bottom: 5px;
 padding-left: 0px;
 padding-right: 0px;
 color: #00FF00;
 font-size: 11px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content h3{
 margin-top: 5px;
 padding-left: 0px;
 padding-right: 0px;
 color: #00FF00;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content h4{
 margin: 0;
 padding-left: 0px;
 padding-right: 0px;
 color: #00FF00;
 font-size: 11px;
 font-weight: bold;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 text-align: center;
}

#content ul{
 margin-top: 0px;
 margin-bottom: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 color:#00FF00;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content ol{
 margin-top: 5px;
 margin-bottom: 0px;
 padding-top: 0px;
 padding-bottom: 0px;
 color:#00FF00;
 font-size: 11px;
 font-weight: normal;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

#content a:link{
 color: #00FF00;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

#content a:visited, #content a:active, #content a:focus{
 color: #00FF00;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

#content a:hover{
 color: #FF0000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 11px;
 font-weight: bold;
 text-decoration: underline;
}

form{
 border-color: #00FF00;
}

#bottom{
 width: 812px;
 height: 19px;
 background-image: url(images/vernetzt/content_bottom.gif);
 background-repeat: no-repeat;
}

#footer{
 width: 812px;
 height: 97px;
 margin-bottom: 10px;
 background-image: url(images/vernetzt/footer.gif);
 background-repeat:no-repeat;
}

.foto1{
 text-align: center;
 margin: 10px auto;
 border : 0;
 color:#00FF00;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.fotor{
 float: right;
 text-align: center;
 margin: 0px 0px 0px 10px;
 border : 0;
 color:#00FF00;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.fotol{
 float: left;
 text-align: center;
 margin: 0px 10px 0px 0px;
 border : 0;
 color:#00FF00;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.foto2{
 text-align: center;
 margin-bottom: -10px !important;
 margin-bottom: -13px;
 margin-top: 10px;
 border : 0;
 color:#00FF00;
 font-size: 11px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}

.foto1 a img, .foto2 a img, .fotor a img, .fotol a img{
 border: none;
}

#w3cr{
 float: right;
 padding: 0;
 margin: 0px 80px 0px 0px;
 border: none;
}

#w3cl{
 float: left;
 padding: 0;
 margin: 0px 0px 0px 80px;
 border: none;
}

.clear{
 clear: both;
}

#copyr{
 margin-left: 510px;
 color: #00FF00;
 padding-top: 30px;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
}

#copyr a:link{
 color: #00FF00;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

#copyr a:visited, #copyr a:active, #copyr a:focus{
 color: #00FF00;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

#copyr a:hover{
 color: #FF0000;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: bold;
 text-decoration: underline;
}

Maik · 16. November 2007

Hi,

ohne jetzt den HTML-Code gesehen zu haben, vermute ich, dass eines der Blockelemente im DIV #content (ausser p, ul, h1, h4) für die Lücke verantwortlich ist, da für die übrigen Elemente (ol, h2, h3) der voreingestellte obere Außenabstand nicht zurückgesetzt wurde.

Papi62 · 16. November 2007

<h2> hat eigentlich keinen oberen Abstand und <ol> hab ich nicht im html (Überbleibsel aus früherer css). Zudem ist die lücke nur im FF.
Nachstehend noch der HTML Code, vieleicht siehst Du da etwas was mir entgeht.
Adresse: "www.a-web.ch" (unten das Layout auf "vernetzt" umschalten)

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Appert Webdesign - Home</title>
<meta name="Title" content="Appert Webdesign" />
<meta name="Description" content="Professionelles Web-Design und -Programmierung" />
<meta name="keywords" content="Appert,René,Webdesign, Internetpräsenz,Gildenhomepage,Internetauftritt,HTML,PHP,CSS,JAVA-Script,Flash" />
<meta name="Author" content="René Appert" />
<meta name="Publisher" content="René Appert" />
<meta name="Copyright" content="René Appert" />
<meta name="Content-language" content="de" />
<meta name="Audience" content="Alle" />
<meta name="Robots" content="INDEX" />
<meta name="Robots" content="FOLLOW" />
<meta name="Revisit-after" content="20 days" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<div id="wrapper"><a name="top"></a>
  <div id="header"></div>
  <div id="top"></div>
  <div id="wrapp">
    <div id="menue">
      <ul>
        <li class="current"><a href="http://www.a-web.ch/index.php"><b>Home</b></a></li>
        <li><a href="http://www.a-web.ch/projekt.php"><b>Projekte</b></a></li>
        <li><a href="http://www.r-appert.ch" target="_blank"><b>about me</b></a></li>
        <li><a href="http://www.a-web.ch/formmailer/formmailer.php"><b>Kontakt</b></a></li>
        <li><a href="http://www.a-web.ch/nutzung.php"><b>Impressum / Disclaimer</b></a></li>
      </ul>
    </div>

    <div id="content">

      <h2>Eine vernünftige Internetpräsenz wird immer wichtiger.</h2>

      <p>Es ist inzwischen einfach nicht mehr tragbar eine Homepage zu betreiben,
      die vor Jahren mal vom Schwager "gebastelt" wurde. Bunt-blinkende und unübersichtliche
      Websites, defekte Links und überlange Ladezeiten nimmt heutzutage kein Kunde mehr hin und klickt einfach weg.</p>
      <p>Ein professioneller Auftritt hingegen, stellt Sie und Ihr Unternehmen in ein ganz anderes
      Licht und vermittelt von der ersten Sekunde an einen positiven Eindruck.</p>
      <br>
      <div class="subhead"><h1>Kostenloses Angebot</h1></div>
      <p>Um Referenzen zu sammeln biete ich mich an, <em>kostenlos</em>, Ihren Firmen-Internetauftritt,
      Eure Homepage, Gilden- oder Clan-Page zu erstellen oder "redesignen".</p>
      <br>
      <p>Sie erhalten eine komplette, speziell auf Ihre Wünsche zugeschnittene Website, die an jedes
      bestehende Firmendesign angepasst werden kann.</p>
      <p>Logos, Schriftzüge, Bilder oder ähnliches werden nahtlos in das Design der Seiten integriert.
      Für eingesandtes Material stehen natürlich Scanner, Digitalkameras und Bildbearbeitungsprogramme bereit.</p>
      <p>Bei Bedarf fotografiere ich auch vor Ort für Sie.</p>
      <p>Erneuerungen, Updates bzw. Änderungen sind jederzeit möglich.</p>
      <br>
      <p>Laufende Projekte werden auf Test-Webspace bearbeitet.</p>
      <p>D.h: Sie erhalten von uns eine spezielle Internetadresse, über die Sie Sich ganz leicht in Ihr
      Projekt einloggen können. Das bedeutet für Sie, dass Sie während der Entstehungsphase jederzeit
      den aktuellen Stand der Dinge einsehen können.</p>
      <p>Dadurch haben Sie die Möglichkeit einzugreifen und Änderungswünsche noch während der Entstehung zu äußern.</p>
      <br>
      <h2>Web-Design</h2>
      <p>Entwurf und Programmierung von Websites in HTML, PHP, CSS mit Java-Scripts und Flash-Objekten
      gemäss Ihren Vorstellungen und Wünschen.</p>
      <br>
      <h2>Logo-Design</h2>
      <p>Erstellung Ihres Logos, 3D-Schriften und animierte Logos mit Adobe-Photoshop.</p>
      <br>
      <h2>Re-Design</h2>
      <p>Erneuern und modernisieren Ihrer "alten" Internetpräsenz so dass der Code dem neusten Standart
      entspricht und Ihre Site auch auf allen gängigen Browsern angesehen werden kann.</p>
      <br>
      <p>Wenn Ihnen diese Site oder meine Projekte gefallen und ich etwas für Sie tun kann, dann kontaktieren
      Sie mich bitte.</p>
      <br>
      <p>Da diese Dienstleistung kostenlos ist, wird meinerseits keinerlei Garantie und/oder Haftung übernommen.</p>
      <br>
      <p>Um Ihnen eine Kostprobe verschiedener Designs zu zeigen können Sie hier diverse Layouts (CSS-Styles) auswählen.
      Die ausgewählten Styles werden durch ein Cookie gespeichert und gelten für alle Seiten bis ein neuer
      Style gewählt wird.</p>
      <br>
      <form method="post" action="./">
        <fieldset>
          <select name="style">
	   <?php
	   for($i = 0; $i < count($stylefile); $i++) {
    	     echo '<option value="'.$stylefile[$i].'"';
    	     if($stylefile[$i] == $_SESSION["style"]) {
        	     echo ' selected="selected"';
    	     }
    	     echo '>'.ucwords($stylefile[$i]).'</option>';
	   }
	   ?>
    	 </select>
    	 <input type="submit" value="Auswählen" />
        </fieldset>
      </form>

    <div class="clear"></div>
    </div>
  </div>
  <div id="bottom"></div>
  <div id="footer">
  <div id="copyr">
    designed & copyright &copy; by <a href="http://www.a-web.ch">a-web</a>
  </div>
  </div>
</div>

</body>

</html>

mAu · 16. November 2007

Warum postest du nicht einfach die HTML-Ausgabe ohne den PHP-Code? Das würde allen hier helfen, dir zu helfen.

Maik · 16. November 2007

Papi62 hat gesagt.:
<h2> hat eigentlich keinen oberen Abstand

Doch hat es sehr wohl, da du u.a. für dieses Element den oberen Außenabstand nicht explizit auf null gesetzt hast.

Papi62 · 16. November 2007

mAu hat gesagt.:
Warum postest du nicht einfach die HTML-Ausgabe ohne den PHP-Code? Das würde allen hier helfen, dir zu helfen.

Habs grad oben geändert.

Papi62 · 16. November 2007

Maik hat gesagt.:
Doch hat es sehr wohl, da du u.a. für dieses Element den oberen Außenabstand nicht explizit auf null gesetzt hast.

OK, das wars (*Tastatur an die Birne hämmert*) ^^

Code:

#content h2{
 margin-top: 0px;

Heissen Dank mal wieder

Bis zum nächsten Mal und Gruss
René

mAu · 16. November 2007

Am besten am Anfang einer CSS immer alle Außen- und Innenabstände auf 0 zurücksetzen, dann passiert sowas nicht:

CSS:

* {
    margin: 0;
    padding: 0;
}

Papi62 · 16. November 2007

mAu hat gesagt.:
Am besten am Anfang einer CSS immer alle Außen- und Innenabstände auf 0 zurücksetzen, dann passiert sowas nicht:

Danke Dir, hatte ich vergessen und nun auch eingebaut.

✔ Lücke zwischen Header und Content nur im FF

Papi62

Mitglied

Anhänge

Maik

Papi62

Mitglied

mAu

Erfahrenes Mitglied

Maik

Papi62

Mitglied

Papi62

Mitglied

mAu

Erfahrenes Mitglied

Papi62

Mitglied

Neue Beiträge