Prob HMENU Firefox und IE
| Autor | Nachricht |
|---|---|
|
Verfasst am: 07. 02. 2009 [21:47]
|
|
|
ralfiklein
Themenersteller
Dabei seit: 27.06.2007
Beiträge: 131
|
Moin, ein vermutlich ewiges Thema, aber ich habe keine befriedigenden Antworten im Forum oder beim Googeln gefunden. Das Problem sind an sich nur 2px im Abstand. Unter diesem Link geht bitte mal im Mneü auf den Punkt Aktuell. Da kommt Aktuell und danach Archiv. Im Firefox ist alles Richtig. Im IE ist die 3. Ebene 2px nach rechts verschoben. Wie kann man das beheben? www.kjwnord.de/ Mein TS vom Menü: TYPOSCRIPT MENU = HMENU MENU { 1 = TMENU 1 { expAll = 1 wrap = <ul id="nav">|</ul> noBlur = 1 NO = 1 NO.wrapItemAndSub = <li>|</li> IFSUB = 1 IFSUB.wrapItemAndSub = <li class="menuparent">|</li> ACTIFSUB < .IFSUB } 2 < .1 2.wrap = <ul>|</ul> 3 < .2 4 < .2 } } } } Mein CSS: HTML ul#nav,
ul#nav ul {
margin: 0;
padding: 0;
width: 150px;
background: #FFFFFF; /* IE6 Bug */
color: black;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}
ul#nav li {
position: relative;
list-style: none;
font-family: Arial, Helvetica, sans-serif;
}
ul#nav li a {
display: block;
text-decoration: none;
padding: 5px;
border-bottom: 1px solid #00ACD3;
font-family: Arial, Helvetica, sans-serif;
color: #00ACD3;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#nav li { float: left; height: 1%; }
* html ul#nav li a { height: 1%; }
/* End */
ul#nav ul {
position: absolute;
display: none;
top: -1;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #e70097;
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: 00ACD3;
border-right-color: 00ACD3;
left: 150px;
}
ul#nav ul li ul {
position: absolute;
display: none;
top: -1;
border-left-width: 1px;
border-left-style: dotted;
border-left-color: #e70097;
border-top-width: 1px;
border-right-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-top-color: 00ACD3;
border-right-color: 00ACD3;
left: 150px;
}
ul#nav li ul li a { padding: 5px; } /* Sub Menu Styles */
ul#nav li:hover ul ul,
ul#nav li:hover ul ul ul,
ul#nav li.over ul ul,
ul#nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */
ul#nav li:hover ul,
ul#nav li li:hover ul,
ul#nav li li li:hover ul,
ul#nav li.over ul,
ul#nav li li.over ul,
ul#nav li li li.over ul { display: block; } /* The magic */
ul#nav li.menuparent { background: transparent url(arrow.gif) right
center no-repeat; }
ul#nav li.menuparent:hover,
ul#nav li.over {
background-color: #FFFFFF;
}
ul#nav li a:hover {
color: #E70097;
}Tut mir leid wenn ich diesen Satz noch schreibe, aber: Nein, ich werde das CSS nicht Validieren, denn wenn ich das tue funktioniert gar nix mehr. Daran liegt es leider gar nicht, ich habs Probiert. |
  |
|
|
Verfasst am: 09. 02. 2009 [10:30]
|
|
|
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 1797
|
ralfiklein schrieb: Tut mir leid wenn ich diesen Satz noch schreibe, aber: Nein, ich werde das CSS nicht Validieren, denn wenn ich das tue funktioniert gar nix mehr. Daran liegt es leider gar nicht, ich habs Probiert. Tut mir nicht leid, wenn ich das schreibe: Aber bei "seltsamen" Browserverhalten ist es empfehlenswert, erst einmal validen Code zu haben, den alle Browser (eigentlich) gleich darstellen sollten. Sobald Fehler im Code sind, versucht jeder Browser diese irgendwie auszugleichen, was nur zu Chaos führt. Bei 32 Fehlern und 20 Warnungen fürs HTML der Startseite kann ich nur jeden browser verstehen, der nicht mehr weiß, wie er sich verhalten soll. Viele Grüße Julian |
|
|
|
Verfasst am: 09. 02. 2009 [16:57]
|
|
|
ralfiklein
Themenersteller
Dabei seit: 27.06.2007
Beiträge: 131
|
Tja, und du meinst also wenn ich die Ganzen Sachen die Valide sind behebe, dann rutscht die 3. ebene bei der Navi nach links im IE? Aha. 1. Prob, vieles kann ich gar nicht beheben weil Typo3 den Kram erstellt, was weiß ich woher. Meist isses nur nen / der irgendwo zu viel ist. Oder nen n bei das habe ich bis heut nicht verstanden. 2. Meine CSS Codes sind sauber. Das einzige was als Fehler in der Navi CSS ist, ist ein Punkt mit top: -1; was an sich wohl falsch ist. Der Validator löscht die Zeile ganz. Dann rutscht aber Das Menü in der zweiten Ebene einen Menüpunkt nach unten und man kann nicht weiter. Davon ab gesehen das das die Browser auch richtig an zeigen. Ist ja nicht so das ich es nicht schon damit Probiert hatte. Ich wollte nur genau das was ich jetzt wieder schreiben musste umgehen, denn es behebt das Problem vom IE nicht. |
|
|
|
Verfasst am: 09. 02. 2009 [17:58]
|
|
|
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 1797
|
ralfiklein schrieb: Man kann auch (relativ schnell) mit TYPO3 XHTML-1.1-validen Output erzeugen. Man muss es nur auch wollen.1. Prob, vieles kann ich gar nicht beheben weil Typo3 den Kram erstellt ralfiklein schrieb: Vielleicht würde Dir der Validator die Zeile nicht killen, wenn Du sie valide schreiben würdest. CSS kennt viele Skalen. Was meinst Du denn "-1"? -1px? -1pt? -1em? 2. Meine CSS Codes sind sauber. Das einzige was als Fehler in der Navi CSS ist, ist ein Punkt mit top: -1; Ist schon verwunderlich, dass TYPO3 schuld ist, der Validator schuld ist, der IE schuld ist,... Shit in - shit out. |
|
|
|
Verfasst am: 09. 02. 2009 [18:13]
|
|
|
ralfiklein
Themenersteller
Dabei seit: 27.06.2007
Beiträge: 131
|
Verdammi noch eins, kann es denn war sein? Jedes mal das selbe, dann wird hier einem noch vor geworfen das man geschrieben hat das alles andere schuld sei nur man selber nicht. Habe ich aber gar nicht. Ich fasset nicht. Sorry, aber mein PROB ist das die 3. Ebene einen Px nach rechts rutscht im IE! Mein PROB ist nicht, das der CSS oder der HTML Valide ist! |
|
|
|
Verfasst am: 09. 02. 2009 [19:50]
|
|
|
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 1797
|
Unsauberer Code wird immer Probleme machen. Das ist - ob Du es wahrhaben willst oder nicht - (D)ein Problem. Und natürlich können sich jetz andere Leute für Dich Gedanken machen, wie aus unsauberer Arbeit von Dir vielleicht doch noch ein sauberes Ergebnis rauskommt. Aber das ist doch der falsche Ansatz! Erst sauberen Code, dann - wenn noch Probleme da sind - nach Lösungen suchen. |
|
|
|
Verfasst am: 09. 02. 2009 [20:18]
|
|
|
ralfiklein
Themenersteller
Dabei seit: 27.06.2007
Beiträge: 131
|
Du bist immer noch der Meinung, das wenn der Quellcode Sauber ist, die Lücke bei Ebene 3 nicht mehr vorhanden ist? Deshalb erneut meine Frage, indem ich die /> Schrägstriche die mir der Validator an gibt entferne sol sich das Prob mit dem Verschieben beheben. Du bringst mich gerade echt auf die Palme. Du hast A: nicht geschaut was der Validator aus gibt B: nicht geschaut ob das CSS sauber ist. Zumindest hinterlässt du gerade den eindruck falls es dir auf fällt. Denn zu meinem Problem hast du noch gar nix gesagt. Das macht den eindruck als könntest du mir nicht helfen. Ist ja ok, aber muss man sich dann hier über ein anderes Thema als das weshalb ich mein Problem hier schrieb unterhalten. Zum 2. mal Nein, müssen wir nicht. Ich habe mich jetzt seid gut zwei Wochen damit beschäftigt. Es gibt das Problem öfters zwischen Firefox und IE. Alle Beiträge die ich fand endeten nach dem ersten Post. Sowas ist leider nicht hilfreich. Mit meinem Post hier besteht die Möglichkeit das Problem zu beheben. Habe zusätzlich das gepostet was wichtig für die Navigation ist, das TS und das CSS. |
|
|
|
Verfasst am: 09. 02. 2009 [20:36]
|
|
|
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 1797
|
Falls es Dir nicht aufgefallen ist: zu A) Ein "Errors found while checking this document as HTML 4.0 Transitional!" und "32 Errors, 20 warning(s)" reicht mir aus, dass ich (erstmal) nicht weiter schaue, was nicht passt. Denn da liegt zuviel im argen. Das schaffen von ordentlichen Code ist nicht mein Job, sondern Deiner. Da bist erstmal Du gefragt. Und wenn Du Dich mit CSS und CSS-Problemen beschäftigst, dann wirst Du auch schnell drauf stoßen, dass sauberer, valider Code durchaus einen größeren Einfluss hat auf die Interpretation einiger Browser. Aber gut, wenn Du das nicht wahrhaben willst, dann nicht. zu B) Der Validator hat Dir schon einen Fehler gesagt, was Dich aber nicht veranlasst, vielleicht dem Fehler auf den Grund zu gehen. Und Deine "Lösung", die Zeile mal wegzulassen udn sich zu wundern, dass dann gar nix mehr passt, ist wohl auch nicht wirklich eine Lösung. Hierzu habe ich mich übrigens geäußert und Dir auch schon gesagt, wie - zumindest mal dieser Fehler - behoben werden müsste. Aber gut, wenn Du das nicht wahrhaben willst, dann nicht. Ich wünsch Dir noch viel Spaß und viiiiiel Glück. Und wenn Du mal Probleme trotz validen Codes haben solltest, dann helfe ich auch gerne weiter. |
|
|
|
Verfasst am: 09. 02. 2009 [21:00]
|
|
|
Julian.Hofmann
Dabei seit: 18.05.2007
Beiträge: 1797
|
Übrigens, wenn Du Dich auch mit dem Sinn Deines Codes befassen würdest (was i.d.R. auch zu validerem Code führt), dann könntest Du drauf kommen, dass ein Versatz nach rechts mit der Umkehrung dieses Verhalten aufhebbar wäre. Und nachdem das ungewollte Verhalten nur im IE auftritt, lässt sich auch dafür eine Einschränkung finden. Mit einem HTML margin-left: -2px; |
|
|
|
Verfasst am: 09. 02. 2009 [21:23]
|
|
|
ralfiklein
Themenersteller
Dabei seit: 27.06.2007
Beiträge: 131
|
Julian.Hofmann schrieb: Übrigens, wenn Du Dich auch mit dem Sinn Deines Codes befassen würdest (was i.d.R. auch zu validerem Code führt), dann könntest Du drauf kommen, dass ein Versatz nach rechts mit der Umkehrung dieses Verhalten aufhebbar wäre. Und nachdem das ungewollte Verhalten nur im IE auftritt, lässt sich auch dafür eine Einschränkung finden. Mit einem HTML margin-left: -2px; Den Hinweis zu dem top: -1; habe ich inzwischen auf genommen. Hatte es nur noch nicht hoch geladen. Auf die Idee gekommen bin ich auch, nur leider schiebt er es in den anderen Browsern dann genau so 2px nach links. Das ist also leider nicht die Lösung des Problems. Habe es nun mit dem -2px drin. Im Firefox überlappt es, im IE schließt es ab. Die Seite sauber zu bekommen lehne ich nicht ab. Was mich an dem Gespräch halt störte war ganz einfach das keiner der Fehler direkten Einfluss auf den unterschied der Browser hat. |
|
|