![]() |
Willkommen, Gast ( Anmelden | Registrierung )
![]() |
![]()
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 |
|
|
![]() |
![]()
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 ![]() 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 ... |
|
|
![]()
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. |
|
|
![]()
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; } |
|
|
![]() ![]() |
![]() |
Vereinfachte Darstellung | Aktuelles Datum: 25.05.2025 - 6:56 |