Seltsam Leeren Raum an der Oberseite von Seite – HTML, CSS und PHP
Okay, das ist ein komisches problem das ich habe. Ich habe zwei Seiten, die sind etwas anders, aber das teilen sich mehrere gleiche Elemente (zwei Bilder, im Grunde).
Diese Bilder sind beide kontrolliert von der gleichen CSS-Stylesheet, aber Sie scheinen beide zu sein, etwa 20-30 Pixel nach unten auf der zweiten Seite.
Die zweite Seite ist anders in der Tatsache, dass es verwendet PHP vor die Doctype-Deklaration. Aber, wie gesagt später, ich glaube nicht, dass dies das problem ist.
Sehen diesen Effekt, Blick auf diese beiden Seiten nacheinander ein: http://www.codecreek.biz/login und http://www.codecreek.biz/registration/register.
Nur klar zu sein, ich habe viele mögliche Antworten auf diese schon. Diese scheint nicht mein Fall, da ich nicht mit einer Tabelle auf diesen Seiten.
Hier ist, was ich versucht habe:
- Überprüfung auf Leerzeichen in den code. Jedoch, wenn Sie die Quellen für beide Seiten, werden Sie tatsächlich feststellen, dass die zweite, problematische hat eine weniger Linie von Leerzeichen an den Anfang, vor seiner Doctype-Deklaration.
- Entfernen Sie den PHP-code von der zweiten Seite. Dies hatte keinerlei Effekt.
- Wodurch die scheinbare Leerzeichen zwischen dem schließenden PHP-tag
?>und die<!DOCTYPE HTML>zu nichts. Dies wiederum hat keinen Effekt. - Prüfung für eine BOM. Ich Tat dies mit vim, und die Ergebnisse bestätigten, dass keine Stückliste verwendet wurde.
- Überprüfung meiner CSS. Ich habe nichts gefunden, komisch, aber ich bin ziemlich ein Neuling bei CSS so, als könnte dies das problem, hier ist der link zu meinem Stylesheet: http://www.codecreek.biz/resources/main.css. (Disclaimer: ich bin in den Prozess zu umschreiben, dass die Seite, so dass, wenn es sieht ziemlich seltsam, dort gehen Sie !).
Darüber hinaus Safari-Entwickler-Werkzeug für die Inspektion zeigt deutlich, dass die <body> tag auf meine zweite Seite beginnt erst um 20 Pixel nach unten.
Ich bin ehrlich gesagt ganz verloren. Ich hoffe es gibt eine einfache Lösung für dieses Problem, aber ich habe schon mehrere Stunden ohne Erfolg.
EDIT: Hier ist die CSS, die beide für den 'Titel' Bild und die 'Wellenlinie' Bild.
#login_title { position:absolute; width:1000px; top:100px; }
#login_line { position:absolute; width:500px; top:330px; left:250px; }- Leerzeichen vor einem
<!DOCTYPE>wird in der Regel Kraft quirks-Modus, so ist es möglich, Ihren zweite Seite (ohne Leerzeichen ersten) in Betrieb ist "richtig". Was passiert, wenn Sie hinzufügen von Leerraum in? Es tut dann dasselbe Verhalten? (Hinweis: ich bin derzeit auf einem iPad, so ist das Debuggen schwierig!) - Dein CSS ist nicht das gleiche auf beiden Seiten, meine Antwort.
Du musst angemeldet sein, um einen Kommentar abzugeben.
H1 auf der register-Seite hat eine Standard-Marge zu. Manchmal, ich weiß nicht, warum, wenn Sie das erste element einen Rand, es gilt es für die Eltern.
Indem die H1 #register_title einen oberen Rand von 0, Sie sollte dein problem lösen.
Immer daran denken, ein reset.css-Umsetzung oder halten Sie im Verstand, die Elemente sind gestaltet standardmäßig.
Bearbeiten:
Ich möchte darauf hinweisen, dass dies ein Thema war, weil alle Ihre bisherigen Elemente absolut positioniert. Sie sollte wirklich nicht über die absolute Positionierung so, wie Sie sind. Sie verwenden sollten, margin-top, padding-top zum verschieben von Elementen auf der Seite nach unten. Absolute Positionierung sollte nur verwendet werden, wenn keine anderen Möglichkeiten der Positionierung ein element verfügbar sind.
Ein wichtiger Unterschied ist, dass die erste Seite hat den Titel animation
javascriptdie bewegt sich der Titel auf seine endgültige position. Die registrieren Seite hat keine solche Logik.In http://www.codecreek.biz/registration/register, das logo (login_title) hat eine position des absoluten, aber auf der anderen Seite ist es relativ.
Bei verwandten in http://www.codecreek.biz/registration/register, es behebt die Lücke.
(Sie überschreiben ihn auf http://www.codecreek.biz/login mit relative, die durch die Art und Weise, also des "top: 100" ist nicht wirksam, wo, wie es auf der anderen Seite)