Hallo liebe Community!
Ich habe für die Freiwillige Feuerwehr von Kastorf eine Fotogalerie in JS erstellt.
Die funktioniert auch ganz gut. Dabei verwende ich folgenden DOM:

Code :

1 2 3 4 5 6 7 8 9

-DIV:screen +-DIV:picture_board   +-IMG:main_picture   -DIV:block_board   +-button     -IMG     -IMG     -IMG     -button

Ich habe die Bilder so mit CSS ausgerichtet, dass das main_picture ganz groß ist, darunter in einer Zeile die Buttons und Thumbernails.
Das Design funktioniert in Safari und Opera, doch in Firefox?
Da bricht die ganze Positionierung auseinander.
Der Inhalt von block_board ist nach unten versetzt, und das in den anderen Browsern auf 410px vergrößerte Hauptbild macht was es will. Es wird nur so groß dargestellt, wie es selber ist. Das soll es aber nicht! Es sol exakt 410px groß sein! Ich hatte eigentlich mit Firefox noch nie Probleme aber dieses mal...
Hier die CSS Datei (nicht über den Lizenshinweis wundern, die Galerie will ich OpenSource veröffentlichen):

Code :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

/*  * Entwicklerpages JS Fotogalerie - Fuegt an gewuenschter Stelle eine Fotogalerie mit selbst definierter Fotoquelle ein.  * Copyright (C) 2011  Nicolas Hollmann  *  * This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 3 of the License, or (at your option) any later version.  *  * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.  *  * You should have received a copy of the GNU General Public License along with this program; if not, see <http://www.gnu.org/licenses/>.  *  */ #screen {     width: 720px;     height: 500px;     border-radius: 10px;     border: 1px solid #AAA;     text-align: center;     padding: 5px;     background: #8c0000;     background: -moz-linear-gradient(top, #ff7a7a 0%, #8e4444 43%, #8c0000 45%, #000000 100%);     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7a7a), color-stop(43%,#8e4444), color-stop(45%,#8c0000), color-stop(100%,#000000));     background: -webkit-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);     background: -o-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);     background: -ms-linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%);     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7a7a', endColorstr='#000000',GradientType=0 );     background: linear-gradient(top, #ff7a7a 0%,#8e4444 43%,#8c0000 45%,#000000 100%); }   #picture_board {     max-height: 415px;     max-width: 700px;     overflow: auto; }   #picture_board img {     text-align: center;     vertical-align: center;     border: 1px solid #AAA;     margin: 0;     padding: 0;     overflow: auto;     border: 1px solid #000; }   #block_board {     padding: 0;     margin: 8px;     height: 70px;     border: 1px solid #AAA;     border-radius: 5px;     bottom: 8px;     background: #FFF; }   #block_board .thumbanail {     border-left: 1px solid #000;     border-right: 1px solid #000;     margin-left: 3px;     margin-right: 3px;     padding: 0; }   #block_board button {     border: 0;     margin: 0;     padding: 0;     margin-right: 10px;     margin-left: 10px; }   .#block_board button img {     border: 0;     margin: 0;     padding: 0; }

anschauen könnt ihr euch das ganze hier: http://galerie.entwicklerpages.de/
Wenn jemand mit Windoof unterwegs ist, wäre es nett die Galerie auch mit dem IE zu testen.
Das geht am Mac schlecht.

Der Seite fehlt ein Doctype. Da kannst Du sowieso nur mit viel Glück überhaupt irgendeine Ansicht erreichen. Ergänze einen Doctype und du bist schonmal etwas mehr auf der sicheren Seite hinsichtlich der Darstellung.

Danke, aber das war es nicht.
Ich habe nun den für HTML5 (<!DOCTYPE html>) gesetzt, aber es hat sich nichts geändert.
Echt blöd, das der Firefox nicht mitmacht. Hat jemand die Seite schon mit dem IE getestet?

Hallo,

falls im Firefox noch kein Firebug-AddOn installiert ist, dann solltest du das jetzt machen und damit in der grafischen Menüleiste das Innenleben der BUTTON-Elemente mal untersuchen.

Wenn Du HTML5 schreiben willst, dann nimm HTML5. Deinem jetzigen Quellcode würde genauso ein HTML4-Doctype passen. Werde dir bewusst was Du für einen Standard schreiben willst.

Außerdem solltest Du dir die Möglichkeiten von CSS anschauen, und was es für verschiedene Browser heißt für bestimmte Elemente keine CSS-Eigenschaften anzugeben. Denn dadurch entstehen genau solche Probleme wie Du sie gerade hast. Der o.g. Firebug könnte dir da ungemein helfen um das zu erkennen.

Und zusätzlich auch mal noch den Zeichensatz deines Dokuments kontrollieren:
http://validator.w3.org/check?verbos...lerpages.de%2F

Hab einen kleinen Fehler schon einmal mit Firebug behoben.
Der Validator meckert auch nur noch darüber, das der im HTTP Header gesendete Zeichensatz nicht mit dem Metatag übereinstimmt. Das ist allerdings ein Problem, was sich nicht so leicht lösen lässt. Dafür sorgt das FTP Programm, in dem ich die Dokumente erstelle. Der CSS Validator beschwert sich ohne Ende über den gardient.
Ich hab null Ahnung, woran das liegt. OK, die seltsamen Filter von Microsoft verwundern mich nicht, aber gerade der Gardient für Mozillabrowser. Den Gardient hab ich mit Colorzilla erstellt, deshalb gehe ich davon aus, das da alles richtig ist. Und dann kommt noch ne Fehlermeldung wegen dem vertical-align. Was ist daran Falsch. Der Validator meint, das er es nicht interpretieren kann.

Code :

1	-moz-linear-gradient

entspricht keinerlei Standard. Das wie auch -o- oder -web- sind "Erfindungen" der jeweiligen Browser um Standards zu unterstützen die es noch nicht offiziell. Der CSS-Validator würde irgendwann vlt. mal "liniear-gradient" erkennen. Aber nicht mit -moz oder -o oder -web davor.

Code :

1	vertical-align

hat keinen "center"-Wert. Wenn Du etwas horizontal zentriert ausrichten willst, musst Du "middle" verwenden. Siehe auch die Seite die der Validator dazu verlinkt:
http://www.w3.org/TR/CSS21/visudet.h...vertical-align

OK, ich denke ich habe nun ein Ansehnliches Ergebnis. In neueren Firefox Versionen beträgt der Versatz nur einen Pixel. Und im IE ist zwar die ganze untere Leiste nach unten gerutscht, was aber eigentlich gar nicht schlecht aussieht. Oh, und danke für den Hinweis mit vertical-align. Das habe ich nicht gewusst.
Ich denke das Problem ist behoben. Demnächst wird das Projekt auf http://galerie.entwicklerpages.de/ zum Download verfügbar sein. Wenn ihr noch Verbesserungsideen habt, könnt ihr Sie ja da verwirklichen.

SO, nun könnt ihr auf http://galerie.entwicklerpages.de/
die fertige Galerie betrachten und das Projekt downloaden.