Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 07.09.2007, 17:29
pcklinik pcklinik ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Frage Gelöst - Darstellungsproblem CSS Navigation im IE7

Hallo, ich bin CSS Einsteiger und baue gerade mein erstes CSS Menue.
Das ganze basiert auf einer Navi von Stu NicholsJeweills links und rechts sind zwei pics - dazwischen die 6 Buttons als Hintegrundbilder realisiert. Alle 8 Pics sind zusammen 844px breit (2x23px und 6x 114px)

Die Navigation ist in einem 844px breiten Frame eingebettet. Es läuft im Firefox einwandfrei nur im IE7 wird mir das letze pic umgebrochen. Hab schon mal durch austesten festgestellt das dem IE irgendwie 14px fehlen um es einwandfrei darzustellen.

Habe hier schon gesucht und gelesen - komme aber nicht wirklich weiter. Kann mir jemand helfen?

Hier nachfolgend der Code - habs leider noch nirgendwo online


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> BlowtermPC-KLinik Limburg 2007</title>
<style type="text/css">

/* ================================================== ==============

PC-Klinik Limburg 2007 - inspired by Stu Nicholls | CSSplay | A Professional drop-down menu
Das Copyright in diesem Stylesheet muss zu jederzeit unangetastet bleiben. Alle Rechte vorbehalten.
Dieses Stylesheet und dazugehörige (x)html dürfen für persönliche Zwecke modifiziert werden.
================================================== ================= */

#multi-level {height:42px; position:relative; z-index:100; }
#multi-level .pad {float:left;}

/* 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>


<div id="multi-level" >
<img class="pad" src="http://xhtmlforum.de/images/quermenue-button-1.jpg" title="" alt="" />
<ul class="menu">
<li class="top p1"><a href="http://www.cssplay.co.uk" id="start" class="top_link"><span>Home</span></a></li>
<li class="top p2"><a href="http://www.cssplay.co.uk" id="pkwlackierkabine" class="top_link"><span>pkwlackierkabine</span><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="sub">
<li><a href="../ie/" >Standart</a></li>
<li><a href="../ie/" >Profi</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li class="top p3"><a href="http://www.cssplay.co.uk" id="lkwlackierkabine" class="top_link"><span>lkwlackierkabine</span></a></li>
<li class="top p4"><a href="http://www.cssplay.co.uk" id="industrielackierkabine" class="top_link"><span>industrielackierkabine</span></a></li>
<li class="top p5"><a href="http://www.cssplay.co.uk" id="vorbereitung" class="top_link"><span>vorbereitung</span></a></li>
<li class="top p6"><a href="http://www.cssplay.co.uk" id="farbmisch" class="top_link"><span>farbmisch</span></a></li>
<li class="top p7"><a href="http://www.cssplay.co.uk" id="services" class="top_link"><span>services</span></a></li>

</ul>
<img class="pad" src="http://xhtmlforum.de/images/quermenue-button-8.jpg" title="" alt="" />
</div>
</body>
</html>


Wäre toll wenn mir jemand nen Tip geben könnte

Danke
Frank Hamm

Geändert von pcklinik (10.09.2007 um 12:37 Uhr) Grund: Problem gelöst
Mit Zitat antworten
Sponsored Links