[Würmchen]

Hallo,
und noch ein Problem, diesmal eines, das wirklich dringend gelöst werden muss. IE 7 verunstaltet mein schönes Menü, dass in Firefox vortrefflich funktioniert.
Schauts euch an: ::Gemeinde Göllheim: Startseite::

Zunächst mal stimmt der Textabstand in den einzelnen Containern zum linken Rand hin nicht. (Schaue: Kultur, Freizeit und Tourismus. Einzig das Wort Tourismus hat den von mir eingestellten Abstand, der Rest einige Pixel mehr...
Wenn ich sämtliche Paddings entferne, landet der Text im Firefox wie zu erwarten direkt am linken Rand, beim IE sind dennoch ca.10px Platz und ich weiß nicht wieso...

Desweiteren lasse ich das gerade aktive Element wegen der besseren Übersicht über den Rand hinausschauen. Beim IE verschwindet der Teil über dem Rand, wenn man mit der Maus über einen Menüpunkt darüber fährt. (Klickt mal Gemeinde an und fahrt dann über Start).

EDIT: Gerade fällt mir noch was auf: Die Bilder am rechten Rand haben im Firefox etwa 5px Abstand zueinander, im IE keinen. Ich hätte das ebenfalls gerne wie im Firefox.

Meine css-Datei für die linke Navileiste:

div#navigation_links{
    width: 200px; 
    height: auto;
    margin-top: 50px;
    margin-bottom: 16px;
    margin-left:0px; 
    text-align: left;
    position: absolute;
    
}
div#navigation_links ul{
    list-style: none;
    margin: 0px;
    padding:0px;
}
div#navigation_links ul li {
    list-style: url(none) none inside;
    margin: 0px;
    padding:0px;
    line-height: 130%;
}

div#navigation_links ul li a {
    display: block;
    padding-top:5px;
    padding-bottom:5px; 
    margin:0px;

    text-decoration: none;
    color: #333333;    
}


/* 1. Ebene */
div#navigation_links ul li a.navi_links {
    display:block;
    background-color: #FFFFFF;
    border-bottom: 1px dotted #AAAAAA;
    padding-left: 10px;
    color: #333333;
    font-size: 120%;
}
div#navigation_links ul li a.navi_links:hover {
    display:block;
    background-color:#859EBC; 
    color: #EEEEEE;
    padding-left: 10px;
    font-size: 120%;
    border-bottom: 1px dotted #AAAAAA;
    
}
div#navigation_links ul li a.navi_links_active {
    display:block;
    border-right: 7px solid #859EBC;
    border-bottom: 1px solid #AAAAAA;
    border-left: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
    margin-left: -15px;
    background-color: #D1DCEA;
    color: #333333;
    padding-left: 10px;
    font-size: 120%;
    font-weight: bolder;
    

}
div#navigation_links ul li a.navi_links_actifsub {
    display:block;
    border-right: 7px solid #859EBC;
    border-bottom: 1px solid #AAAAAA;
    border-left: 1px solid #AAAAAA;
    border-top: 1px solid #AAAAAA;
    margin-left: -15px;
    
    background-color: #D1DCEA;
    color: #333333;
    padding-left: 10px;
    font-size: 120%;
    font-weight:bolder;
}

/* 2. Ebene */


   

div#navigation_links ul li a.navi_links_2 {
    display:block;
    background-color: #E7E7E7; /* #B9C5FA;*/
    
    
    color: #333333;
    padding-left: 20px;
    font-size: 100%;
}
div#navigation_links ul li a.navi_links_2_hover, div#navigation_links ul li a.navi_links_2:hover {
    display:block;
    border-right:solid 7px #B9B9B9;
    background-color: #ffffff;
    color: #333333;
    padding-left: 20px;
    
}
div#navigation_links ul li a.navi_links_2_active {
    display:block;
    border: 1px dotted #666666;
    border-right: 7px solid #859EBC;
    
    background-color: #E7E7E7;
    color: #333333;
    padding-left: 20px;
    font-size: 100%;
    font-weight:bolder;
}

div#navigation_links ul li a.navi_links_2_actifsub {
    display:block;
    border: 1px dotted #666666;
    border-right: 7px solid #859EBC;
    
    background-color: #E7E7E7;
    color: #333333;
    padding-left: 20px;
    font-size: 100%;
    font-weight:bolder;
}

Brauche dringend Hilfe.
Besten Dank im Vorraus.

Gruß, Würmchen

[Kurt51]

Zitat von Würmchen

div#navigation_links ul li {
list-style: url(none) none inside;
margin: 0px;
padding:0px;
line-height: 130%;
}

Erstell eine iehacks.css und binde diese mit Typoscript (z.B.) mit Condition [browser = msie] ein.
Darin schreibst Du dann:
div#navigation_links ul li {
margin-left: -10px !important;
}
Dann müsste es gehen, vieleicht stimmen die 10 Pixel nicht, dann nimmst Du eben die Anzahl, die passt!

[Deepwater]

Der IE setzt bei manchen Sachen einfach ein margin ein! Dies sind die 10px, deswegen wie oben bereits beschrieben, eine Browserweiche einbauen und dem IE nen negativen margin geben.
Mit der Browserweiche kannst auch die Bilder dann korrigieren.
Im IE 6.0 passt es aber,...

[Würmchen]

Danke,
inzwischen bin ich auch schon auf eine ähnliche Idee gekommen und hab ein bisschen rumprobiert, nur für den Fall, dass es wirklich nicht anders als über eine spezielle css geht....
Allerdings klappt das mit den Conditions nicht.

[typoscript]

Typoscript-Code:

1: 2: 3: 4: 5: 6: 7: 8: 9:

[useragent = *firefox* ] file3 = fileadmin/templates/css/navigation_links.css [global] [browser=msie] file3 = fileadmin/templates/css/navigation_links_ie.css //[else] //file3 = fileadmin/templates/css/navigation_links.css [global]

Zum testen habe ich eine Eigenschaft in der navigation_links_ie.css (in diesem Fall text-allign) von left auf right geändert und mit !important versehen. Allerdings schiebt jetzt auch der Firefox den Text nach rechts.
Mit der Condition stimmt also irgendwas nicht.

EDIT: Ok, ich hatte die geschweifte Klammer am Ende der Condition vergessen,
jetzt laden weder Firefox noch IE irgendeine css, was sowas von keinen Sinn ergibt....

[Deepwater]

Dann sprechs halt über CSS direkt an...

z.B.:

html > body div#navigation_links{
Attribute
}
oder andere Browserweichen,

*+html body div#navigation_links{
Attribute
}

in deinem layout.css

Das wäre halt die css-Lösung, da brauchst nicht extra ne neue iehacks.css erstellen...

Edit: Habs überlesen das du eh schon eine CSS-Lösung hast und nur mit den Conditions nen Problem hast. Mit den Conditions weiss ichs leider auch nicht...
Ausser eben über suchen: http://www.typo3forum.net/forum/typo...erweitern.html (Browserweiche im TS erweitern)

[Würmchen]

Danke trotzdem...
Mit den Conditions ist das so eine Sache, da die TS-Referenz mehr als dürftig ist.
In diversen Foren habe ich Beispiele gefunden, die aber jedesmal anders aussahen.
Mal mit geschweiften Klammern, mal ohne, mal mit [Browser = Firefox], mal mit [user_agent = *firefox*] u.s.w.
Schwieriges Thema....

[Denny1987]

Guten Morgen,

ich weiß nicht ob du das schon gesehen hast aber im ie6 rutscht das ganze Menü einfach nach oben und ist auch nur noch mit Punkten, ist das so gewollte ?! Außerdem sind noch Laut HTML Validator 13 kleine Fehler drin. Das mit den Abständen die FF und ie unterschiedlich interpretieren kann man mit

* {
margin:0px;
padding:0px;
}


P.s hast du hier schon geschaut ? TYPO3.net - Das deutsche TYPO3-Portal:browser
eigentlich gut umgehen.

[Würmchen]

Zitat von Denny1987

Guten Morgen,

ich weiß nicht ob du das schon gesehen hast aber im ie6 rutscht das ganze Menü einfach nach oben und ist auch nur noch mit Punkten, ist das so gewollte ?! Außerdem sind noch Laut HTML Validator 13 kleine Fehler drin. Das mit den Abständen die FF und ie unterschiedlich interpretieren kann man mit

* {
margin:0px;
padding:0px;
}


P.s hast du hier schon geschaut ? TYPO3.net - Das deutsche TYPO3-Portal:browser
eigentlich gut umgehen.

Das hochgerutschte Menü war nur, weil ich gerade rumprobiert habe. Wie oben beschrieben wurde in diesem Moment keine css-Datei eingebunden...

margin:0px; und padding:0px; hab ich schon drin, es wird auch vom IE korrekt (mehr oder weniger interpretiert).
Wenn ich irgendwo nur für den IE mit dem *Hack Werte überschreibe, dann klappt das mit margin wunderbar, mit padding aber irgendwie nicht.
Es ist zum verrückt werden. Scheiß IE, Scheiß M$. Ist es so schwer einen standardkonformen Browser zu programmieren?

Die von dir verlinkte Seite hatte ich schon studiert, das aufgeführte Beispiel hat aber auch nicht funktioniert...


EDIT: Ok, ich komme mit viel Trickserei und etlichen *-Hacks doch noch zum Ziel.
Man muss dem IE am besten für jedes Element die width vorgeben, dann klappt es besser mit der Positionierung.

Aber ein Frage hätte ich noch:
Diese Vorgehensweise mit dem *Hack.....
Für welche IE Versionen greift die und wie zuverlässig ist das ganze? Muss ich damit rechnen, dass mein Layout spätestens mit IE8 im ist, oder kann man davon ausgehen, dass das so auch in Zukunft funktionieren wird?

Gruß, Würmchen


P.S: Danke euch allen für die Unterstützung...
Wenn ihr Lust und Zeit habt, schaut doch nochmal kurz auf der Seite vorbei und postet es, falls euch noch was auffällt. Insbesondere interessiert mich das Aussehen in IE 5 und 6, sowie in allen Opera-Versionen. Wenn ein Mac-User draufschauen könnte, wäre das ebenfalls schön... ::Gemeinde Göllheim: Startseite::

[Kurt51]

Zitat von Würmchen

Danke,
inzwischen bin ich auch schon auf eine ähnliche Idee gekommen und hab ein bisschen rumprobiert, nur für den Fall, dass es wirklich nicht anders als über eine spezielle css geht....
Allerdings klappt das mit den Conditions nicht.

[typoscript]

Typoscript-Code:

Zum testen habe ich eine Eigenschaft in der navigation_links_ie.css (in diesem Fall text-allign) von left auf right geändert und mit !important versehen. Allerdings schiebt jetzt auch der Firefox den Text nach rechts.
Mit der Condition stimmt also irgendwas nicht.

Rrrrrrrrrrischtiiiiiiiiig! - So geht das nicht! Conditions immer auf oberster Objektebene!!!

also so z.B.:
page.includeCSS {
file1 = {$cssPathN}main03.css
file1.media = screen
}
[browser = msie]
page.includeCSS {
file5 = {$cssPathN}iehacks.css
file5.media = screen
}
[GLOBAL]

[Deepwater]

Das Aussehen mit den verschiedenen IE´s kannst du doch selber schauen?
Gib mal bei einer Suchmaschine "Multiple IE" ein. Ist ein Package zum downloaden. Da kannst du dann alle IE Versionen auf deinem Rechner nutzen.
Zu den Hacks gibs ne ganz nette Seite: http://www.thestyleworks.de/tut-art/ie7.shtml

Und bezgl. IE 8 , das wird noch dauern wobei Winzigweich(Microsoft :P) bestimmt wieder was tolles sich einfällen lässt, das es wieder anders ausschaut!