Hallo, ich bin neu hier. Ich heiße Claudia, bin 41 und seit 1999 beschäftige ich mich mehr oder weniger intensiv mit Webseiten. Seit einiger Zeit mit Phase 5 (und ich habe jetzt erst entdeckt, dass es hier ein Forum gibt!)

Ich pfriemel schon eine ganze Weile mit einer Seite herum, ich hoffe, ich werde hier eine Lösung finden. Ich habe dieses Menü benutzt (http://css.maxdesign.com.au/listamatic/horizontal05.htm) und farblich angepasst. Aber im IE wird der obere Rand der Buttons nicht angezeigt, ich kann machen, was ich will. Zur Veranschaulichung habe ich mal die Dateien in ein Testverzeichnis hochgeladen. http://www.claudiafinke.de/can06.html (ist die Originaldatei) ist so, wie es online ist, bei http://www.claudiafinke.de/test/index.html ist die Tabellenzeile höher, sodass man den fehlenden Rand besser sieht und bei http://www.claudiafinke.de/test/index_tes.html habe ich einen dicken Rand oben definiert, der aber im IE auch nicht angezeigt wird! Ich habe *keine* Ahnung, was hier passiert - hat irgendjemand eine Idee?

Danke...
Claudia

Hallo Claudia, willkommen im Forum.

Zuallererst: Deine Originalseite ist doch recht umfangreich. Grundsätzlich würde ich empfehlen, nicht ganz so viele Thumbnails auf eine Seite zu stellen, ich hab (und einige andere wahrscheinlich auch ) zwar DSL, aber dennoch - aber das war ja nicht die Frage.
Im IE klatschen auf der Originalseite die Registerreiter direkt oben an den Rand, während im FF da noch einiges an Platz ist. Zudem fällt mir im IE noch auf, dass bei der Scroll-Leiste für die Thumbnails Vorder- und Hintergrundfarbe wohl identisch sind - ich sehe da zumindest nicht, wo ich mich gerade befinde (im FF, der das Einfärben nicht erlaubt, ist alles sichtbar).

Ich sehe aber dein Problem auf den Testseiten und guck es mir mal an ...

Meine Reduktion ergab folgenden HTML-CodeDamit lässt sich das Problem des verschwindenden oberen Randes prüfen: Im FF ist er da, im IE nicht. Auslöser scheint dass Padding des A-Tags zu sein. Ändere ich das nämlich aufist auch der Rand da. Und verwende ich dann einen breiteren Randsehe ich auch, was der IE macht: Er schneidet den Rand vom A-Tag oben ab (anscheinend vergrößert sich das LI-Tag nicht entsprechend). Keine Ahnung, ob's am Box-Border-Modell liegt oder an etwas anderem, aber vielleicht kannst du damit ja schon mal arbeiten, ich finde, es sieht auch mit einem Padding von 1px noch gut aus.



Zusatz für Interessierte: Beim unteren Rand gibt es das Problem nichtmacht unten brav ein Padding von 10px ohne irgendwo am unteren Rand etwas abzuschneiden.

Würde mich freuen, wenn jemand noch mehr zu des Rätsels Lösung beitragen kann.

Noch ein Tipp: Wenn du im obersten Quellcode von mir die Liste mehrfach untereinander setztwird nur bei der obersten der obere Rand gekappt. Die unteren beiden erscheinen komplett mit Rand. Vielleicht kommst du ja auch damit auf eine Lösung des Problems. Sag mir bitte mal, wie es ausgegangen ist.


Und mit sollte es auch für die erste Liste funktionieren.


Sofern du die Liste soformatierst.


Und dann noch dann sollte es sich einigermaßen perfekt in den Rest der Seite einfügen.

Und nach einem letzten Test nochmal in einem ganzen Satz und ganz konkret auf dein Beispiel bezogen: Ergänze einfach noch im CSS-Teil, dann sollte es passen. Wie gesagt, eine Rückmeldung, ob es bei dir auch so funktioniert, wäre schön.

Boh. Vielen Dank für diese superschnelle Antwort, damit habe ich nicht gerechnet! Ich werde hoffentlich morgen Zeit haben, Deinen Tip auszuprobieren, heute ist Feierabend Ich werde mich aber auf jeden Fall melden!

Gruß,
Claudia

So, ich hab jetzt mal lokal ein bisschen rumgespielt - es funktioniert! Danke, danke, danke! Ich habe allerdings das
#navlist {
margin: 0px;
}
rausgenommen, weil sonst die durchgezogene Linie unter der Navi verschwindet.

Wenn ich zeitlich schaffe, dann werde ich das heute site-weit ändern

Claudia

Jepp, für deine Liste war wie geschrieben nur dasnotwendig. Danke für die Rückmeldung.

Und nochmal als Anregung: Die auf den IE beschränkten Optionen, den Scrollbalken einzufärben (scrollbar-*), würde ich nicht dazu nutzen, alles in einer Farbe zu setzen. Mir fehlt jetzt leider eine korrekte Bezeichnung für den Teil des Scrollbalkens, der anzeigt, wo man sich gerade auf der Seite befindet und auf den man mit der Maus klicken kann um ihn hoch bzw. runter zu ziehen und damit die Seitenposition zu verändern, aber es ist das Teil, das mit scrollbar-face-color eingefärbt wird (siehe auch hier). Wenn man den nicht sieht, fehlt dem Benutzer ein wichtiges Navigations- und Anzeigeelement.

Falls noch andere mitlesen, würde mich sehr interessieren, ob der Effekt des verschwindenden oberen Randes schon bekannt ist und ob es eventuell noch andere Wege gibt, ihn zu umgehen.

Moin,

es ist halt mühsam sich (im Quelltext) durch eine Seite zu quälen deren layout aus Tabellen besteht.
Schon da gibt es einfachere und bessere Layout Möglichkeiten.
DIV-Container zum Beispiel!
Die CSS-Gestalltung partiell in einer separate Datei, der Rest dann doch auf der Seite, machen eine Fehlersuche (oder auch nur die Suche nach Möglichkeiten) zumindest für Dritte auch nicht leichter

Einfache Beispiele wie man DIV-Container einsetzen kann, hate ich schon mal im Netz gestellt.
Guckst Du hier oder hier oder hier oder hier oder hier.
Einfach Dir die Quellcode anschauen and see how it's done

cu
Conny

Deshalb hatte ich ja das Problem auch auf eine tabellenlose und lediglich DIV-basierte Version reduziert. Wollte jetzt aber keine TABLE-vs.-DIV-Diskussion vom Zaume brechen , dachte mir schon, dass das noch von anderer Seite kommt ...

Hast du eine Ahnung, warum der IE den oberen Rand der A-Tags abschneidet?

Das war mir fast klar, dass hier eine Tab vs Div-Diskussion kommt *lolol* Um ehrlich zu sein, habe ich auch schon daran gedacht, mit Containern zu arbeiten, vielleicht mache ich mir mal die Arbeit und setz mich ran. Ich mag ja die Seite ccs4you - und eine andere Seite von mir habe ich schon mit Containern gestaltet.

Thomas, ich hatte vergessen, auf Deinen Einwand mit den Scrollbalken zu reagieren - sorry. Es stimmt, dass man nicht sieht, wo man ist, ich wollte den Scrollbalken einfach so unsichtbar wie möglich machen. Dein Einwand macht mich aber nachdenklich, ich denke ich werde mal einen Rahmen einrichten. Und noch was - meinst Du, es ist besser, die Masse an Thumbnails auf verschiedene Seiten zu verteilen? Es sind sehr viele, das stimmt, aber es wird ja eine reine Fotoseite, und meine Freundinnen wissen ja, was sie erwartet .

Claudia

Dann hättest du aber auch die Pfeilchen noch einfärben müssen, dann wäre er gar nicht mehr zu sehen - mich stört eigentlich am meisten, dass man das Teil nicht sieht, zum Scrollen benutze ich es eigentlich eher selten, aber es ist immer ein guter Indikator wie viel Inhalt sich auf der Seite befindet bzw. wie weit man scrollen kann. Und außerhalb des IE funktioniert das Einfärben eh nicht ...Sofern du die Seiten alle von Hand strickst, ist der administrative Aufwand ist mit mehreren Seiten natürlich größer. Falls du ein entsprechendes Tool hast, sollte der administrative Aufwand allerdings nicht viel größer sein. Aber ich habe schon öfter festgestellt, dass manche Systeme bei Seiten mit wirklich vielen Grafiken Probleme bekommen und ggf. spürbar langsamer reagieren - und die Download-Zeiten sind natürlich auch viel höher. Ich würde die Thumbnails auf mehrere Seiten verteilen. Es gab da mal eine Regel mit maximal 50 kB pro Seite - keine Ahnung, ob die in DSL-Zeiten immer noch gilt ...

Hallo,

Ich glaub nicht so sehr, daß es abgeschnitten wird, der IE läßt an der Stelle einfach weniger Platz und hierdurch kommt es dann zu dieser überschneidung.
Vermutlich (so aus'm Bauch heraus) liegt das an der Unterschiedliche Bewertung (der Beiden Browser IE und FF) von Margin und Padding; auch die height=100% Angabe im Table-Tag könnte problematisch sein (nicht getestet) Wenn eine height Angabe im Table-Tag, dann über Style="height: 100%"
Ist aber hier wohl nicht entscheident.

cu
Conny

Huppsala! Jetzt habe ich eine Seite mal spaßeshalber mit Div-Containern gemacht - aber wieso zeigt nur der IE die Seite zentriert an, aber nicht FF, NS und O? Trotz text-align:center... Habe ich irgendwo einen Denkfehler oder gibt's noch einen weiteren Befehl?

http://www.claudiafinke.de/indextest%5B3%5D.html

Nochmal danke für die nette und schnelle Hilfe hier.
Claudia

Hi Claudia,
abhilfe für FF, direkt nach dem body-Tag den center-tag einfügen (und ganz am Schluß vor /body natürlich schließen!).
Dann hast Du einmal ein /div zuviel, einmal vor /body rausnehmen.

Weniger wichtig:
Einmal Title aus dem Head herausnehmen, ist zwei mal vorhanden und Doctype deklarieren, dann läßt es sich leichter validieren!.

Schon übersichtlicher geworden!

cu
Conny

Naja, CENTER ist ja deprecated. Ein allgemeines Verständnisproblem ist glaube ich, dass man meint, text-align gälte auch für Block-Elemente. Korrekt ist nach meinem Wissen, dass es eigentlich nur für Inline-Elemente gilt (außer natürlich beim IE). D. h. schreibst du innerhalb von dem BODY mit "text-align: center;" normalen Text, ist dieser auch zentriert, das DIV (als Block-Element) dagegen nicht. Block-Elemente zentriert man (vertikal) über "margin-left: auto; margin-right: auto;". Bin leider nur kurz online, deshalb ist das jetzt ein bißchen aus der Hüfte geschossen, aber so grob müsste das funktionieren.

Hallo,

ist natürlich richtig, aber es ist am einfachsten und funktioniert einwandfrei!

Imho haben die da vorschnell etwas für deprecated erklärt, ohne einen vernünftigen ersatz zu schaffen (außer natürlich über diese etwas umständliche Margin Geschichte)

Persönlich handhabe ich es genau so, solange es 'nur' deprecated ist, ist es (noch) kein Fehler und erlaub (mit verlaub )

cu
Conny

Das ganze Zentrieren (viel schlimmer noch vertikal) ist ja nicht ganz einfach. Besser wäre es wohl gewesen, statt text-align eine Art "inner-align" zu schaffen, das dann auch für Block-Elemente gilt. Man könnte zwar auch argumentieren, dass jedes Block-Element seine Position selbst bestimmen sollte, aber der Innnenabstand des Elternelements beeinflusst ja auch die Position - lassen wir uns mal überraschen, was da noch so kommt.Ich versuche eher, die mißbilligten Tags zu vermeiden, aber das kann man wahrscheinlich genauso wie den TABLE-DIV-Streit ewig diskutieren .

Ich verabschiede mich für eine Woche in den Urlaub, also nicht wundern, wenn ich nach einem fulminanten Neustart erstmal wieder still bin ...

Hallo

Standardkonform ist das zentrierte Anzeigen eines Blockelements mit margin-left:auto; margin-right:auto; zu erreichen.

Aber wer kann's mal wieder nicht? Richtig, der MSIE (zumindest bis V 6). Der benutzt text-align:center; um dies zu erreichen. Diese Angabe ist allerdings nicht für Blockelemente, sondern für deren Inhalte gedacht.

Zu umgehen ist das Dilemma durch folgendes Vorgehen:


Soweit der HTML-Quelltext.


Die Angabe zum text-align lässt den Inhalt von <body> zentriert erscheinen. Der MSIE wendet dies auch auf Blockelemente (hier <div id="all">, <h1>, <p>) an, alle anderen Browser zentrieren nur den Text innerhalb der Blockelemente. Dies wird deutlich, wenn wir im nächsten Schritt dem <div> eine Breite verpassen.


MSIE zentriert den Block auf der Seite (so wie es claudettina bei sich beobachtet hat) mit zentriertem Text, alle anderen Browser zeigen den Block auf der linken Seite mit zentriertem Text. Wir zentrieren den Block nun standardkonform. Der MSIE wird es ignorieren, aber der hat ja schon eine ihm verständliche Angabe.


Der Block ist nun überall zentriert. Zusätzlich schaffen wir 1em Platz nach oben. Allerdings ist immernoch der Text zentriert. Ist das nicht gewünscht, geben wir für <div id="all"> noch text-align:left; an. Die Angabe gilt für alle Elemente (für den MSIE) und deren Inhalte innerhalb von <div id="all">.

Damit sollte allen Browsern gedient sein.

Tschö, Auge