nicht angemeldet
Rutschede Zellen bei Mozilla/Netscape
Hi liebes Forum,
bei mir taucht bei Mozilla/Netscape ein mir nicht erklärlicher Effekt auf:
Ich habe eine Seite, deren Struktur sieht folgendermassen aus:
Eine Tabelle mit zwei Zellen, die erste nimmt die Navigation auf und die zweite den Seiteninhalt.
Die Navigation beruht auf folgenden Styles:
.menu {text-align:center;border-right:1px solid #666666;border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #666666;color:black;background-color:#FFEBD7; padding-right:3px;padding-top:6px;padding-bottom:6px;text-decoration:none;display:block;margin:6px;}
a.menu:link {border-right:1px solid #666;border-top:1px solid #cccccc;border-left:1px solid #cccccc;border-bottom:1px solid #666666;color:black;font-weight:bold; padding-right:3px;padding-top:6px;padding-bottom:6px;text-decoration:none;display:block;}
a.menu:visited{border-right:1px solid #cccccc;padding-right:3px;padding-left:4px;padding-top:6px;padding-bottom:6px;border-top:1px solid #666666;border-left:1px solid #666666;color:gray;border-bottom:1px solid #cccccc;font-family:verdana,arial,helvetica;display:block;background-color:#FFEBD7;font-weight:bold;font-size:12px;margin-bottom:5px;text-decoration:none;}
a.menu:hover{text-align:right;margin-bottom:5px;border-left:1px solid #666666;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;padding-right:3px;padding-top:6px;padding-bottom:6px;border-top:1px solid #666666;background:url(pics/sonne.gif);background-repeat:no-repeat;background-position:left; padding-left:4px;display:block;font-weight:bold;font-size:12px;color:red;font-family:verdana,arial,helvetica;background-color:#FFEBD7;text-decoration:none;}
Soweit so gut. Folgendes Effekt tritt nur in NN und Mozilla auf: Wenn man mit der Maus über die Buttons geht, verschiebt sich der Inhalt der zweiten Zelle nach und nach bis an den rechten Rand des Browserfensters.
Was habe ich falsch gemacht???
Es wäre schön, wenn mir jemand helfen könnte.
mfG Biggi
--
fair is foul
fair is foul
-
hi,
bei mir taucht bei Mozilla/Netscape ein mir nicht erklärlicher Effekt auf:
Ein stückchen html - code wäre nötig.
mfg becker
-
Hallo
Ein stückchen html - code wäre nötig.
mfg becker
Gerne: ich hab ein Beispiel mal testweise hochgeladen.
http://meinerosen.piranho.de/foto.html
Und die ganze css Datei: http://meinerosen.piranho.de/link.cssDerselbe Effekt tritt bei allen Dateien auf. Ich vermute, das es an der Formatierung des Links liegt, aber ich habe keine Ahnung, was genau diesen Effekt verursacht.
mfG Biggi
-
Hallo Biggi,
Gerne: ich hab ein Beispiel mal testweise hochgeladen.
http://meinerosen.piranho.de/foto.html
Und die ganze css Datei: http://meinerosen.piranho.de/link.cssDerselbe Effekt tritt bei allen Dateien auf. Ich vermute, das es an der Formatierung des Links liegt, aber ich habe keine Ahnung, was genau diesen Effekt verursacht.
Du gibst der Tabellenzelle und den Links dieselbe Klasse (menu). Dadurch wirkt das display:block auf die Tabellenzelle, welche aber nicht als normales Blockelement, sondern als Tabellenzelle (Standard ist display:table-cell) angezeigt werden soll. Daher rührt auch die Anzeige, dass die Zelle nur die Größe des darin enthaltenen Inhalts hat und nicht dieselbe Höhe wie die Zelle der zweiten Spalte in derselben Zeile (die Inhaltszelle). Falls du diese Darstellung auch weiterhin erreichen willst, solltest du ein zusätzliches div-Element einfügen, welches den Inhalt der Zelle umfasst und diesem Element die Rahmen und Farben zuweisen - oder du steigst gleich auf CSS-Layout um. Auf jeden Fall sollte die Zelle nicht display:block erhalten, es ist somit wohl nich ratsam, dieselbe Klasse für die Links und die Zelle zu benutzen (arbeite besser mit einer ID für die Zelle, die Links darin kannst du dann auch ohne Klasse ansprechen, zum Beispiel #navigation a:link usw.).
Noch etwas zum Stylesheet:
Die Deklarationen für den Rahmen kannst du zusammenfassen, beispielsweise border-style:solid; border-width:1px; border-color:#ccc #666 #666 #ccc;.
Für die vier padding-Deklarationen für oben, rechts, unten und links kannst du kurz padding:6px 3px 6px 4px; und so weiter schreiben, genauso bei margin.
Die margins würde ich generell in allen Regeln für die Links (a:link, a:visited, ...) angleichen, denn momentan springen die Navigationslinks beim Überfahren mit der Maus. Dies hat natürlich auch mit der geänderten Schriftgröße zu tun - es ist schwer, das Springen damit komplett auszuschalten, da du die vergrößerte Schriftgröße wieder mit einem kleineren padding ausgleichen müsstest, und die line-height müsste auch dementsprechend angepasst werden... Ich glaube nicht, dass sich das pixelgenau in den relevanten Browsern lösen lässt.
Am Ende einer Wertes einer font-family-Eigenschaft solltest du eine generische Schriftfamilie angeben (http://selfhtml.teamone.de/css/eigenschaften/schrift.htm#font_family), beispielsweise sans-serif.Dokumenttyp-Deklarationen am Dokumentanfang sind wichtig, Stichwort »doctype switch« und »standards compliant mode« (siehe Forumsarchiv und Google). In deinem Fall wäre das: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Anstatt <meta http-equiv="content-language" content="de,at,ch"> solltest du das lang-Attribut für das html-Element vergeben, also <html lang="de">. at und ch sind keine Sprachenkürzel, sondern Länderkennzeichen. Die jeweiligen Dialekte werden durch de-DE, de-AT und de-CH beschrieben, also wäre höchstens <meta http-equiv="content-language" content="de-de, de-at, de-ch"> denkbar. Wenn deine Seite keine verständniskritische regionaltypische Sprache enthält, reicht meiner Meinung nach lang="de" bzw. content="de" (das wolltest du mit de,at,ch vermutlich ausdrücken).
Grüße,
Mathias--
»Das Usenet ist mittlerweile in Teilen unbenutzbar geworden, ein düsterer, mit Glasscherben und Hundescheiße übersäter Spielplatz für Kontroll- und Hassmaniker, deren Neurosen sich gegenseitig ergänzen.« (MH)-
Hallo Mathias,
danke erst mal für Deine umfangreichen Ausführungen, die ich mir mal langsam zu Gemüte führen werde.
Ich denke - vielleicht ist das aber falsch - das das Hauptproblem bei dem Einfügen eines Hintergrundbildes beim Hovereffekt liegt. Aber wie ich das ändern kann, und wieso dieser Effekt nicht beim IE auftaucht, (ok, ich weiss, er schluckt alles) ist mir immer noch ein Rätsel.Aber vielen Dank mal für Deine Ausführungen.
mfG Biggi
-
-
-