Lücke im Chrome nicht aber bei Firefox bei div tags? Warum?

[Edin Mustafic]

Hallo zusammen,

Ich bin wieder mal Einer, der verzweifelt! Ich hoffe, es kann mir jemand weiterhelfen. Ich hab zwar einige Sachen gefunden, die sind aber schon so alt, dass mir geraten geraten wurde, ein Neues Thema aufzumachen. Ausserdem hat mir ja auch nicht weitergeholfen. Ich hab bei aktuellen threads nix gefunden.

Ich arbeite grade an meiner website, die ich von table auf responsive umgestaltet habe (http://www.edinmustafic.com).
Es ist meine zweite. Ich hab noch eine andere (http://www.galeriepanoptikum.at). Bei der zweiten panoptikum haut das hin mit meinem Layout und den Abständen und div tags auch im Chrome.

Aber bei meiner Seite www.edinmustafic.com hab ich das Problem, dass ich zwischen 2 div tags einen dummen Abstand habe im Chrome nicht aber im firefox, den ich nicht erklären kann?! Bei der panoptikum Site hab ich das Problem nicht. Ich sitz schon seit Tagen herum und versuche das zu beheben - keine Chance!

Das Witzige daran ist, dass alles genau gleich ist, wie bei der panoptikum Seite, wo das alles aber hinhaut! Das heisst es muss wohl an der CSS file selbst liegen?! Es ist auch witzig, dass beim anfänglichen Laden dieser Seite der Absatz passt, aber beim Aktualisieren rutscht mir der besagte Absatz einfach runter.???? Oder er lädt mir die Bildergalerie nicht und wenn ich dann wiederrum auf aktualisieren klicke ist die Galerie da aber der Absatz rutscht eben wieder runter! Wie verhext!?? Bzw. wohl eher, ich kenn mich ned aus!???

Vielleicht kann mir jemand kurz einen Rat oder Tip geben, was ich falsch gemacht habe!??
Die Site mit der Lücke im Chrome:

http://www.mustaficedin.com/

Wahrscheinlich ist es nur eine Kleinigkeit, aber als Amateur sehe ich wohl diese Kleinigkeiten nicht auf Anhieb bzw. bin ich schon blind geworden, durch das ständige reinstarren in den Monitor.

Ich danke Euch für die Hilfe!

lg
edi

Zusatz:
Allerdings sehe ich im Dreamweaver dass in der Codeansicht meine style.css mit einer Wellenlinie grün unterlegt ist, was auf einige Fehler hindeutet. Da gehts um irgendwelche Browswerkompatibitäten, die wohl nicht so schlimm sind, da es sich um ältere Browserversionen handelt, die mit den Neuen tags nicht zurechtkommen?? Bei meiner panoptikum site mit der format.css ist das nicht so. Die scheint ok zu sein, obwohl da eben auch die gleichen/ähnlichen Codezeilen drinnen sind???!

 

[liselotte]

Wo ist denn da ne Lücke?
MfG

 

[Myhar]

Ich sehe leider auch keine (unerwünschte) Lücke.

 

[reitzi]

Wo ist denn da ne Lücke?
MfG

Ich sehe da auch keine Lücke!

 

[Edin Mustafic]

Wie, das ist keine Lücke?????? Da muss eine sein!!!!! Ich seh sie ja bei mir am PC im Browser; am Tablet - überall??!!!
Wenn da keine ist, dann umso besser, obwohl ich das nicht verstehe?????? Denn bei der panoptikum hab ich keine Lücke????!

Kann es dann eventuell mit meiner Internetverbindung was zu tun haben?? Ich muss dazusagen, dass ich am A..... der Welt
wohne im tiefsten Innviertel, wo die Verbindung nicht unbedingt die schnellste ist? Bedeutet das, dass es funkt, und nur ich kann es mit meiner Verbindung hier bei mir zu Hause nicht korrekt darstellen? Wahnsinn!! Aber ich kann ja sogar Netflixen bei mir auf mehreren Geräten ... da müsste doch die Bandbreite wohl reichen für meine website??

Falls das der Fall sein sollte, dann bin ich grad glücklich! Und es tut mir furchtbar leid, dass ich euch mit so einem sinnlosen thread belästige! Obwohl ich das immer noch nicht kapiert habe. Na hauptsache, sie funkt! Sorry!!! Und danke trotzdem an euch!

GLG
Edi

Na dann hau ich mich jetzt auf die Couch! Ich muss Schlaf nachholen von den letzten 3 Tagen und Nächten Fehlersuche, wo gar keiner war??!!

Oh Mann, ... Gute Nacht!
LG

 

[lachender_engel]

Ernsthaft jetzt?! eine weiße Seite mit schwarzem Text und Du willst eine "Lücke" zwischen zwei DIVs sehen?!

 

[Edin Mustafic]

Lachender Engel, ...

Ja ernsthaft! Eine Lücke! Warum das so ist, keine Ahnung!? Mittlerweile hab ich noch paar weitere Freunde gefragt, dass sie mal nachschauen, ob auch bei Ihnen eine ist - keiner hat eine, nur ich!???? Obwohl da nur 2 div tags sind - sonst nix! hehe
Irgendwie muss es was mit meinem Chrome Browser zu tun haben? Aber was, da hab ich keine Ahnung!? Denn bei meinem Tablet genau die gleiche Geschichte?!

 

[Myhar]

Hast du auch ganz bestimmt deinen Cache geleert bevor du dir die Seite anschaust? Und du weißt auch, wie man Versionsnummern ans CSS (und JS, etc.) anhängen kann, damit solche Probleme erst gar nicht auftreten?

 

[Edin Mustafic]

hi myhar, ...

Ja cache leeren kein thema ... versionsnummern CSS, JS ... etc ... das hör ich jetzt zum ersten Mal!? ist das notwendig?
Ich hab zwei Rechner ... einen Arbeits-PC und einen Internet-PC mit Win XP Pro noch ... vielleicht gibts keine Aktualilsierungen mehr für Chrome bei XP Pro??? Könnte das eventuell das Problem sein?!Denn am Arbeits-PC hab ich keine Lücke.

lg

 

[Myhar]

Weiß ich nicht ob es notwendig ist, dass deine Besucher jeweils das aktuelle CSS zu sehen bekommen. Wenn du damit leben kannst, dass Besucher eventuell ein altes CSS aus dem Cache vorfinden, dann ist es natürlich nicht notwendig.

Bezüglich updates: Das weiß ich doch nicht, das sollte sich durch eine Suchmaschine deiner Wahl recht schnell herausfinden lassen. Auch gibt es developer-Tools, da siehst du sofort, was überhaupt der Grund für diesen Abstand bei dir ist.

 

[Edin Mustafic]

hi myhar, ...

Na wenn das so ist, dann muss ich das noch machen natürlich!
wie mach ich das dann? Oder kann ich das irgendwo nachlesen?

Ich hab relativ oft das problem, dass ich nicht mal das Schlagwort für die Suche weiss, wenn ich
nach etwas Bestimmten suche! haha Naja, als Neuling ist das immer so 'ne Sache!

das mit den diversern developer-tools hab ich noch nicht so richtig raus! Ich halt mich zuerst mal an
dreamweaver und alles was ich zusätzlich noch brauche, kommt dann mit der Zeit, so hoffe ich doch!?
Schneeball-System. Von einem zum anderen und so weiter und irgendwann hab ich dann alles - zumindest der Theorie nach!

lg

Zusatz:
Meinst du das hier?




Bei contentPath gebe ich meine url ein oder genaue url zur css file?

 

[Myhar]

So in der Art meine ich das, ja. Aber dafür braucht es kein JS, da muss einfach beim src vom CSS, JS die Versionsnummer im HTML angegeben werden. Geht einfacher, wenn man sich das zB mit PHP so einrichtet, dass das automatisch geschieht. Ansonsten kannst du, wenn du nicht jede Woche eine neue Version online stellst, das ganze natürlich auch händisch machen. Die JS-Lösung würde ich nicht nehmen, das ist übertrieben (funktionieren tut sie natürlich)

<link href="/css/styles.css?1.0" rel="stylesheet" />

Das würde schon ausreichen. und jedesmal wenn du neue Version hochlädst änderst du das halt von 1.0 auf 2.0 etc.

Bezüglich der Developer-Tools: Das solltest du dir anlernen, weil wenn du dich auf Dreamweaver verlässt kannst du dich auf folgende Standardantwort einstellen, falls du erneut eine Frage in einem Forum stellst: Schau dir das in den Developer-Tools an und verwende nicht nur Dreamweaver sondern mach es ordentlich.

 

[Edin Mustafic]

Ah super!! Ich dank dir für deine Hilfe! Sehr cool!
Ich werd mich bemühen und das mit dem 'ordentlich' werde ich auch beherzigen, sobald ich herausgefunden habe, was 'ordentlich' überhaupt bedeutet! hehehe

Eine generelle Frage noch, weil du oben schreibst ist übertrieben mit js?
Kann man eigentlich mal von Grund auf sagen, lieber alles mit CSS und was dann nicht mehr geht, dann ausweichen auf js oder ist das Ganze einfach nur eine Geschmackssache? z.B. bei Slidern? Denn ich persönlich seh da wenig Unterschiede. Ob js slider oder css slider!?

Ich hab da das Problem, wenn ich php, js oder css verwenden kann, welches ich dann nehme? Gibt's da so etwas wie eine Prioriät. Das man beispielsweise lieber alles in css macht bevor man anderes verwendet?!

 

[lachender_engel]

So, ich habe mir das mal für Dich angeschaut und kann sagen, das Problem ist Hausgemacht und hängt mit Deinem Slider zusammen ;-)
Also, öffne ich die Seite im Chrome hat der DIV vom Slider #slider2 diesen Style:

<div id="slider2" style="width: 696px; height: 1000px; overflow: hidden;">

Öffne ich die Seite im Firefox, sieht der Code so aus:

<div id="slider2" style="width: 696px; height: 696px; overflow: hidden;">

Wie Du siehst, sind es zwei verschiedene Höhenangaben. Einmal 1000px, das andere Mal 696px.
Die Ursache daüfr liegt an den verwendeten Bildern. Öffnest Du die Seite im Chrome und blätterst nach rechts, siehst Du, dass das folgende Bild genau diese weiße Lücke ausfüllt. Unter Firefox werden die Bilder unten abgeschnitten. In Abhängigkeit der verwendeten Bilder sieht es also mal gut aus, mal nicht.
Das ist also die Ursache für die weiße Lücke, die keine ist ;-)

Noch eine Sache: Du schreibst, dass Du Deine Seite

von table auf responsive umgestaltet

hast. Ich muss Dich enttäuschen, hast Du nicht.
Responsive bedeutet, dass sich die Seite der Auflösung des Browsers in Echtzeit anpasst. Das kann bei Deiner Seite nicht passieren, da Du mit absoluten Werten px (Pixel) und nicht mit relativen Angaben (% und em) arbeitest.
Ist es also Dein Ziel die Seite auflösungsunabhängig zu haben, fange noch mal von vorne an ;-)

 

[Edin Mustafic]

hey, engel!

Wow! Das ist wirklich cool!

Zu meiner Verteidigung muss ich erwähnen, dass ich einige em Angaben durch px Angaben getauscht habe, weil Andere dachten, dass eventuell die relativen Angaben dass Problem wären. Hab dann em durch paar px Angaben ersetzt, um eben eine fixe Breite hinzubekommen, um so eventuell das Problem zu lösen! Aber wohl weit gefehlt!

Ich werd mich hinsetzen und das korrigieren!
DANKE! DANKE! DANKE!

lg

ps: Hab was Neues gelernt! Und das mit der Höhenangabe muss ich mich wohl irgendwie vertan haben. das heisst, ich kann alle px wieder in em angeben, weil das sowieso nie das Problem war!? Wahnsinn!

Jetzt bin ich verwirrt!? Aber wieso erscheint bei euch das Problem nicht, sondern nur bei meinem Browser?

 

[Myhar]

Wer auch immer das "geraten" hat, hat nicht die Developer-Tools verwendet. Auch du solltest dir (wie vorhin schon gesagt) angewöhnen, mit diesen Tools zu arbeiten. Damit kannst du jede Änderung "live" ansehen und weißt, was die genaue Auswirkung davon ist.

 

[Edin Mustafic]

Kommt jetzt die Standardantwort aus den Foren, oder was, myhar?!
hahaha ...

Naja, ich wollt's ändern! Kann ich aber nicht, weil ich keinen Plan mehr habe!?
Ich weiss nicht, woher der engel die angaben hat, denn in meiner css file sind die slider alle auf 100% der
Bilder drinnen! Meiner bescheidenen Logik nach sollte sich der Slider den Bildern anpassen dadurch??
Und wenn ich statt % Angaben die px der Bilder in em angebe, dann verrutscht mir alles komplett bzw. jetzt hab ich auch
auf dem lokalen Rechner diese verdammte Lücke!!!!!!!!!
Ich bin wohl zu blöd für's webdesign, wie es aussieht!?

Schön langsam interessiert's mich nimma mehr! Ich muss Pause machen, bevor ich alle PC's aus dem
Fenster schmeisse! Aber ich muss noch paar Fotos retuschieren und daher sollte ich das lieber nicht tun!
Ich geh kaffee trinken, zum runterkommen!
Danke euch für die Hilfe!

 

[Myhar]

Du kannst keine px-Breiten der Bilder in em angeben. Bzw. ja, du kannst einem Bild eine Breite von 40em geben, aber das würde keinen Sinn ergeben. Ich habe noch nie gesehen, dass das jemals so wo eingesetzt wurde. Weißt du überhaupt, worauf sich die em beziehen? Und wieso man diese (durchaus in Kombination mit %) verwendet? Einfach gesagt: 1em ist die Breite des Buchstaben m der aktuellen Schriftart/größe. Und wieso sollten sich Bilder nach der Schrift richten?
Wenn du % angibst, dann passen sich die % natürlich dem umgebenden Container an, das ist leider, gerade für Anfänger, nicht immer sofort und einfach ersichtlich, da hat jeder schon gekämpft. Deshalb verwenden Anfänger (und das ist jetzt nicht abwertend gemeint) gerne px-Angaben, dann gibt es eine Größe und gut ist. Leider ist das heutzutage eher ein Nachteil, da dann Anfragen kommen wie "Auf Handy XYZ schaut alles dooof aus, wieso?" .. Und dann muss man sich erst recht wieder mit %, em, etc. beschäftigen.

Das, was du machst, hat nichts mit Webdesign zu tun, das ist eher Webdevelopment. Zum designen muss man kein HTML/CSS schreiben.

btw: Multiple exclamation marks,' he went on, shaking his head, 'are a sure sign of a diseased mind

Was mich noch wundert: Du bist Fotograf, wieso erstellst du dann deine Website selber? Das ist, wie wenn ich in das Fotografieforum gehe und nicht verstehe, warum meine Fotos unscharf sind und keine 2000€ bei Agenturen wert sind und ich die neue DSLR nicht bedienen kann weil zu viele Rädchen, Einstellungen, etc. Möchtest du deine Website also selber machen, dann stell dir einen Laien vor, der mit einer Digi-Cam Fotos schießt. So komplex darf dann acuh deine Website sein, sprich -> Keine Slider, keine gute dynamische Interaktion sondern statischer Text+Bilder.

 

[Edin Mustafic]

hey, ...

Ist schon klar, myhar. Allerdings spielt jeder mit den Rädchen der DSLRs herum, wenn man schon eine hat. Und bei mir verhält es sich auch nicht anders! Ich hab halt die ganze Master Collection, weil ich damit ja arbeite und der Dreamweaver ist auch dabei - also spiele ich auch und klicke etwas herum! Ist nichts anderes! Wenn es etwas komplexes wäre (Unternehmensseiten, Datenbanken, etc ...), wo ein Profi gefragt ist, würde ich auch zum Webdesigner gehen! Aber bei meiner Seite? Find ich übertrieben! Das muss ohne auch gehen!? Ich hab ja in der Familile auch Webdesigner und Programmierer, aber ich will's halt selber machen! Ausserdem bin ich kein Fotograf. Das mag so aussehen, aber ich übernehme keine Aufträge! Man könnte mich eher (Lebens)Künstler nennen.

Es klappt ja eh ganz gut für meine 3 Wochen, wo ich jetzt dabei bin. Ich will alles bissal verstehen. Und übrigends danke für den Hinweis! Hab ich nicht gewußt, dass sich die em-Angaben nur auf Schrift beziehen. Das mit den Prozent check ich halt nicht wirklich. Da muss ich mich jetzt schlau machen. Denn ich würde ja jetzt nicht wirklich wissen, wie ich ein 1000x1000px bild da reinpacke mit Prozentangaben?!

Zumindest hab ich meinen Fehler jetzt. Keine em Angaben bei Bildern!
Dann experimentier ich weiter!

 

[Edin Mustafic]

Ausserdem ist der simple Slider einer aus dem Netz, den ich mir runtergeladen habe! Der muss eigentlich funktionieren. Mir ist nur nicht klar, warum das nicht geht?! Für quadratische Bilder hab ich ihn mit slider2 und bei den Hochformaten mit slider3 beschriftet - also den gleichen, aber umbenannt. Die müssten doch separat funktionieren, weil sie ja anders heissen und in der css auch?! Warum kann es sein, dass dann scheinbar die beiden slider irgendwie miteinander verknüpft sind bzw. warum der slider3 dann irgendwie mit slider 2 kollidiert und umgekehrt??? Das ist die entscheidende Frage für mich!??