 unterschiedliche darstellung css navi (ff und ie) |
|
Willkommen, Gast ( Anmelden | Registrierung )
HTML-Editor phase 5 Support > Fragen, Lösungen zu HTML-Problemen bzw. Webdesign-Fragen - Talk > HTML
 06.09.2006 - 10:01
Beitrag
#1
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258  |
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 |
 |
 
|
 |
Antworten
(1 - 18)
|
06.09.2006 - 10:22
Beitrag
#2
|
|
|
Nachschlagewerk des Orakels  Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
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 ... |
|
|
|
|
06.09.2006 - 11:04
Beitrag
#3
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
Meine Reduktion ergab folgenden HTML-Code
HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Damit 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 auf<html> <head> <style type="text/css"> <!-- /* Main Style Sheet */ body { padding: 10; } #navlist { padding: 3px; } #navlist li { display: inline; } #navlist li a { padding: 3px 0.5em; border: 1px solid #bda584; } --> </style> </head> <body> <div> <ul id="navlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> </body> </html> HTML #navlist li a { ist auch der Rand da. Und verwende ich dann einen breiteren Randpadding: 1px 0.5em; border: 1px solid #bda584; } HTML #navlist li a { sehe 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.padding: 1px 0.5em; border: 5px solid #bda584; }   Zusatz für Interessierte: Beim unteren Rand gibt es das Problem nicht HTML #navlist li a { macht unten brav ein Padding von 10px ohne irgendwo am unteren Rand etwas abzuschneiden.padding: 1px 0.5em 10px 0.5em; border: 5px solid #bda584; } Würde mich freuen, wenn jemand noch mehr zu des Rätsels Lösung beitragen kann. |
|
|
|
|
06.09.2006 - 14:10
Beitrag
#4
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
Noch ein Tipp: Wenn du im obersten Quellcode von mir die Liste mehrfach untereinander setzt
HTML <div> wird 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.<ul id="navlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> <div> <ul id="navlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> <div> <ul id="navlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> Und mit HTML #navcontainer { sollte es auch für die erste Liste funktionieren.padding: 1px 0px; } Sofern du die Liste so HTML <div id="navcontainer"> formatierst.<ul id="navlist"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> </ul> </div> Und dann noch HTML #navlist { dann sollte es sich einigermaßen perfekt in den Rest der Seite einfügen.
margin: 0px; } |
|
|
|
|
06.09.2006 - 16:01
Beitrag
#5
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
Und nach einem letzten Test nochmal in einem ganzen Satz und ganz konkret auf dein Beispiel bezogen: Ergänze einfach noch
HTML #navcontainer { im CSS-Teil, dann sollte es passen. Wie gesagt, eine Rückmeldung, ob es bei dir auch so funktioniert, wäre schön.
padding: 1px 0px; } |
|
|
|
|
06.09.2006 - 19:06
Beitrag
#6
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
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 
|
|
|
|
|
07.09.2006 - 7:10
Beitrag
#7
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
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 |
|
|
|
|
07.09.2006 - 7:36
Beitrag
#8
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
Jepp, für deine Liste war wie geschrieben nur das
HTML #navcontainer { notwendig. Danke für die Rückmeldung. padding: 1px 0px; } 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. |
|
|
|
|
07.09.2006 - 8:23
Beitrag
#9
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
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 |
|
|
|
|
07.09.2006 - 8:37
Beitrag
#10
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
ZITAT(Conny @ 07.09.2006 - 9:23)  es ist halt mühsam sich (im Quelltext) durch eine Seite zu quälen deren layout aus Tabellen besteht. 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 Schon da gibt es einfachere und bessere Layout Möglichkeiten. DIV-Container zum Beispiel! ... , dachte mir schon, dass das noch von anderer Seite kommt  ...Hast du eine Ahnung, warum der IE den oberen Rand der A-Tags abschneidet? |
|
|
|
|
07.09.2006 - 8:44
Beitrag
#11
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
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 |
|
|
|
|
07.09.2006 - 9:00
Beitrag
#12
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
ZITAT(claudettina @ 07.09.2006 - 9:44) 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. 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 ...ZITAT(claudettina @ 07.09.2006 - 9:44) 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 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 ...
. |
|
|
|
|
07.09.2006 - 11:16
Beitrag
#13
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hallo,
ZITAT(Thomas @ 07.09.2006 - 7:37) Hast du eine Ahnung, warum der IE den oberen Rand der A-Tags abschneidet? 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 |
|
|
|
|
07.09.2006 - 18:00
Beitrag
#14
|
|
|
is getting harder Gruppe: User Beiträge: 13 Mitglied seit: 06.09.2006 Mitglieds-Nr.: 6.258 |
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 |
|
|
|
|
07.09.2006 - 21:34
Beitrag
#15
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
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 |
|
|
|
|
08.09.2006 - 9:49
Beitrag
#16
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
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.
|
|
|
|
|
08.09.2006 - 16:19
Beitrag
#17
|
|
|
Kommt Zeit, kommt Rat, kommt Conrad! Gruppe: Mods Beiträge: 1.169 Mitglied seit: 21.11.2001 Wohnort: Altenkirchen, Westerwald Mitglieds-Nr.: 42 |
Hallo,
ZITAT(Thomas @ 08.09.2006 - 8:49) ... CENTER ist ja deprecated... 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 |
|
|
|
|
08.09.2006 - 19:19
Beitrag
#18
|
|
|
Nachschlagewerk des Orakels Gruppe: Mods Beiträge: 955 Mitglied seit: 29.08.2006 Wohnort: Frankfurt am Main Mitglieds-Nr.: 6.217 |
ZITAT(Conny @ 08.09.2006 - 17:19) 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) 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.ZITAT(Conny @ 08.09.2006 - 17:19) Persönlich handhabe ich es genau so, solange es 'nur' deprecated ist, ist es (noch) kein Fehler und erlaub (mit verlaub 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  ...
|
|
|
|
|
09.09.2006 - 0:37
Beitrag
#19
|
|
|
Anwärter auf W3.org Mitgliedschaft  Gruppe: User Beiträge: 550 Mitglied seit: 28.11.2001 Wohnort: Berlin Friedrichshain Mitglieds-Nr.: 107 |
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: QUELLTEXT <html> <head> <title>Zentriertest</title> </head> <body> <div id="all"> <h1>Zentriertest</h1> <p>Irgendwelcher Fülltext ohne tieferen Sinn.</p> </div> </body> </html> Soweit der HTML-Quelltext. QUELLTEXT body { margin:0; padding:0; text-align:center; } 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. QUELLTEXT #all { width:20em; border:1px solid; } 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. QUELLTEXT #all { margin:1em auto; width:20em; border:1px solid; } 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 |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
 |
2 Besucher lesen dieses Thema (Gäste: 2 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 31.10.2025 - 7:11 |