nicht angemeldet
Firefox interpretiert CSS-Style micht vollständig
0 0 
MudGuard
0 0 0 
Gunnar Bittersmann
Firefox interpretiert CSS-Style micht vollständig
Hallo.
Ich habe ein Menu mit Textlinks, mit den üblichen hover und Co Effekten. Ich habe ebenfalls eine Breite angegeben. Der IE Hinterlegt genau die Breite Farbig auch wenn der Text kürzer ist, genau wie gewollt.
Der Firefox wendet die gegebene Hintergrundfarbe lediglich auf der Länge des Links an, dass ist nicht gewollt.
Desweiteren wollte ich noch ein paar graue Streifen erzeugen. Ohne Inhalt zur Verzierung. Diese werden im IE angezeigt, aber nicht im Firefox.
Hier ist der Code:
.
.
.
<head>
<style type="text/css">
.menu:hover {
background:#dddddd;
}
.menu:active {
background:#cccccc;
}
.menu {
font-weight:bold;
color:#000000;
text-decoration:none;
background:#efefef;
width: 120px;
}
</style>
</head>
.
.
.
<a class="menu" href="nevu.php?sektion=nevu">Nevu</a><br>
<a class="menu" href="javascript:musik()">Musik!</a><br>
<a class="menu" href="mitglieder.php?sektion=mitglieder">Mitglieder</a><br><br>
<!--Die Streifen:-->
<div style="background:#efefef; width: 100px;"></div><br>
<div style="background:#efefef; width: 90px;"></div><br>
<div style="background:#efefef; width: 70px;"></div><br>
<div style="background:#efefef; width: 40px;"></div><br>
<div style="background:#efefef; width: 10px;"></div><br>
Ich hoffe ich habe mich klar ausgedrückt, und ihr könnt mir helfen!
Danke!
-
Moinsen,
Ich habe ein Menu mit Textlinks, mit den üblichen hover und Co Effekten. Ich habe ebenfalls eine Breite angegeben. Der IE Hinterlegt genau die Breite Farbig auch wenn der Text kürzer ist, genau wie gewollt.
Der Firefox wendet die gegebene Hintergrundfarbe lediglich auf der Länge des Links an, dass ist nicht gewollt.aber vermutlich richtig. Links sind inline-Elemente und backgrounds werden auch nur dort hinterlegt.
.menu:hover {
das kennt der IE nicht. Der kann nur a:hover
--
cu,
Maz-
Hi,
.menu:hover {
das kennt der IE nicht. Der kann nur a:hoverer kennt :hover bei Links. Egal, wie diese selektiert werden.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
-
-
Hi,
Ich habe ein Menu mit Textlinks, mit den üblichen hover und Co Effekten. Ich habe ebenfalls eine Breite angegeben. Der IE Hinterlegt genau die Breite Farbig auch wenn der Text kürzer ist, genau wie gewollt.
Dieser Fehler des IE ist altbekannt.
a ist (per default) ein (non-replaced) inline-Element - also darf width nicht darauf angewendet werden, IE tut das trotzdem.
Wenn Dir der default nicht gefällt, ändere ihn.
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
Schreinerei Waechter
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
-
hi,
Ich habe ein Menu mit Textlinks, mit den üblichen hover und Co Effekten. Ich habe ebenfalls eine Breite angegeben. Der IE Hinterlegt genau die Breite Farbig auch wenn der Text kürzer ist, genau wie gewollt.
eben, wie gewollt, nicht wie _richtig_.
Der Firefox wendet die gegebene Hintergrundfarbe lediglich auf der Länge des Links an, dass ist nicht gewollt.
von dir nicht, vom standard schon.
.menu { ...
width: 120px;
.
<a class="menu" href="nevu.php?sektion=nevu">Nevu</a><br>a ist ein (non-replaced) inline element, und kann somit keine width/height bekommen.
ändere dies - bspw. in dem du display auf block setzt, oder die links floaten lässt.Desweiteren wollte ich noch ein paar graue Streifen erzeugen. Ohne Inhalt zur Verzierung. Diese werden im IE angezeigt, aber nicht im Firefox.
<div style="background:#efefef; width: 100px;"></div><br>leeres element = keine höhe. gib ihm eine.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Hi,
Subject: Firefox interpretiert CSS-Style micht vollständig
doch, tut er. Zur Vollständigkeit gehört, ungültige und nicht zu beachtende Angaben zu ignorieren.
Der Firefox wendet die gegebene Hintergrundfarbe lediglich auf der Länge des Links an, dass ist nicht gewollt.
Firefox ignoriert konform zum Standard die width-Angabe, da diese bei non-replaced inline elements nicht gilt. Ändere also diesen display-Typus.
Desweiteren wollte ich noch ein paar graue Streifen erzeugen. Ohne Inhalt zur Verzierung. Diese werden im IE angezeigt, aber nicht im Firefox.
Echt? Das finde ich ja interessant. In welcher Höhe zeigt der IE die denn an?
.menu:hover {
Du meinst sicher ul#menu a:hover, richtig? Ein Menü ist eine Liste von Links, also der Archetypus eines <ul>. Für eine Klassifizierung sehe ich hier keinen Grund, es sei denn, Du hast in mehreren Bereichen Deiner Seite gleichartige Menüs.
<a class="menu" href="nevu.php?sektion=nevu">Nevu</a><br>
Der Einsatz von <br> ist in fast allen Fällen ein Zeichen dafür, dass man über die Struktur noch einmal nachdenken möchte.
<a class="menu" href="javascript:musik()">Musik!</a><br>
Gib diesen Link bitte mit JavaScript aus, da er andernfalls auch dann erscheint, wenn er funktionsfrei ist.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes -
Hi Marcel,
.menu {
width: 120px;<a class="menu" href="nevu.php?sektion=nevu">Nevu</a><br>
a ist ein Inline-Element, das ist für eine width-Angabe nicht empfänglich. [CSS2 §10.2]
Sollte es jedenfalls nicht; Firefox macht's richtig, IE falsch.
<a class="menu" href="javascript:musik()">Musik!</a><br>
^^^^^^^^^^^^^^^^^^
Autsch.Das Menü sieht doch stark nach Liste aus! Wenn du es auch als solche auszeichnest, hast du Blockelemente (li), außerdem sind die Klassen und hässlichen <br> nicht erforderlich.
<ul id="Menu"> <li><a href="nevu.php?sektion=nevu">Nevu</a></li> <li<<a href="javascript:musik()">Musik!</a><br> <li><a href="mitglieder.php?sektion=mitglieder">Mitglieder</a></li> </ul>Gruß,
Gunnar--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Na, da war ja wieder geballte Manpower des Forums versammelt, um viermal das Gleiche zu sagen. ;-)
außerdem sind die […] hässlichen <br> nicht erforderlich.
<li<<a href="javascript:musik()">Musik!</a><br>^^
Also auch da nicht; dafür </li>. Und <li> statt <li<.
Gunnar--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust) -
Ich habs jetzt mal so gemacht:
<style type="text/css">
.menu:hover {
background:#dddddd;
}
.menu:active {
background:#cccccc;
}
.menu {
font-weight:bold;
color:#000000;
text-decoration:none;
background:#efefef;
width: 120px;
}
</style><ul>
<li class="menu"><a class="menu" href="javascript:musik()">Musik!</a></li>
<li class="menu"><a class="menu" href="mitglieder.php?sektion=mitglieder">Mitglieder</a></li>
<li><div style="background:#efefef; width: 100px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 90px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 70px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 40px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 10px;height:16;"> </div></li>
</ul>Das sieht schon viel besser im Firefox aus.
Es wird aber Leider der Hovereffekt nur auf den link ausgeführt, so dass nun immer der Überstehende Teil in der Farbe unverändert bleibt.
Wie könnte ich das bitte ändern?Und schonmal danke an alle Helfer!
-
Hi Marcel,
Ich habs jetzt mal so gemacht:
<ul>
<li class="menu"><a class="menu" href="javascript:musik()">Musik!</a></li>Warum? Du hast den letzten Teil meiner Antwort gelesen?
Gib dem ul eine id (z.B. Menu) und selektiere die Nachfahren:
#Menu li { /* … */ } #Menu li a { /* … */ }Eine Klasse menu ist nicht erforderlich.
<li><div style="background:#efefef; width: 100px;height:16;"> </div></li>
Die Höhenangabe ist fehlerhaft.
<li><div style="background:#efefef; width: 90px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 70px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 40px;height:16;"> </div></li>
<li><div style="background:#efefef; width: 10px;height:16;"> </div></li>hr würde sich anstelle von div anbieten.
Ebenso gleiche Eigenschaften ins Stylesheet zu schreiben:
#Menu br {background:#efefef; width: 10px;height:16px}Aber am sinnvollsten erscheint mir, die Verzierung als (Hintergrund-)Bild zu realisieren.
Gruß,
Gunnar--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)-
Lieber Gunnar,
Aber am sinnvollsten erscheint mir, die Verzierung als (Hintergrund-)Bild zu realisieren.
Und warum nicht mir border-bottom?
z.B.:
li { border-bottom: 1px solid #888888; }Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Hi Felix,
Aber am sinnvollsten erscheint mir, die Verzierung als (Hintergrund-)Bild zu realisieren.
Und warum nicht mir border-bottom?Es sollten doch ein paar mehr Linien als eine sein, noch dazu unterschiedlicher Breite.
Gruß,
Gunnar--
“I got my finger on the trigger / But I don’t know who to trust” (Bruce Springsteen, Devils and Dust)
-
-
-
-