✔ IE 6 - Abstands & Navigationsprobleme

Philipp- · 22. September 2008

Hallo Community,

langsam nervt es mich dieser IE. Er macht ständig Probleme. Habe im Anhang ein Screenshot was er genau macht. Es betrifft folgende Seite:

http://reisewebkatalog24.de/

1. Die Navigations wird nicht voll dargestellt und sie ist zu weit rechts, so dass bei 4. die Sidebar keinen Platz mehr hat und nach unten rutscht.

2. Der Content hat oben sowie unten eine Lücke. An was liegt das und wie kann ich das am besten beheben?

3. Die Navigation hat rechts einen Abstand, an was liegt das und wie kann ich das beheben?

So nun die Codes für die Navigation sowie den Content.

Navigation:

HTML:

<div id="menu">
                <div id="menuRight">
                    <ul>
                        <li><a href="./new_links.php">Neue Reiselinks</a></li>
                        <li><a href="./add_link.php">Reiselink eintragen</a></li>
                        <li><a href="./edit_link.php">Eintrag &auml;ndern</a></li>
                        <li><a href="./search.php">Eintrag suchen</a></li>
                        <li><a href="./urlaubsbilder.php">Urlaub- und Reisetipps</a></li>
                        <li><a href="./contact.php">Kontakt</a></li>
                    </ul>
                </div>
            </div>

Code:

#menu {

	background:url(images/menuLeft.png) no-repeat;

	height:46px;

	width:auto;

	float:left;

	margin:17px 0 0 14px;

	}

	

#menuRight {

	background:url(images/menuRight.png) no-repeat;

	background-position:top right;

	height:46px;

	width:auto;

	}

	

#menu ul {

	margin:0 12px 0 12px;

	padding:0;

	}

	

#menu ul li {

	margin:0;

	padding:0;

	float:left;

	list-style:none;

	}

	

#menu ul li a {

	background:url(images/menuBg.png) repeat-x;

	height:33px;

	padding:13px 17px 0 17px;

	border-left:1px solid #a24d27;

	border-right:1px solid #b15f39;

	text-decoration:none;

	font-family:"Trebuchet Ms";

	font-size:12px;

	color:#fff8ef;

	display:block;

	}

	

#menu ul li a:hover {

	background:url(images/menuBgHover.png) repeat-x;	

	}

Content:

HTML:

<div class="contentBox">
                	<div class="contentTop">
                    	<div class="contentTopLeft">
                        	<div class="contentTopRight">
                            </div>
                        </div>
                    </div>
                    <div class="contentMiddle">
                      	<div class="contentMiddleRight" style="padding-right: 8px; padding-left:2px">
                        	{$content}                       
                        </div>
                    </div>
                    <div class="contentBottom">
                    	<div class="contentBottomLeft">
                        	<div class="contentBottomRight">
                            </div>
                        </div>
                    </div>                        
                </div>

Code:

.contentBox {

	width:100%;

	margin:18px 0 0 0;

	}

	

.contentTop {

	background:url(images/contentTop.png) repeat-x;

	height:7px;

	width:100%;

	}

	

.contentTopLeft {

	background:url(images/contentTopLeft.png) no-repeat;

	background-position:top left;

	height:7px;

	width:100%;

	}

	

.contentTopRight {

	background:url(images/contentTopRight.png) no-repeat;

	background-position:top right;

	height:7px;

	width:100%;

	}

	

.contentMiddle {

	background:#f9e39f;

	border-left:4px solid #fff8ef;

	width:100%-4px;

	}

	

.contentMiddleRight {

	width:100%-4px;

	background:url(images/contentMiddleRight.png) repeat-y;

	background-position:top right;

	/*height:200px; /* Auskommentieren wenn es los geht */*/

	padding-bottom: 15px !important;

	font-family:"Trebuchet Ms";

	font-size:12px;

	color:#6e5010;

	font-weight:normal;

	}

	

.contentMiddleRight a {

	font-weight:bold;

	color:#81320e;

	}

	

.contentBottom {

	background:url(images/contentBottom.png) repeat-x;

	height:10px;

	width:100%;

	}

	

.contentBottomLeft {

	background:url(images/contentBottomLeft.png) no-repeat;

	background-position:bottom left;

	height:10px;

	width:100%;

	}

	

.contentBottomRight {

	background:url(images/contentBottomRight.png) no-repeat;

	background-position:bottom right;

	height:10px;

	width:100%;

	}

Habs auch selber schon probiert und hab bisher in meiner IE 6 Fix CSS Datei folgendes:

Code:

#menu ul li a, #menu ul li a:hover {
	display:inline;
	width:auto;
	height:46px;
	padding-top:10px;
	}
	
#manu ul li {
	background:#ac532a;
	height:46px;
	}

Screenshot:

Link: Klick, und ab gehts zu dem Fehler Screenshot!

Ich hoff ihr könnt mir helfen. Wäre echt nett von euch.
Mit freundlichen Grüßen
Philipp

Maik · 22. September 2008

Hi!

Webmaster FAQ -> CSS IE6 rückt floatende Boxen zu weit ein - was tun?
Das Thema hatten wir hier doch schon einmal -> IE 6 Abstand Problem (Stichwort: "Header")
Steht wohl im Kontext zur ersten Frage...

mfg Maik

Philipp- · 22. September 2008

Dankeschön für deine rasche Antwort. Es funktioniert fast alles, außer die Unterste Ecke am Content rechts unten, und die Navigation will noch nicht ganz so. Entweder ich steh grad auf em Schlauch, oder ich check das grad gar nicht.

Maik · 22. September 2008

Muß ich mir später in Ruhe anschauen ...

Wo hast du eigentlich diese Regel ausgegraben, und vor allem, hast du ihren Nutzen mal in den Browsern überprüft?

Code:

.contentMiddleRight {
width:100%-4px;
...
}

Hat man dir in der Grundschule im Matheunterricht nicht beigebracht, dass man Äpfel von Birnen nicht subtrahieren kann? :suspekt:

mfg Maik

Philipp- · 22. September 2008

Maik hat gesagt.:
Wo hast du eigentlich diese Regel ausgegraben, und vor allem, hast du ihren Nutzen mal in den Browsern überprüft?

Code:

.contentMiddleRight { width:100%-4px; ... }

Hat man dir in der Grundschule im Matheunterricht nicht beigebracht, dass man Äpfel von Birnen nicht subtrahieren kann? :suspekt:

mfg Maik

Im FF t das, wie soll ich das sonst machen, wegen der 4px breiten Border wird der Content auch breiter wenn ich ihn auf 100 % setzte.

MfG
Philipp

Maik · 22. September 2008

PhilippBosshart hat gesagt.:
Im FF funktioniert das, wie soll ich das sonst machen, wegen der 4px breiten Border wird der Content auch breiter wenn ich ihn auf 100 % setzte.

Dann träum mal weiter, dass das bei dir im FF funktioniert :suspekt:

Ansonsten entferne einfach die width:100%-Deklaration, denn die ist bei einem Blockelement (ohne absolute Positionierung oder float-Deklaration) nicht erforderlich, da es diese Breite von Hause aus mitbringt, und dann der Rahmen, Innen- und/oder Außenanstand nicht zur Breite hinzuaddiert wird, wie es ansonsten im Boxmodell der Fall ist.

Doch wozu überhaupt dieser "invalide" Aufwand? In dem Regelblock kann ich nämlich überhaupt keine border-Deklaration entdecken.

Und vermeide hier bitte zukünftig den Chatausdruck "f-u-n-z-t" anstelle von "funktioniert", da dieser vom Forensystem herausgefiltert wird, und der nichtssagende Stümmel "t" übrig bleibt - Danke!

mfg Maik

Maik · 22. September 2008

Die Ergebnisse des CSS-Validators http://reisewebkatalog24.de/templates/standard/style.css (CSS level 2.1) sprechen da eigentlich eine ganz deutliche Sprache:

Entschuldigung! Es wurden die folgenden Fehler gefunden (10)

URI : http://reisewebkatalog24.de/templates/standard/style.css

994 #newsletterRight Ungültige Nummer : width Zu viele Werte oder die Werte werden nicht erkannt : 100% -10px
1068 .contentMiddle Ungültige Nummer : width Zu viele Werte oder die Werte werden nicht erkannt : 100% -4px
1076 .contentMiddleRight Ungültige Nummer : width Zu viele Werte oder die Werte werden nicht erkannt : 100% -4px
...
...
...

mfg Maik

Philipp- · 7. Oktober 2008

Hey,

so erstmal danke für deine Hilfe. Nur gibt es immernoch damit Probleme.
Die Navigation wird im IE 6 immernoch nicht richtig dargestellt, und ich check das echt nicht, warum das nicht so dargstellt wird, und wie ich das beheben kann. Das Gleiche gilt für das Ende vom Content auf der linken Seite, dort gibt es unten noch Rechts und Links noch Fehler.

Wäre dir echt unendlich dankbar falls du mir noch helfen kannst.

Mit freundlichen Grüßen
Philipp

Maik · 8. Oktober 2008

Hi,

bezüglich der Navigation nimm im Stylesheet style.css folgende Regeländerungen vor, damit die Box nur so breit dargestellt wird, wie es ihr Inhalt von ihr abverlangt, denn der IE6 verlängert sie bis zum rechten Fensterrand, womit das Hintergrundbild für den rechten Abschluß unter dem Menü am rechten Fensterrand verschwindet:

Code:

#menuRight {
        background:url(images/menuRight.png) no-repeat right top;
        height:46px;
        width:auto;
        float:left;
        }

#menu ul li {
        margin:0;
        padding:0;
        /*float:left;*/ /* auskommentiert */
        display:inline;
        list-style:none;
        }

#menu ul li a {
        background:url(images/menuBg.png) repeat-x;
        height:33px;
        padding:13px 17px 0 17px;
        border-left:1px solid #a24d27;
        border-right:1px solid #b15f39;
        text-decoration:none;
        font-family:"Trebuchet Ms";
        font-size:12px;
        color:#fff8ef;
        /*display:block;*/ /* auskommentiert */
        float:left;
        }

und tausch im Stylesheet ie6fix.css diese Regelblöcke:

Code:

#menu ul li a, #menu ul li a:hover {
        display:inline;
        height:46px;
        }

#menu ul li {
        background:#ac532a;
        height:46px;
        }

#menu ul li a {
        background:#ac532a;
        height:46px;
        margin-top:10px;
        }

#menu ul li a:hover {
        background:#be7353;
        height:46px;
        }

#menuRight, #menu { display:inline; }

gegen diesen hier aus:

Code:

#menu { display:inline; }

Die unteren Ecken im Content-Bereich muß ich im IE6 erstmal genauer unter die Lupe nehmen.

mfg Maik

Maik · 8. Oktober 2008

So, hier folgt dann "Teil 2" bzgl. der unteren "Rahmen-Ecken"

Im Markup wird die Reihenfolge der linken und rechten Ecke getauscht:

Code:

<div class="contentBottom">
     <div class="contentBottomRight">
          <div class="contentBottomLeft">
          </div>
     </div>
</div>

Im Stylesheet style.css werden für die folgenden Boxen ihre width:100%-Deklarationen entfernt, da sie diese Breite als Blockelemente von Hause aus mitbringen, sowie die vertikale Position der Hintergrundbilder für .contentBottomLeft und .contentBottomRight von bottom auf top umgestellt.

Achja, bei zwei Wertangaben für background-position steht der erste für die horizontale Position (left / right) und der zweite für die vertikale Position (top / bottom) des Hintergrundbildes.

Code:

.contentTop {
        background:url(images/contentTop.png) repeat-x;
        height:7px;
        /*width:100%;*/
        }

.contentTopLeft {
        background:url(images/contentTopLeft.png) no-repeat;
        background-position:left top;
        height:7px;
        /*width:100%;*/
        }

.contentTopRight {
        background:url(images/contentTopRight.png) no-repeat;
        background-position:right top;
        height:7px;
        /*width:100%;*/
        }

.contentMiddle {
        background:#f9e39f;
        border-left:4px solid #fff8ef;
        /*width:100%-4px;*/ /* invalide Methode! */
        }



.contentMiddleRight {
        /*width:100%-4px;*/ /* invalide Methode!  */
        background:url(images/contentMiddleRight.png) repeat-y;
        background-position:right top;
        /*height:200px;*/ /* Auskommentieren wenn es los geht */
        padding-bottom: 15px !important;
        font-family:"Trebuchet Ms";
        font-size:12px;
        color:#6e5010;
        font-weight:normal;
        }

.contentBottom {
        background:url(images/contentBottom.png) repeat-x;
        height:10px;
        /*width:100%;*/
        }

.contentBottomLeft {
        background:url(images/contentBottomLeft.png) no-repeat;
        background-position:left top;
        height:10px;
        /*width:100%;*/
        }

.contentBottomRight {
        background:url(images/contentBottomRight.png) no-repeat;
        background-position:right top;
        height:10px;
        /*width:100%;*/
        }

und im Stylesheet ie6fix.css werden diese Regelblöcke:

Code:

.contentBox, .contentTop, .contentMiddle,  .contentBottom {
	 overflow:hidden;
	 }
	 
.contentBottom {
	clear:both;
	}
	 
.contentBottomLeft {
	z-index:999;
	margin-top:1px;
	background-image:url(images/contentBottomLeft.png);
	height:10px;
	width:100%;
	}

durch diesen ersetzt:

Code:

.contentTop,
.contentTopLeft,
.contentTopRight,
.contentBottom,
.contentBottomLeft,
.contentBottomRight {
	overflow:hidden;
	}

mfg Maik

✔ IE 6 - Abstands & Navigationsprobleme

Philipp-

Maik

Philipp-

Maik

Philipp-

Maik

Maik

Philipp-

Maik

Maik

Neue Beiträge