Darstellungsproblem CSS Navigation im IE7

pcklinik · #1 (**permalink**) 07.09.2007, 17:29

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

<ul class="sub">
<li><a href="../ie/" >Standart</a></li>
<li><a href="../ie/" >Profi</a></li>
</ul>

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

pcklinik · #2 (**permalink**) 09.09.2007, 09:57

Hallo zusammen. Ist meine Frage wirklich so blöd? Wäre toll wenn jemand nen Tip für mich hätte. Danke

laborix · #3 (**permalink**) 09.09.2007, 11:21

Zitat:

Zitat von pcklinik

Hallo zusammen. Ist meine Frage wirklich so blöd?

Nö, aber nach dem Kopieren deines Code-Beispiels habe ich im FF, IE und Opera nur eine weiße leer Seite

Es wäre besser, wenn du diesen Testcase online stellen würdest, damit man wenigstens deine Images sehen könnte und somit besser einschätzen kann, was falsch läuft.

Code:

Das Copyright in diesem Stylesheet muss zu jederzeit unangetastet bleiben. Alle Rechte vorbehalten.

Und das hier ist nicht schön. Ein Copyright gibt es in Deutschland nicht, dort heißt es Urheberrecht.

pcklinik · #4 (**permalink**) 09.09.2007, 12:04

Danke für das erste Feedback. So - ich habe jetzt eine Onlineversion zum schauen eingerichtet.

Hier ist die Online Version

Bitte nicht wegen der Frames schimpfen - das will der Inhaber der Seite so haben. Vorgabe ist halt diese Navistruktur mit einem Waagerechten Untermenu sowie das das ganze ohne Java laufen muss.

Wie gesagt der Frame in dem die Navigation läuft ist 844 pixel breit. die Summer der Grafiken auch. Ich arbeite auf einem MAC dort wird die Navi im Firefox 2.xx sowie im Safari einwandfrei angezeigt. Auf meinen PCs im IE7 wird dir ganz rechte (rote) Grafik umgebrochen.

Hab schon einmal rumprobiert und festgestellt das sobald ich irgendwie 14 Pixel Breite bei irgendeiner Grafik einspare auch der IE7 die Navi einwandfrei anzeigt. Nur dann entsteht in den übrigen Browsern rechts so eine Art weisses Loch.

Wäre klasse wenn mir jemand helfen könnte - steige leider erst gerade in CSS etwas tiefer ein.

Gruss
Frank

laborix · #5 (**permalink**) 09.09.2007, 12:48

Zitat:

Zitat von pcklinik

Hab schon einmal rumprobiert und festgestellt das sobald ich irgendwie 14 Pixel Breite bei irgendeiner Grafik einspare auch der IE7 die Navi einwandfrei anzeigt. Nur dann entsteht in den übrigen Browsern rechts so eine Art weisses Loch.

Getestet bei 1024x768 mit:

- Opera 9
- IE 6/7
- Firefox 2
- Netscape 9
- Safari 3 beta Windows

Alle Browser zeigen das weiße Loch, wird eine Auflösung von ein paar Pixel kleiner ( 960x768 ) verwendet, bricht dein letzter Navigationspunkt ebenfalls um.

Somit behaupte ich mal, das ganze ist ein Problem mit der Breite und das die ganze Seite mit fixen Werten aufgebaut ist. Dein Problem liegt in den Breitenangaben.

Teste ich mit 1280x1024 sehe ich rechts sehr viel weiß. Auch hier ist die fixe Breite das Problem.

Empfehlung:
Gibt das fixe Positionieren auf und mache deine Seite flexibel aund Skalierbar

pcklinik · #6 (**permalink**) 09.09.2007, 13:22

Danke für das Feedback. Auf dauer wird die Seite für größere Auflösungen als 1024x768 noch zentriert.

Das mit den fixen Größenangaben der Gesamtseite ist Vorgabe -
daran kann ich nix ändern.

Was ich nicht verstehe - wenn ich mir die Seite auf meinem MAC im Firefox bei 1024x768 ansehen, sieht sie wie folgt aus und die Navi wird einwandfrei dargestellt.

Da gleiche im IE7 auf nem PC aber eben nicht. Da muss doch irgendwas im IE7 bezüglich des CSS-Navis anders interpretiert werden wenn das Navi umbricht - der Frame ist doch mit 844px exakt breit genug für die Navi.

Also warum reichen 844px in Firefos zum darstellen aus und im IE7 nicht?

Und genau danach suche ich schon fast 2 Tage - leider erfolglos

Jemand eine Idee? Oder hab ich da mit meinen rudimentären Kenntnissen ein Verständnisproblem?

Nachtrag:

Ich habe jetzt gerade noch einmal auf dem PC verglichen:

Firefox - wenn Fenster manuell auf Maxbreite aufgezogen ist habe ich den Umbruch auch - stelle ich aber oben auf Fenster maximieren - dann sieht es so aus wie auf dem MAC unter Firefox.

Beim IE7 kann ich es genauso versuchen - jedoch auch mit maximiertem Fenster habe ich dort den Umbruch

laborix · #7 (**permalink**) 09.09.2007, 14:01

Zitat:

Zitat von pcklinik

Das mit den fixen Größenangaben der Gesamtseite ist Vorgabe -
daran kann ich nix ändern.

Warum? Weil der Kunde sich im Webdesign auskennt und dir sagt, das die Breite des Frames genau 844 Pixel sein muss? Oder was machst du, wenn sich dein Kunde einen 17" TFT zulegt, der das beste Bild mit 1280x1024 bringt. Will er wirklich den weißen rechten Rand?

Zitat:

Zitat von pcklinik

Beim IE7 kann ich es genauso versuchen - jedoch auch mit maximiertem Fenster habe ich dort den Umbruch

Bei 1280x1024 nicht.

Und wenn man deine Seite mit WindowsXP 1024x768 und großem Font (120dpi) betrachtet, macht Firefox im Vollbild ( 1024x768 ) genau das gleiche wie der IE. Bei 1280x1024 passt es wieder. Abgesehen davon, das es bei mir alle Browser waren (WindowsXP mit normalen Font 96dpi und mit großem Font 120dpi bei 1024 Pixel).

pcklinik · #8 (**permalink**) 09.09.2007, 17:25

Also der weiße Hintergrund wird wohl noch durch einen Farbverlauf ersetzt der bei größeren Auflösungen dann den freiwerdenden Raum füllen soll. Die eigentliche Seite soll dann mittig stehen.

Was ich aber grundsätzlich verstehen möchte ist das unterschiedliche Verhalten der Navigation bei 1024x768 in FF und IE7

Kann mir das jemand erklären? Also warum reicht der Platz im Frame von 844px im FF und nicht im IE7 ??

Dafür muss es doch eine Erklärung geben!?!

Mag ja sein das ich da hartnäckig bin.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Problem mit Navigation	safari	CSS	12	20.04.2011 11:11
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Hilfe bei CSS Navigation	trimalchio	CSS	7	10.01.2011 13:13
Performance Problem im IE7 in Zusammenhang mit CSS	RouL	CSS	2	30.07.2007 11:36
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04