CSS Navigation - Problem mit IE6

pcklinik · #1 (**permalink**) 16.09.2007, 12:46

Hallo,

habe mich inzwischen mit meiner CSS Navigation zu ziemlich durchgewurschtelt.

Das Ergebnis ist unter

Blowtherm Lackieranlagen
zu sehen.

Die Navigation funktioniert soweit wie sie soll, ich habe nur 2 Probleme.

1. Das Untermenue bei PKW Lackieranlagen wird in Firefox und IE7 einwandfrei dargestellt. IM IE6 jedoch wird der Untermenuepunkt Profi von LKW Lackieranlagen verdeckt.

Kann mir jemand sagen wie ich das korrigiere??

2. Das Menue hat links und rechts jeweils eine Abschlussgrafik. Links ist alles ok, bei der rechte (roten) Grafik wird diese etwas nach unten verschoben dargestellt. Irgenwie hab ich bisher nicht rausfinden können worab das liegt. Das ist dann auch Browserunabhängig.

Bin für jeden Tip, den ich als CSS Einsteiger umsetzten kann dankbar.

Gruß
Frank

Monchichi · #2 (**permalink**) 16.09.2007, 16:06

Erst einmal brauchen die User hier den Quellcode, um einen Fehler zu korrigieren...

Ist dein css code oder dein html code denn valide? schonmal durch die validatoren gejagt?

pcklinik · #3 (**permalink**) 16.09.2007, 17:54

Hier der Quellcode für die Navigation - Zu deiner Frage - Ja ist valide.

Hier der Code

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<base target="main">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> BlowtermPC-KLinik Limburg 2007</title>
<style type="text/css">


#multi-level {height:42px; position:relative; z-index:100;}
#multi-level .pad {float:left;}
/* #multi-level .pad2 {float:right;} hatte ich mal getest um zu sehen wie die rote Grafik reagiert */

/* Das Menue Styling */
/* Entfernen der paddings, margins and bullets aus der Liste */
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:verdana, arial, sans-serif;}

/* Set up der Top-Level Listenteile und float nach links um diese inline zu plazieren */
.menu li.top {display:block; float:left; position:relative; }

/* Style and Positionierung der Tabelleso das diese in der Menuefunktion keine Rolle merh spielt. Die Font-Groesse ist fuer den IE5.5 notwendig */
.menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Standlayout der Top links */
.menu li.top a.top_link {display:block; float:left; height:42px; }
.menu li.top a span {position:absolute; left:-9999px; top:0; z-index:0; font-size:10px;} /* schiebt den link text aus dem bildschirm */

/* Pre-Loaden der Hover-Grafiken in die Listen */
.menu li.p1 {width:114px; background:url(images/start.jpg) no-repeat;}
.menu li.p2 {width:114px; background:url(images/pkw-lackieranlage.jpg) no-repeat;}
.menu li.p3 {width:114px; background:url(images/lkw-lackieranlage.jpg) no-repeat;}
.menu li.p4 {width:114px; background:url(images/industrielackieranlage.jpg) no-repeat;}
.menu li.p5 {width:114px; background:url(images/vorbereitung.jpg) no-repeat;}
.menu li.p6 {width:114px; background:url(images/farbmisch.jpg) no-repeat;}
.menu li.p7 {width:114px; background:url(images/service.jpg) no-repeat;}


/* SetUp der unhovered Grafiken in den Links */
.menu li a#start {width:114px; background:url(images/start-over.jpg) no-repeat;}
.menu li a#pkwlackierkabine {width:114px; background:url(images/pkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#lkwlackierkabine {width:114px; background:url(images/lkw-lackieranlage-over.jpg) no-repeat;}
.menu li a#industrielackierkabine {width:114px; background:url(images/industrielackieranlage-over.jpg) no-repeat;}
.menu li a#vorbereitung {width:114px; background:url(images/vorbereitung-over.jpg) no-repeat;}
.menu li a#farbmisch {width:114px; background:url(images/farbmisch-over.jpg) no-repeat;}
.menu li a#services {width:114px; background:url(images/service-over.jpg) no-repeat;}

/* Styling der Liste oder Link Hover. Abhängig vom verwendeten Browser - besondere Behandlung für die Varianten des Internet Explorers */
.menu a:hover {visibility:visible;} /* fuer IE6 */
.menu li:hover {position:relative; z-index:200;} /* fuer IE7 */

/* Links transparent machen bei Hover- so das die HoverGrafiken in den Listen durchscheinen (fuer sogenannten No-Flicker-Effect) */
.menu li a#start:hover, .menu li:hover a#home,
.menu li a#pkwlackierkabine:hover, .menu li:hover a#pkwlackierkabine,
.menu li a#lkwlackierkabine:hover, .menu li:hover a#lkwlackierkabine,
.menu li a#industrielackierkabine:hover, .menu li:hover a#industrielackierkabine,
.menu li a#vorbereitung:hover, .menu li:hover a#vorbereitung,
.menu li a#farbmisch:hover, .menu li:hover a#farbmisch,
.menu li a#services:hover, .menu li:hover a#farbmisch {background:transparent;}

/* Naechste Menuebenen (in diesem Menue werden nur 2 Ebenen benutzt, es sind jeodch weitere moeglich)
werden unsichtbar gemacht indem sie mit left:-9999px; top:-9999px; aus dem Bildschirm geschoben wird. */

.menu ul,
.menu :hover ul ul,
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}


/* Einstellungen fuer das erste Dropdown Sublevel level mit dem Einbinden der Hintergrundgrafiken für Normale und Hoover-Status
Beschriftung nicht in der Grafik sondern als Text eingesetzt - Schriftart - ist ganz oben definiert - hier Verdana als erste ausgewaehlt*/

.menu :hover ul.sub {left:0; top:29px; background:url(images/submenue-over.jpg) no-repeat; white-space:nowrap; width:190px; height:auto;}
.menu :hover ul.sub li {display:block; height:20px; position:relative; float:left; width:94px;}
.menu :hover ul.sub li a {background:url(images/submenue-over.jpg) no-repeat;display:block; font-weight: bold; font-size:10px; height:20px; width:94px; line-height:20px; text-align: center; color:#000; text-decoration:none; border:1px solid #fff; border-width:0 0 0 1px;}
.menu :hover ul.sub li a.fly {background:url(images/submenue-over.jpg) no-repeat;}
.menu :hover ul.sub li a:hover { background:url(images/submenue.jpg) no-repeat; color:#000000;}
.menu :hover ul.sub li a.fly:hover {background:url(images/submenue-over.jpg) no-repeat; color:#fff;}
.menu :hover ul li:hover > a.fly {background:url(images/submenue-over.jpg) no-repeat; color:#fff;}

/* Set-Up der entsprechende Fly-Out Level bei Hover */
.menu :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul,
.menu :hover ul :hover ul :hover ul :hover ul :hover ul
{left:90px; top:-4px; padding:3px 0; border:1px solid #888; white-space:nowrap; width:94px; z-index:200; height:auto; z-index:300;}


</style>
</head>

<body bgcolor="black" leftmargin="0"topmargin="0">
<div id="multi-level" >
<img class="pad" src="images/quermenue-button-1.jpg" title="" alt=""/>
<ul class="menu">
<li class="top p1"><a href="frau1.html" id="start" class="top_link"><span>Home</span></a></li>
<li class="top p2"><a href="pkw.html" id="pkwlackierkabine" class="top_link"><span>pkwlackierkabine</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="pkw-standard.html" >Standart</a></li>
<li><a href="pkw-profi.html" >Profi</a></li>
</ul>
<!--[if IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p3"><a href="lkw.html" id="lkwlackierkabine" class="top_link"><span>lkwlackierkabine</span></a></li>
<li class="top p4"><a href="industrie.html" id="industrielackierkabine" class="top_link"><span>industrielackierkabine</span></a></li>
<li class="top p5"><a href="vorbereitung.html" id="vorbereitung" class="top_link"><span>vorbereitung</span></a></li>
<li class="top p6"><a href="farbmisch.html" id="farbmisch" class="top_link"><span>farbmisch</span></a></li>
<li class="top p7"><a href="service.html" id="services" class="top_link"><span>services</span></a></li>
</ul>
<img class="pad" src="images/quermenue-button-8.jpg" title="" alt=""/>
<img class="pad" src="images/balkenorange-u-menue.jpg" title="" alt=""/>

</div>
</body>
</html>

Wäre toll wenn mir jemand helfen könnte

Monchichi · #4 (**permalink**) 16.09.2007, 17:57

Bitte Quellcode immer in dem dafür vorhgesehenden Tag einschließen...

Sonst wir dir hier sicher keiner helfen... Zu meiner Person, ich schaue mal, ob ich etwas finden kann... Mache dir aber nicht alzu große Hoffnung, denn ich bin auch kein Profi im Umgang mit css!

Edit:
Zur Übersicht deiner eigenen Seiten kann ich dir nur dringenst empfehlen deinen css code auszulagern... Stecke den code in css Dateien und importiere diese...

pcklinik · #5 (**permalink**) 18.09.2007, 12:04

Hat niemand eine Idee wo das Problem liegt??

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS Gallery Problem (IE6)	playaz	CSS	1	14.09.2009 14:11
IE6 Problem mit CSS Menü	träumer	CSS	2	15.01.2007 16:55
CSS Problem mit IE6	breker01	CSS	9	18.12.2006 18:42
CSS und IE6 Problem	nacho	CSS	8	15.12.2006 09:47
CSS Problem mit IE6 und IE7, finde Fehler nicht.	tzepf	CSS	2	05.12.2006 21:41