zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellungsproblem CSS Navigation im IE7

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.09.2007, 17:29
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
  #2 (permalink)  
Alt 09.09.2007, 09:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Standard

Hallo zusammen. Ist meine Frage wirklich so blöd? Wäre toll wenn jemand nen Tip für mich hätte. Danke
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 09.09.2007, 11:21
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.497
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von pcklinik Beitrag anzeigen
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.
__________________
Personal stuff

Geändert von laborix (09.09.2007 um 11:24 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 09.09.2007, 12:04
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 09.09.2007, 12:48
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.497
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von pcklinik Beitrag anzeigen
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
__________________
Personal stuff
Mit Zitat antworten
  #6 (permalink)  
Alt 09.09.2007, 13:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von pcklinik (09.09.2007 um 13:34 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 09.09.2007, 14:01
Benutzerbild von laborix
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.12.2005
Beiträge: 1.497
laborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Menschlaborix ist ein sehr geschätzer Mensch
Standard

Zitat:
Zitat von pcklinik Beitrag anzeigen
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 Beitrag anzeigen
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).
__________________
Personal stuff
Mit Zitat antworten
  #8 (permalink)  
Alt 09.09.2007, 17:25
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 06.09.2007
Beiträge: 9
pcklinik befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:26 Uhr.