navigation -ie

**Kathi234** · 29.08.2013, 21:27

huhu
ich hab mich jetzt durchs buch contao 3 gearbeitet und versuche mich momentan das erste mal im "freien flug" an meiner ersten website.. nur leider will die nicht so wie ich...
bisher bin ich noch dabei das gerüst zu basteln, safari, firefox firefox.png und chrome kein problem aber im internetexplorer ist meine navigationsleiste leicht verschoben. bzw wenn man mit der maus die 2 ebene der menüpunkte einblendet :/ ie.png
hatte bisher alles an position auf auto gestellt. dann hab ich mir gedacht, naja wenns so nicht geht geb ichs halt manuell ein. mit der höhe hats auch funktioniert. dann in margin padding perfekt verschoben. so jetzt siehts in explorer richtig aus aber dafür nicht mehr in den anderen.....

css.png
ich weiß nicht mehr weiter... was mache ich falsch?

**KlausGrenoble** · 29.08.2013, 22:43

Wenn Du einen Link hast, hilft Dir sicher jemand weiter. Falls Du lokal arbeitest, also nicht in einem Lokal, wird das schwieriger.

**Bas** · 30.08.2013, 08:30

Du hast also eine CSS-Definition die für alle Browser ausser IE taugt, und eine weitere die nur für IE taugt. Willkommen in der Welt der Crossbrowser-Optimierung.

Du könntest jetzt z.B. mittels conditional comments eine zusätzliche CSS-Datei nur für den IE einbinden. Aber da wir Contao-User sind, brauchen wir den Quatsch nicht.

Contao setzt Dir in den Body-Tag immer eine Klasse welche den erkannten Browser identifiziert.. sprich Du findest in der Frontendausgabe so etwas vor (kopiert aus der Contao-Demo, bei Aufruf im IE9):

Code:

<body id="top" class="win ie trident ie9">

Diese Klassen benutzt Du um Dein Standard-CSS (welches für alle Browser ausser IE taugt) für den IE zu überschreiben.

z.B. so:

Code:

#header .mod_navigation li:hover .level_2 {
	width:80px;
}
.ie #header .mod_navigation li:hover .level_2 {
	width:100px;
}

Versteh mich nicht falsch, mit genügend Erfahrung bekommt man es in den meisten Fällen hin, das CSS so zu formulieren, das man nur eine "Version" benötigt - und jede Zusatzdefinition macht spätere Wartung schwieriger, aber ich denke das Du mit dem oben beschriebenen Weg am schnellsten zum Ziel kommst.

**Kathi234** · 30.08.2013, 10:55

habs leider nur mit xampp

also prinzipiell könnte man alles so einrichten dass es auch mit einem richtigen css reicht?
was muss ich dabei denn beachten, bzw was habe ich genau falsch gemacht? vorher hatte ich zb alles auf auto gesetzt und das hat ja dann auch überall außer im ie funktioniert.

**Bas** · 30.08.2013, 11:25

Sorry, ich kann Dir nicht sagen was Du falsch gemacht hast (obwohl ich es eher so definieren würde, das Du alles richtig machst .. und nur der IE von sich aus falsch ist

).
Dazu bräuchte ich nen Link und etwas Zeit (die ja eh immer knapp ist) - es gibt halt ne Menge Sachen die da rein spielen können.

Schnelle Lösung: Nutze die ie-Klassen oder conditional comments (die allerdings im IE10 nicht mehr enthalten sind).

PS: IE-Workarounds sind auch bei Profis immer wieder notwendig (allerdings eher nicht bei einer einfachen Dropdown-Navigation).

**KlausGrenoble** · 31.08.2013, 13:44

Falls Du mit contao rumspielen willst, kopiere doch alles auf einen Gratis-Host (z.B. ServersFree). Geht doch blitzschnell, kostet nichts und ist Echtbetrieb.

**Berliner** · 03.09.2013, 18:42

Guten Abend liebe Forengemeinde,

ich hoffe, dass ich mit meinem Problem hier im richtigen Thread bin - habe leider nichts passenderes gefunden.

Derzeit bin ich mehr als blockiert, nachdem meine Navigation "plötzlich" im IE und ausschliesslich dort, nach links verschwindet (ausgeblendet ist) und bei einem "Mouse-Over" nach rechts springt.
Was die Ursache hierfür ist, kann ich nicht nachvollziehen, da ich nur inhaltliche Veränderungen getätigt habe.
Derzeit lasse ich nur die basic.css und die mobile.css laden - der Rest wird vom System erzeugt.

Im FF und Chrome ist die Navigation soweit in Ordnung - wird also soweit korrekt dargestellt. (Abgesehen davon, dass der "Wrapper" beim Wechseln der Seiten hin-und hersringt). Des Weiteren springt die Navi auch nach unten, wenn ich die Seite per Mobile aufrufe. Auch wenn ich die Seite per Windowsphone aufrufe (Aber "mobile" und natürlich responsiv ist ein anderes Thema

).

Ich verwende für die Arbeit im BE und für die FE-Vorschau IE 10- somit sollten diverse Mankos der vergangenen IE doch abgeschafft sein?

Hierzu folgende Fragen:

1. Macht sich das Abschalten des Caches direkt auf die FE-Vorschau bemerkbar ?
2. Laut Firebug würde ich in der nachfolgend aufgeführten CSS einfach die "main inside" genauer, mit Breite, definieren - Für den IE (im FF oder Chrome ist`s ja ok) oder habe ich hier einen Denkfehler?

Wer sich das anschauen möchte, hier ist die Webseite.

Hier nun die basic.css:

Code:

Name:  basic 
Änderungsdatum:  2013-09-03 19:11 
Medientypen:  all 

body {
    margin:0;
    padding:0;
    background:#dff0f2 url("/files/Heilsteine+Reiki/Hintergrund_blau.gif") center top repeat-y;
    font-family:Ubuntu,sans-serif,arial;
}

#wrapper {
    max-width:100%;
}

 Aussehen und Position des Header
#header {
    padding-top:5px;
    padding-bottom:5px;
    font-family:Ubuntu,sans-serif,arial;
}

linke Spalte (Navigation)
#left {
    margin-top:52px;
}

Hauptspalte
#main .inside {
    margin-bottom:20px;
}

a,
body,
div,
em,
input,
label,
legend,
li,
ol,
p,
select,
span,
strong,
td,
th,
textarea,
u,
ul {
    font:14px/1.5em Ubuntu,sans-serif,arial;
}

a,
body,
div,
input,
label,
li,
legend,
ol,
p,
select,
td,
th,
textarea,
u,
ul {
    font:14px Ubuntu,sans-serif,arial;
}

h1 {
    margin:10px 0 12px;
    padding:0;
    font-size:16px;
    font-weight:bold;
}

h2 {
    margin:0 0 6px;
    padding:0;
    font-size:14px;
    font-weight:bold;
}

a {
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    color:#4556a1;
}

 .mod_navigation {
    width:200px;
    z-index:999;
}

Aussehen der Navigation im Level 1
.mod_navigation a,
.mod_navigation li,
.mod_navigation span {
    font:14px/1.5em Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#055b80;
    text-transform:capitalize;
    text-indent:5px;
}

Aussehen der Navigation im Level 2
.mod_navigation .level_2 a,
.mod_navigation .level_2 li,
.mod_navigation .level_2 span {
    font:12px Ubuntu,sans-serif,arial;
    font-weight:normal;
    color:#000;
    text-transform:none;
    text-indent:10px;
}

Farbe des aktuellen Menüpunktes
.mod_navigation span.active {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    text-decoration:underline;
    color:#147e87;
}

Hover-Effekt im Menü - Farbänderung
.mod_navigation a:hover {
    font:14px Ubuntu,sans-serif,arial;
    font-weight:bold;
    color:#0e689c;
}

Artikel-Darstellung
.mod_article {
    width:650px;
    margin:0 0 25px;
    padding-right:0;
    padding-left:0;
}

img {
    vertical-align:middle;
    border:0px;
}

p,
pre,
form,
figure {
}

table {
    border-spacing:0;
}

:focus {
    outline:0;
}

Vielen Dank schon vorab für eure Mühen und einen Stubs in die richtige Richtung.

Beste Grüße, Berliner

**wulf** · 03.09.2013, 19:13

schalte im ie mal den kompatibilitätsmodus aus

**Berliner** · 03.09.2013, 19:32

Zitat von wulf

schalte im ie mal den kompatibilitätsmodus aus

Jepp, ohne sieht es so aus, im groben, wie gewünscht.
Das würde jedoch bedeuten, dass alles was < / = IE 10 ist, genau diese Fehldarstellung anzeigen würde?

Beste Grüße

**MacKP** · 04.09.2013, 08:05

Zitat von Berliner

Jepp, ohne sieht es so aus, im groben, wie gewünscht.
Das würde jedoch bedeuten, dass alles was < / = IE 10 ist, genau diese Fehldarstellung anzeigen würde?

Beste Grüße

Hallo Berliner,
nein das heißt es nicht. Der Kompatibilitätsmodus ist eine ganz eigene Krankheit von Microsoft um Webdisigner zu ärgern. Du wirs das nur feststellen können, indem du an echten Browsern guckst.

Viele Grüße

**Berliner** · 05.09.2013, 18:18

*lach* ja, deshalb schaue ich ja in unterschiedlichen Browsern nach.
Die Frage bezog sich eher auf Nutzer, die IE verwenden und auf die Seite kommen... Nicht jeder wird wissen, dass es den K-Modus gibt und wie er abgeschaltet wird..
Des Weiteren ist mir unklar, wie sich die Darstellung in der FE-Vorschau so schlagartig umstellen konnte - weder habe ich lokal Updates für den IE gefahren, noch im Contao selbst etwas umgestellt. ????

Beste Grüße

**MacKP** · 05.09.2013, 18:38

Der IE stellt sich eigentlich nicht von alleine in diesen Modus.
Eventuell ausversehen mal drauf geklickt?
Es gibt hier im Forum auch Methoden wie man diesen Modus angeblich ausschalten kann.. das geht aber irgendwie nur unter sehr genauen Microsoft Bedingungen wenn ich mich richtig erinner....

Viele Grüße

**Berliner** · 05.09.2013, 18:46

Zitat von MacKP

Der IE stellt sich eigentlich nicht von alleine in diesen Modus.
Eventuell ausversehen mal drauf geklickt?
Es gibt hier im Forum auch Methoden wie man diesen Modus angeblich ausschalten kann.. das geht aber irgendwie nur unter sehr genauen Microsoft Bedingungen wenn ich mich richtig erinner....

Viele Grüße

Super, ich danke dir erst mal für die Info, und werde mal versuchen, darüber mehr zu erfahren.

Also wäre in meinem Fall, wie Bas von erwähnt, "conditional comments" nicht angebracht?

Beste Grüße

**MacKP** · 08.09.2013, 11:08

Hallo Berliner,
die eignen sich nicht dafür Browser die im Kompatibilitätsmodus sind anders zu Handhaben. Siehe: http://de.wikipedia.org/wiki/Conditional_Comments

Viele Grüße

**Berliner** · 08.09.2013, 11:29

Zitat von MacKP

Hallo Berliner,
die eignen sich nicht dafür Browser die im Kompatibilitätsmodus sind anders zu Handhaben. Siehe: http://de.wikipedia.org/wiki/Conditional_Comments

Viele Grüße

Guten Morgen,

vielen Dank für die Info und den Link. Wieder was zum durcharbeiten

Beste Grüße