 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 |
 |
 
|
|
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? |
|
|
|
| Google Bot |
Beitrag
#
|
 Google Ads |
|
|
|
|
|
1 Besucher lesen dieses Thema (Gäste: 1 | Anonyme Besucher: 0)
0 Mitglieder:
|
Vereinfachte Darstellung | Aktuelles Datum: 26.04.2024 - 3:28 |