Problem mit css darstellung nach seitengenerierung durch typo3

Ty · 23.05.2010, 16:49

Hallo Typo3 Gemeinde,

ich arbeite schon länger mit Typo3 und habe bisher uach jedes Problem mithilfe dieses und anderer Foren gelöst bekommen, aber jetzt steh cih vor einem Rätsel, vieleciht könnt ihr mir helfen.

Das Problem ist das ich ein Menü über CSS grafisch darstelle, also habe ich es in <div> container alles schön verpackt und per css angeordnet, soweit so gut funktioniert dfas ganze auch sehr gut, wenn cih mein template im IE8 bzw. mit Opera offline teste. Rollover funktionieren einwandfrei und alles ist wo es hin gehört.
Das ändert sich sobald cih das template einbaue. Unter Opera läuft es genauso wie offline, Rollovereffekte da und die boxen sind am richtigen Platz. Jedoch der IE8 verweigert mir den rollovereffekt bei den den links übergeordneten divs, ausserdem versetzt er mir mein letztes div mit text um die doppelte breite nach unten (geschätzt). um das ganze etwas greifbarer zu machen hier die Bilder, daten und Codeauszüge

So sollte das ganze aussehen und tut es offline auch im IE8.

So sieht das ganze dann hochgeladen und in Typo3 eingebunden aus. Ich denke man sieht schonmal den positionierungsfehler.

der offline code des ganzen schaut so aus, jetzt nur der auszug für das navimenü:

HTML-Code:

<div id="Navimenu">
   <div id="Navi_kopf">
          <div id="navi_kopf_text"><a href=http://www.vinuma.de>www.vinuma.de</a>
          </div>
   </div>
        <div id="navi_button_area">
// ab hier mapt dann Templavoila um die einzelnen buttons zu erzeugen untenstehend der Code der offline variante
            <div id="navi_knopf_1_na">
                <div id="navi_link_1_na"><a href=#>Link 1. Ordnung </a>
                </div>  
            </div>
            <div id="navi_knopf_1_ac">
                <div id="navi_link_1_ac"><a href=#>Link 1. Ordnung </a>
                </div>
            </div>
            <div id="navi_knopf_2_na">
                <div id="navi_link_2_na"><a href=#>Link 2. Ordnung </a>
                </div>
            </div>
            <div id="navi_knopf_2_ac">
                <div id="navi_link_2_ac"><a href=#>Link 2. Ordnung </a>
                </div>
            </div>
          </div>
//Ab hier ist dann der code wieder vom Template
          <div id="navi_fuss">
            <div id="navi_fuss_text"><a>Erleben. Beraten. (W)Einkaufen.</a>
            </div>
         </div>
      </div>

So sieht das ganze in meinem offline Template aus, ich habe die Stelle markiert wo dann Typo3 mit folgendem Code online das Menü erzeugt:

Typoscript-Code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
Typoscript-Code: - ERROR: Line 0: Object Name String, "Typoscript-Code:" contains invalid character ":". Must be alphanumeric or one of: "_-."
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:

# Menu cObject
lib.menu = HMENU
 # First level menu-object, textual
lib.menu.1 = TMENU
lib.menu.1 {
 # Normal state properties
 NO.allWrap = <div id="navi_knopf_1_na"><div id="navi_link_1_na"> | </div></div>
 # Aktiv status setzen 
 ACT = 1
 ACT.allWrap = <div id="navi_knopf_1_ac"><div id="navi_link_1_ac">|</div></div>
}
 # Second level menu-object, textual
lib.menu.2 = TMENU
lib.menu.2 {
 # Normal state properties
 NO.allWrap = <div id="navi_knopf_2_na"><div id="navi_link_2_na">|</div></div>
 # Enable active state and set properties: 
 ACT = 1
 ACT.allWrap = <div id="navi_knopf_2_ac"><div id="navi_link_2_ac">|</div></div>
 }

 
 


Erstellt dann Typo3 über den oben abgebildeten Code kommt es zu den Fehlern im IE8, das er den hovereffekt von id = "navi_knopf*" nicht macht und dann das letzte div im Fuss unten zu tief anordnet.

Zu guter letzte noch die CSS auszüge welche für das Menü benutzt werden:

Code:

#Navi_kopf 
{
 background-image: url(Grafik/Maintemplate/navikopf.jpg);
 background-repeat: no-repeat;
 float: left;
 height: 21px;
 width: 180px;
}
 
#navi_link_1_na {
 height: 20px;
 width: 161px;
 margin-top: 12px;
 margin-left: 3px;
 text-align: right;
}
 
#navi_link_1_ac {
 height: 22px;
 width: 161px;
 margin-top: 12px;
 margin-left: 3px;
 text-align: right;
}
 
#navi_link_2_na {
 height: 20px;
 width: 161px;
 margin-top: 12px;
 margin-left: 3px;
 text-align: right;
}
 
#navi_link_2_ac {
 height: 20px;
 width: 161px;
 margin-top: 12px;
 margin-left: 3px;
 text-align: right;
}
 
#navi_fuss {
 float: left;
 height: 31px;
 width: 180px;
 background-repeat: no-repeat;
 background-image: url(Grafik/Maintemplate/navi_fuss.jpg);
}
 
#Navimenu {
 width: 180px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
 display: inline;
}
 
#navi_kopf_text {
 float: left;
 height: 18px;
 width: 170px;
 text-align: center;
 margin-top: 2px;
}
 
#navi_kopf_text a {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 14px;
 font-style: normal;
 font-weight: bold;
 color: #999;
 text-decoration: none;
}
 
#navi_button_area {
 float: left;
}
 
#navi_knopf_1_na {
 background-image: url(Grafik/Maintemplate/navi_button_na.jpg);
 background-repeat: no-repeat;
 float: left;
 height: 41px;
 width: 180px;
}
 
#navi_knopf_1_na:hover {
 background-image: url(Grafik/Maintemplate/navi_button_ac.jpg);
 background-repeat: no-repeat;
}
 
#navi_knopf_1_ac {
 background-image: url(Grafik/Maintemplate/navi_button_ac.jpg);
 float: left;
 height: 41px;
 width: 180px;
}
 
#navi_knopf_2_na {
 background-image: url(Grafik/Maintemplate/navi_button_2_na.jpg);
 float: left;
 height: 41px;
 width: 180px;
}
 
#navi_knopf_2_na:hover {
 background-image: url(Grafik/Maintemplate/navi_button_2_ac.jpg);
 background-repeat: no-repeat;
}
 
#navi_knopf_2_ac {
 background-image: url(Grafik/Maintemplate/navi_button_2_ac.jpg);
 background-repeat: no-repeat;
 float: left;
 height: 41px;
 width: 180px;
}
 
#navi_link_1_na a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 color: #666;
 text-decoration: none;
}
 
#navi_link_1_na a:hover {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 font-variant: normal;
 color: #333;
 text-decoration: none;
}
 
#navi_link_1_ac a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 18px;
 font-style: normal;
 font-weight: bold;
 font-variant: normal;
 color: #333;
 text-decoration: underline;
}
 
#navi_link_2_na a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 color: #666;
 text-decoration: none;
}
 
#navi_link_2_na a:hover {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: bold;
 font-variant: normal;
 color: #333;
 text-decoration: none;
}
 
#navi_link_2_ac a {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 16px;
 font-style: normal;
 font-weight: bold;
 font-variant: normal;
 color: #333;
 text-decoration: underline;
}
 
#navi_fuss_text {
 width: 170px;
 float: left;
 height: 18px;
 text-align: center;
 margin-top: 3px;
}
 
#navi_fuss_text a {
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 font-size: 10px;
 font-weight: normal;
 font-style: normal;
 line-height: normal;
 color: #999;
}

Ich habe einige male gecheckt ob die Dateien auf meinem offline Rechner, sowie die auf dem Webspace übereinstimmen, was der Fall ist. Wie gesagt dieser Fehler tritt nur im IE auf unter Opera funktioniert offline wie auch online das menü wie es soll.

Das Template wird übrigens vie Templavoila erzeugt, könnte es damit zusammen hängen?
Ich habe leider keine Idee mehr an was es hängen könnte

So sorry für die Textwall aber das Problem ist schienbar sehr spezifisch, deswegen je mehr Infos umso besser.

Danke schonmal im voraus, Gruß
Ty

**etux** · 23.05.2010, 17:59

Viel besser wäre es gewesen, den Code zu posten, bei dem der Fehler auftritt. Auf das nötigste reduziert, aber komplett ( head-Bereich, DOCTYPE... ).
Es sind auch Bilder im Spiel.
Daher - Link zu Deiner TYPO3-Site posten.

Ty · 24.05.2010, 10:11

Au, das ich da selber nciht dran gedacht habe! Danke Etux es war der Doctype! Hatte vergessen den festzulegen im TS und so hat er den falschen genommen. Der IE is aber auch sowas von empfindlich was css angeht, das ist unglaublich!

Habe zwar immernoch die verrutschte schrift im unteren teil, die kommt aber eh weg, also ist das halb so schlimm.