MSIE 8 Darstellungsproblem Navigation

[kim]

Hallo zusammen,
bei meinem aktuellen Project wird mir die Hauptnavigation im MSIE 8 falsch dargestellt.
Das Background Image wird 2x übereinander dargestellt und der Hover Effect verschiebt den Navigationstext.
HTML:

	  
<div id="navigation">  
        <ul class="group" id="mainnav">  
            <li class="current_page_item"><a>Über uns</a></li>  
            <li><a href="service.html">Unser Service</a></li>  
            <li><a href="referenzen.html">Referenzen</a></li>  
            <li><a href="kontakt.html">Kontakt</a></li>  
            <li><a href="aktuelles.html">Aktuelles</a></li>  
            <li><a href="agb.html">AGB</a></li>  
        </ul>  
</div>

CSS:

  
#navigation {clear: both; width: 810px; height: 32px;  
background: #111 url(../images/nav.jpg) no-repeat;  
-moz-border-radius: 8px; -webkit-border-radius: 8px;  
  
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }  
*:first-child+html .group { zoom: 1; } /* IE7 */  
  
  
#mainnav { padding: 3px 0px 4px 27px;list-style: none; position: relative; width: 750px; }  
#mainnav li { display: inline; }  
#mainnav li a { position: relative; z-index: 200; color: #fff; font-size: 13px; display: block; float: left; padding: 6px 19px 4px 19px; text-decoration: none; text-transform: none; }  
#mainnav li a:hover { color: #fff; }  
#mainnav #mainnav_line { position: absolute; top: 5; left: 0; width: 100px; background: #68af21; z-index: 100; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; }  
  
.current_page_item a { color: white !important; }  
}  

Ich hoffe ihr könnt mir helfen.
.vg

[ChrisB]

Hi,

bei meinem aktuellen Project wird mir die Hauptnavigation im MSIE 8 falsch dargestellt.

Handelt es sich um die Adresse, die du im URL-Feld angegeben hast?

Wenn ja - Fehler beseitigen, dann weiter sehen.

MfG ChrisB

[kim]

Handelt es sich um die Adresse, die du im URL-Feld angegeben hast?

Wenn ja - Fehler beseitigen, dann weiter sehen.

Okay, die Index Seite ist nun Valide und die doppelte Navigationleiste ist damit schon erschlagen wurden.

Jetzt habe ich nur noch das Problem das der Hover Effekt den Navigations Text verdrängt.

Ich werde diesen Code mal extra für den IE 8 einbinden, vielleicht ist das Problem damit ja schon erledigt.

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }  
*:first-child+html .group { zoom: 1; } /* IE7 */

[kim]

Ich werde diesen Code mal extra für den IE 8 einbinden, vielleicht ist das Problem damit ja schon erledigt.

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

:first-child+html .group { zoom: 1; } / IE7 */

>   
  
Ich habe, über additional Comments, einen extra Stylesheet für den MSIE 8 eingebunden, leider das CSS nichts bewirkt und der Hover Effekt verschiebt immernoch den Text.  
  
IE 8 CSS:  
~~~css
  
.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }  
:first-child+html .group { zoom: 1; 

Woran kann es noch liegen?
.vg

[ChrisB]

Hi,

Ich habe, über additional Comments, einen extra Stylesheet für den MSIE 8 eingebunden,

Die heißen Conditional Comments, und aus Performance-Gründen sollte man sie nicht nutzen, sondern lieber CSS-Hacks verwenden.

leider das CSS nichts bewirkt

Was hast du dir denn davon für eine Wirkung versprochen; was hat dich veranlasst anzunehmen, dass ausgerechnet diese Formatierungen das Problem im IE 8 lösen würden?

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Die heißen Conditional Comments, und aus Performance-Gründen sollte man sie nicht nutzen

Ich würde eher Wartbarkeitsgründe anführen.

Oder meintest du die Performanz des Entwicklers bei Fehlersuche und späteren Code-Änderungen? ;-)

Qapla'

[ChrisB]

Hi,

Die heißen Conditional Comments, und aus Performance-Gründen sollte man sie nicht nutzen

Ich würde eher Wartbarkeitsgründe anführen.

Oder meintest du die Performanz des Entwicklers bei Fehlersuche und späteren Code-Änderungen? ;-)

Nein, die Seiten-Lade-Performance - CCs blockieren das Laden weiterer externer Ressourcen.

MfG ChrisB

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Nein, die Seiten-Lade-Performance - CCs blockieren das Laden weiterer externer Ressourcen.

Ah ja, da war ja was. Ich erinnere mich dunkel. Auch, dass man dies irgendwie beheben kann.

Da ich für CCs aber kaum Verwendung habe, haben es die irrelevanten Details nicht bis ins Langzeitgedächtnis geschafft.

Qapla'

[Gunnar Bittersmann]

@@kim:

nuqneH

<li class="current_page_item"><a>Über uns</a></li>

BTW, die Klasse "current_page_item" brauchst du nicht. Du kannst Regeln für '#mainnav li a' und '#mainnav li a[href]' angeben.

Wobei die Frage gestattet sei, wozu du das 'a'-Element brauchst. Du kannst '#mainnav li' so formatieren, wie der Menüpunkt der aktuellen Seite aussehen soll und '#mainnav li a' so, wie die Menüpunkte der anderen Seiten aussehen sollen.

Qapla'

[MudGuard]

Hi,

#navigation {clear: both; width: 810px; height: 32px;
background: #111 url(../images/nav.jpg) no-repeat;
-moz-border-radius: 8px; -webkit-border-radius: 8px;

Hier fehlt was.

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.current_page_item a { color: white !important; }
}

was hier zu viel ist.

cu,
Andreas