Darstellungsprobleme von Bildern (Pixel am rechten Rand)

  • Hallo!

    Ich denke, ich wende mich einmal an die Firefox Gemeinde, da mein Problem mit dem Firefox zusammenhängt. Leider kann ich nicht ausschliessen, dass der Fehler an mir liegt, vielleicht könnt ihr mir aber helfen :)

    Ich arbeite seit einiger Zeit an einer Seite für mein Projekt, die Casa Hogar Estudiantil in GTC, Guatemala. Dabei ist mir aufgefallen, dass der Firefox bei grossen Bildern zumindest auf der rechten Seite einen Rand hinzufügt, der da nicht sein sollte.

    Schaut euch vielleicht diese Einstiegsseite an, um euch ein "Bild" zu machen:

    http://www.casaasol.net

    Wenn ich die Seite im IE ansehe, dann schliesst die Sprachauswahl rechts oben mit dem Bildrand ab, im FF aber nicht. Wenn man alles markiert, sieht man, dass auf der rechten Seite ein 12 px breiter Rand dazukommt, der im Quelltext nirgens definiert ist - zumindest komm ich nicht drauf.

    Wie gesagt, im IE schauts so aus, wies sein soll.

    Fakten zur Seite:
    (Einstiegsseite ist klar, interessant sind die folgenden Seiten, weil php)

    -Rechts von jedem Bild komt eine Spalte mit 16 px, danach ein einer neuen Spalte der Text. Beim IE wieder - 16px, dann Text. Beim FF - 23px, dann der Text.

    Die Bilder werden mit einem Zufallsscript (php) geladen, habe aber auch statische Bilder probiert, mit dem gleichen Ergebnis.

    Ich weiss eigentlich, dass der IE Blödsinn macht, hier habe ich aber das Gefühl, dass beim FF was nicht passt.

    (Der IE verwendet übrigens eine etwas andere Form meine "Courier New" darzustellen, deshalb springt bei manchen Texten die Zeile um und sprengt die Tabelle, das wäre auch noch eine Frage wert :))

    Und schliesslich und schlussendlich habe ich noch eine Frage, weil ich meine Seiten schön W3C konform machen will: Ich darf das height -Attribut nicht verwendet, richtig? Was mache ich dann stattdessen? Irgendeine CSS-Klasse? Wie macht man das, oder verstehe ich das Problem nicht?

    Danke vielmals für eure Hilfe, wäre schön, wenn sich das klären liesse, herumbasteln tu ich ja schon lange genug an dem Problem :)

    Gruss aus Guatemala City,
    FraGezeichen

  • Nach neuen Tests mit Freunden ein Nachtrag:

    Die Einstiegsseite macht nur bei mir und bei noch einem Freund Probleme, bei zwei anderen funktioniert sie Tadellos.

    Die Abstände rechts neben den Bildern entstehen im FF bei maximiertem Fenster (1024x768) ich weiss nicht, wies bei einer anderen Auflösung ist, optimiert hab ich die Seite dafür.

    Das, als Update.

    FraGezeichen

  • Die Seite ist ein Schönes beispiel dafür, wie man es mit Tabellen hoffungslos übertreiben kann.... um sich da druchzubeissen braucht es mehr Zeit als ich jetzt hab. vielleicht heute abend.

    height ist schon erlaubt. nur nichtmehr überall. z.B. nicht im <table> (im <td> aber wohl noch). das umgeht man indem man entweder eine classe definiert, oder beim entsprechenden tag noch ein style="height:100%;" einfügt. aber damit wirst du anfangs zu kämpfen haben, wenn du richtig valides html haben willst. denn ganz so einfach ist das mit dem height:100% nichtmehr, wenn man einen richtigen doctype wählt.

  • hmm, und ich war so stolz, dass ich die beschissenen Frames losgeworden bin und alles mit Tabellen umgesetzt hab :)

    Die Tables brauch ich dazu, damit das Zeugs immer gleich aussieht und nie verrutscht. Sag nicht, das wär einfacher gegangen ;)

    Danke fürs helfen,
    FraGe

  • Nun. Frames sind schon seit Jahren aus der Mode und verpöhnt. Und genauso ist es aber auch mit Tabellen fürs Design. Heutzutage baut man seiten tabellen- und framelos ... mit hilfe von CSS. ; )

    Naja. Was ich eigendlich meinte ist.... hast du mal den border deines tables auf 3 gestellt und gesehen, wieviele überflüssige reihen und zellen du verwendest?

    Ich hab mal kurz ein beispiel gemacht, wie ich deinen table zusammengebaut hätte: http://www.bugcatcher.de/files/casahogar1.html

    Und der ist wirklich robust UND valides xhtml1.0.

    Wobei ich es lieber ohne table lösen würde, dann es aber zu problemen kommen wird wegen deines vertikalen zentrierens.

    Übrigends solltest du mit pixel-angaben arbeiten und nicht mit pt's ... punkte sind nämlich medium-abhänig und werden unterschiedlich dargestellt. feste pixelwerte unterbinden auch die unterschiedliche anzeigegrösse der schrift bei IE und anderen Browsern.

  • Zitat von bugcatcher

    Nun. Frames sind schon seit Jahren aus der Mode und verpöhnt. Und genauso ist es aber auch mit Tabellen fürs Design. Heutzutage baut man seiten tabellen- und framelos ... mit hilfe von CSS. ; )

    die nächste Seite, das ist mein erstes Projekt in dieser grössenordnung und ich hab mir dabei Php und viel Table-Zeug angeeignet, ich war echt froh, dass es so ging.

    Zitat


    Naja. Was ich eigendlich meinte ist.... hast du mal den border deines tables auf 3 gestellt und gesehen, wieviele überflüssige reihen und zellen du verwendest?

    nein, aber ich kanns mir vorstellen, ich habe einfach für die Index-Seite die Seiten dahinter hergenommen und das bild eingebaut, das ist aber auch durchaus etwas, was man ändern kann.

    Ich habe auch durchaus mit zentrierten CSS Dingern experimentiert, aber schon vor zwei Jahren, bei der Seite bin ich dann blöderweise wieder auf Frames zurückgefallen ;) (http://www.frankenberger.at - ist in Überarbeitung)

    Zitat


    Ich hab mal kurz ein beispiel gemacht, wie ich deinen table zusammengebaut hätte: http://www.bugcatcher.de/files/casahogar1.html

    Und der ist wirklich robust UND valides xhtml1.0.

    Wobei ich es lieber ohne table lösen würde, dann es aber zu problemen kommen wird wegen deines vertikalen zentrierens.

    Ich werd mir das zu Gemüte führen, glaube aber auch, dass genau das vertikale zentrieren Probleme macht - mit CSS zumindest bei meinen Versuchen

    Zitat


    Übrigends solltest du mit pixel-angaben arbeiten und nicht mit pt's ... punkte sind nämlich medium-abhänig und werden unterschiedlich dargestellt. feste pixelwerte unterbinden auch die unterschiedliche anzeigegrösse der schrift bei IE und anderen Browsern.


    [/quote]

    Das ist der Punkt des Tages für mich, ich habe das bei den Schriftgrössen nachgelesen und die Schriftgrössen umgebaut, aber natürlich die Tabellenangaben vergessen. Das ist Dummheit.
    Vielen Dank für den Hinweis!!

    liebe Grüsse,
    FraGe

  • Zwei Sachen noch: es wäre vermutlich schneller mit CSS, aber nicht einfacher zu programmieren, vorallem nicht einfacher, die Seite jetzt darauf umzustellen (drei Sprachen, grosses Projekt - für mich halt :))

    zweitens: wenn ich als Angabe "width="16"" hernehme, wie löst der Browser das dann auf?
    px? oder pt? oder beliebig?

    btw: ich hab jetzt einmal die index-seite an das angenähert, was du vorgeschlagen hast mit kleinen Änderungen, teils wichtig, teils vielleicht auch falsch ;)
    und es sieht jetzt wirklich im FF und im IE gleich aus ... hmmm :)

    FraGe

  • nachdem die Seite jetzt irgendwie erstmal offline zu sein scheint und du bekundet hast, das deine seite jetzt gleich aussähe und deine letzte frage bereits von jemand anderem beantwortet wurde, gehe ich mal davon aus, das meine arbeit getan ist.... ; )

  • Zitat von Dr. Evil

    in HTML werden, bei keiner Angabe Pixel benutzt, als einzige Maßeinheit sind % erlaubt

    soviel dazu: <td width="170" height="10">

    und das sind alles andere, nur keine Prozentangaben.

    Tóg go bog é

  • Du hast sein Posting nur nicht verstanden.

    Entweder es hat keine Masseinheiten... dann sind es Pixel..... oder es hat ein % am Ende (das einzige erlaubte Masseinheitszeichen). Dann stellte es prozentuale Werte dar. ; )

  • Klar. Aber pt = Punkte ... Ist also eine typographische Masseinheit (primär für den Printbereich. Müsste was mit 3,5mm sein.... (1/72 Inch oder so). Aber Bildschirme sind nicht in Inch oder mm aufgeteilt sondern in Pixel. 1pt ist also nicht = 1px ... da kommt es dann zu umrechnungen die anhand der auflösung des Bildschirms (dpi, -> punkte auf einem inch²) ablaufen. Bei Windows müsste der Standardwert des dpi's bei 96 liegen.... das ganze für also unweigerlich zu Umrechnungen und Rundungen usw. Was aber auch wieder jeder browser (gerade bei den Rundungen) ein klein wenig anders macht, warum es hier und da zu ein paar Pixel Unterschied kommen kann.

    Darum empfehle ich für Medien die für Desktopbrowser angelegt sind die Masseinheit Pixel (px) zu verwenden und bei Seiten zum Drucken (Vordrucke, Verträge, Faxkrempel, usw.) kann man dann Punkte (pt) einsetzen.

    CSS ist nicht nur fürs Internet konzepiert, darum gibt es auch andere Masseinheiten. CSS kann man ja auch für XML einsetzen, das überhaupt nicht ans Internet oder Browser gebunden ist.

  • nochmal ne Nachfrage: wenn ich statt font-size: 10pt; - font-size: 8px; nehme, sind dann diese 8px dann auch auf dem Mac 8px? Ich werfe das immer durcheinander, weil die WinTypographie anders ist und wenn man was macht, zB. mit CSS dann sind diese Angaben ja wichtig, wenns überall gleich aussehen soll.

    Tóg go bog é

  • Pixel sind Pixel. Die kleinste sichtbare/darstellbare Einheit eines (Desktop)Rechners ist ein Pixel. Die Darstellung von den Schriften kann je nach (durch Browser oder OS) eingesetzerm Anti-Aliasing unterschiedlich aussehen, hat aber die selbe Höhe. Gibt man Rechnern andere Masseinheiten, werden sie immer intern in Pixel umgerechnet.

    Man könnte pt auch bei breiten von Tabellen verwenden. Aber diese werte würden immer umgerechnet werden. Gibt man die Breite in pixel an, muss nichts umgerechnet werden, es können also keine Rechenfehler auftreten, da Pixel einfach schon die Standardmasseinheit ist. Darum werden bei width- oder height-Angaben auch Pixel angenommen, wenn man keine Masseinheit (in dem Falle wäre eh nur % erkaubt) angibt.

    Eine Ausnahme gibt es aber für diese Regel. <font size="X"> ... bei dieser angabe werden keine pixel verwendet. Dort gibt man Schriftgrössen an, die sich an den eingestellten OS-Werten orientieren.... 1 bis 7, wobei 3 Standard-Schriftgrösse auf dem Rechner darstellt. Bzw. wenigstens sollte. Ist aber eine doofe Regelung, weil es halt nicht wirklich feste Werte sind. Darum soll man den <font>-Tag auch ganz meiden und mit Hilfe von <span> und/oder CSS Texte formatieren.

  • Zitat von bugcatcher

    nachdem die Seite jetzt irgendwie erstmal offline zu sein scheint und du bekundet hast, das deine seite jetzt gleich aussähe und deine letzte frage bereits von jemand anderem beantwortet wurde, gehe ich mal davon aus, das meine arbeit getan ist.... ; )

    F..ck, manchmal hasse ich Guatemala. Beim hochladen der Indexfile ist meine Verbindung zusammengebrochen und erst jetzt funktioniert sie wieder, ich habe die Zeit genutzt und inhaltliche Updates gemacht, bzw mit unserem Präsidenten ein Riesen Update gemacht - es wird Licht am Horizont - auch vom Coden her, ich werde zwar die Tabellen alle lassen - das ist den Aufwand nicht wert, dass ich alles umschreibe - aber ich werds wohl ein wenig optimieren :)

    Eigentlich ist meine Frage beantwortet, es lag nicht am Browser sondern an meinem umständlichen Coding - welches aber eigentlich auch korrekt war, zumindest nach W3C - nur halt umständlich - und deswegen hats der FF ned wollen :(

    TRotzdem würde mich freuen, wenn mich noch jemand auf fehler aufmerksam machen könnte - auch wenn die aktuelle Seite noch nicht online ist, nur die Startseite ist angepasst :)

    ich werde dieses Thema updaten, wenn ich die V2 online gebe.

    Danke!
    FraGe

  • Respect bugcatcher und vielen Dank.
    Ich tue mir jetzt doch die Arbeit an und baue alle Seiten so um, dass sie um die paar Tabellen weniger haben, als eigentlich nötig ist :)
    Leider steht mir damit noch eine lange Nacht bevor, aber auf einer Testseite (innerhalb der Seite, ned Index, der ist eh schon neu online) habe ich es jetzt gemacht und es sieht wie erwartet im IE und FF gleich aus.

    The Saga continues ....

    wie gesagt, ich komme wieder, wenn die V2 online geht, wenn ich darf - auch wenn ja jetzt geklärt ist, dass nicht der FF an meiner Misere schuld ist. ach ja, wegen Misere: die Sache mit den zuvielen Pixeln ist mit meinem Tabellenrausschmeissen auch erledigt, das war auch die gleiche Ursache für den zweiten Fehler. Danke! :)

    Guate Nacht,
    FraGe

    Ps: ich könnte natürlich auch noch innen die tables ein bisschen aufräumen, aber die passen als positionierung schon, oder?
    ich jetzt für den Interessierten mein testfile hochgeladen
    ******** edit ****
    schwachsinn, die ganze DB ist neu geschrieben, da passt nix mehr zusammen, ich geb jetzt Ruhe und melde mich in zwei oder drei Tagen wieder :)

    wer sichs trotzdem anschaun will:
    http://www.casaasol.net/es/info_neu.php4
    es geht nur um die Tables, die bleiben jetzt so, wenn nichts gravierendes dagegenspricht :)

  • Jaja, die Zeit:

    also, die Seite ist jetzt online, ich denke, so kann man sie jetzt lassen, ich poste das hier jetzt nur, weil ichs versprochen habe, und weils mir natürlich ein Anliegen ist, dass das Projekt in dem ich arbeite bekannt wird :)

    Ich freue mich aber sehr über verbesserungsvorschläge an der Seite, sie ist noch lange nicht perfekt!

    Danke und Grüsse nach Europa!
    FraGe

    Ps: nocheinmal die URL: http://www.casaasol.net