✔ IE Fehler bei Grafischer auflistung!

Status
Nicht offen für weitere Antworten.
cille

cille

Erfahrenes Mitglied
Hallo,
ich habe eben mal meine Navigation grafisch dargestellt.
Firefox und Opera zeigt alles richtig an,
ratet mal wer aus der Reihe Tanzt ;)
Der IE, Ihr habt richtig geraten (Hoffe ich mal).
So jetzt zum Problem,
er zieht die Liste außeinander (Vertikal).

Hier die HP:
FOLGE MIR

Links die Navigation ist falsch.
Habe schon einiges Probiert, aber keine Lösung gefunden.
Hier mal der Quellcode (Komplett, aber Navigation ist gekenntzeichnet):

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>homepage2007</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="umrandung">

<!-- NAVIGATION ANFANG -->

    <div class="navigation">
    	<div class="design10">
        	<ul>
            	<li><a href="index.php?site=team&id=management">Management</a></li>
                <li><a href="index.php?site=team&id=management">Teams</a></li>
                <li><a href="index.php?site=team&id=management">Results</a></li>
                <li><a href="index.php?site=team&id=management">Awards</a></li>
                <li><a href="index.php?site=team&id=management">Server</a></li>
            </ul>
        </div>
        <div class="design13"></div>
        <div class="design19">
        	<ul>
            	<li><a href="index.php?site=team&id=management">Management</a></li>
                <li><a href="index.php?site=team&id=management">Teams</a></li>
                <li><a href="index.php?site=team&id=management">Results</a></li>
                <li><a href="index.php?site=team&id=management">Awards</a></li>
                <li><a href="index.php?site=team&id=management">Server</a></li>
            </ul>
        </div>
        <div class="design22"></div>
        <div class="design23">
        	<ul>
            	<li><a href="index.php?site=team&id=management">Management</a></li>
                <li><a href="index.php?site=team&id=management">Teams</a></li>
                <li><a href="index.php?site=team&id=management">Results</a></li>
                <li><a href="index.php?site=team&id=management">Awards</a></li>
                <li><a href="index.php?site=team&id=management">Server</a></li>
            </ul>
        </div>
        <div class="design26"></div>
    </div>

<!-- NAVIGATION ENDE -->
	
	<div class="design01"></div>
	<div class="design02"></div>
	<div class="design03"></div>
	<div class="design04"></div>
	<div class="design05"></div>
	<div class="design06"></div>
	<div class="design07"></div>
	<div class="design08"></div>
	<div class="design09"></div>
	<div class="design11"></div>
	<div class="design12"></div>
	<div class="design14"></div>
	<div class="design15"></div>
	<div class="design16"></div>
	<div class="design17"></div>
	<div class="design18"></div>
	<div class="design20"></div>
	<div class="design21"></div>
	<div class="design24"></div>
	<div class="design27"></div>
	<div class="design28"></div>
	<div class="design29"></div>
	<div class="design30"></div>
	<div class="design31"></div>
	<div class="design32"></div>
	<div class="design33"></div>
</div>
</body>
</html>
style.css
HTML: 
body { background-color: #444444; margin: 0 0 0 0; }

/* Design */
.umrandung { position:absolute; left:50%; top:0px; width:1024px; margin-left: -512px; }
.design01 { position:absolute; left:0px; top:0px; width:1024px; height:157px; background-image: url(img/01.jpg); }
.design02 { position:absolute; left:0px; top:157px; width:434px; height:9px; background-image: url(img/02.jpg); }
.design03 { position:absolute; left:434px; top:157px; width:521px; height:78px; background-image: url(img/03.jpg); }
.design04 { position:absolute; left:955px; top:157px; width:69px; height:78px; background-image: url(img/04.jpg); }
.design05 { position:absolute; left:0px; top:166px; width:74px; height:60px; background-image: url(img/05.jpg); }
.design06 { position:absolute; left:74px; top:166px; width:347px; height:60px; background-image: url(img/06.jpg); }
.design07 { position:absolute; left:421px; top:166px; width:13px; height:60px; background-image: url(img/07.jpg); }
.design08 { position:absolute; left:0px; top:226px; width:434px; height:9px; background-image: url(img/08.jpg); }
.design09 { position:absolute; left:0px; top:235px; width:1024px; height:34px; background-image: url(img/09.jpg); }
.design11 { position:absolute; left:234px; top:269px; width:549px; height:31px; background-image: url(img/11.jpg); }
.design12 { position:absolute; left:783px; top:269px; width:241px; height:28px; background-image: url(img/12.jpg); }
.design14 { position:absolute; left:783px; top:297px; width:172px; height:107px; background-image: url(img/14.jpg); }
.design15 { position:absolute; left:955px; top:297px; width:69px; height:107px; background-image: url(img/15.jpg); }
.design16 { position:absolute; left:234px; top:300px; width:275px; height:24px; background-image: url(img/16.jpg); }
.design17 { position:absolute; left:509px; top:300px; width:274px; height:24px; background-image: url(img/17.jpg); }
.design18 { position:absolute; left:234px; top:324px; width:549px; height:28px; background-image: url(img/18.jpg); }
.design20 { position:absolute; left:234px; top:352px; width:549px; height:1px; background-image: url(img/20.jpg); }
.design21 { position:absolute; left:234px; top:353px; width:549px; height:415px; background-image: url(img/21.jpg); }
.design24 { position:absolute; left:783px; top:404px; width:241px; height:26px; background-image: url(img/24.jpg); }
.design27 { position:absolute; left:783px; top:430px; width:172px; height:79px; background-image: url(img/27.jpg); }
.design28 { position:absolute; left:955px; top:430px; width:69px; height:79px; background-image: url(img/28.jpg); }
.design29 { position:absolute; left:783px; top:509px; width:241px; height:26px; background-image: url(img/29.jpg); }
.design30 { position:absolute; left:783px; top:535px; width:172px; height:79px; background-image: url(img/30.jpg); }
.design31 { position:absolute; left:955px; top:535px; width:69px; height:79px; background-image: url(img/31.jpg); }
.design32 { position:absolute; left:783px; top:614px; width:241px; height:1px; background-image: url(img/32.jpg); }
.design33 { position:absolute; left:783px; top:615px; width:241px; height:153px; background-image: url(img/33.jpg); }

/* NAVIGATION NAVIGATION NAVIGATION NAVIGATION NAVIGATION NAVIGATION NAVIGATION */

/* Navigation */
.navigation { position:absolute; left:0px; top: 269px; width:234px; }
.design13 { width:234px; height:35px; background-image: url(img/13.jpg); margin:0px; padding:0px; }
.design22 { width:234px; height:34px; background-image: url(img/22.jpg); margin:0px; padding:0px; }
.design26 { width:234px; height:350px; background-image: url(img/26.jpg); margin:0px; padding:0px; }

/* Clan Navigation */
.design10 { width:234px; padding:0; margin: 0; display: block; }
.design10 ul { padding:0; margin: 0; width:234px; list-style-type:none; }
.design10 li { padding:0; margin: 0; widht:234px; height:27px; list-style-type:none; }
.design10 a	 { width:234px; height:27px; display:block; background-image:url(img/10.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
.design10 a:hover { width:234px; height:27px; display:block; background-image:url(img/roll_01.jpg); background-repeat: no-repeat;  padding-left:90px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

/* Features Navigation */
.design19 { width:234px; padding:0; margin: 0; display: block;}
.design19 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design19 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
.design19 a	 { width:234px; height:26px; display:block; background-image:url(img/19.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }
.design19 a:hover { width:234px; height:26px; display:block; background-image:url(img/roll_02.jpg); background-repeat: no-repeat;  padding-left:90px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }

/* Features Navigation */
.design23 { width:234px; padding:0; margin: 0; display: block;}
.design23 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design23 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
.design23 a	 { width:234px; height:26px; display:block; background-image:url(img/23.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }
.design23 a:hover { width:234px; height:26px; display:block; background-image:url(img/roll_03.jpg); background-repeat: no-repeat;  padding-left:90px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }

Vielleicht hillft euch der gesammte Quellcode zur Fehlerfindung,
Navigation ist Kommentiert und hoffe das reicht :).

Würde mich riesig auf Hilfe freuen.

Sonnige Grüße,
Marcel "cille" M.

PS: Habe IE6
 
Zuletzt bearbeitet:
Hi,

dir ist da wohl ein Rechenfehler in Bezug auf das Boxmodell unterlaufen, denn die DIVs .design10, .design19, .design23 und die jeweiligen Listenelemente besitzen eine Breite von 234px, den Links hast du aber zusätzlich zu den 234px noch einen linken Innenabstand von 90px gegönnt, womit sie nun 324px breit sind.

Mein Lösungsvorschlag, exemplarisch für die "Clan-Navigation":

Code: 
/* Clan Navigation */
.design10 { width:234px; padding:0; margin: 0; display: block; }
.design10 ul { padding:0; margin: 0; width:234px; list-style-type:none; }
.design10 li { padding:0; margin: 0; widht:234px; height:27px; list-style-type:none; }
.design10 a         { width:144px; height:22px; display:block; background-image:url(img/10.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
.design10 a:hover { width:144px; height:22px; display:block; background-image:url(img/roll_01.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
Nach dem "normalen" Stylesheet notierst du dann folgenden "Conditional Comment" für den IE:

Code: 
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style type="text/css">
.design10 li, .design19 li, .design23 li  { float:left; }
</style>
<![endif]-->
 
Hallo,
danke für die schnelle Antwort.
Bei .design10 (Clan Navigation) funktioniert dies.

Aber bei den anderen leider nicht,
habe auch die height verändert, geht auch nicht :(.

Hier der jetztige Quellcode von CSS Navigation:
HTML: 
/* Navigation */
.navigation { position:absolute; left:0px; top: 269px; width:234px; }
.design13 { width:234px; height:35px; background-image: url(img/13.jpg); margin:0px; padding:0px; }
.design22 { width:234px; height:34px; background-image: url(img/22.jpg); margin:0px; padding:0px; }
.design26 { width:234px; height:350px; background-image: url(img/26.jpg); margin:0px; padding:0px; }

/* Clan Navigation */
.design10 { width:234px; padding:0; margin: 0; display: block; }
.design10 ul { padding:0; margin: 0; width:234px; list-style-type:none; }
.design10 li { padding:0; margin: 0; widht:234px; height:27px; list-style-type:none; }
* html .design10 li { float:left; }
.design10 a         { width:144px; height:22px; display:block; background-image:url(img/10.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
.design10 a:hover { width:144px; height:22px; display:block; background-image:url(img/roll_01.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

/* Features Navigation */
.design19 { width:234px; padding:0; margin: 0; display: block;}
.design19 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design19 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
* html .design19 li { float:left; }
.design19 a	 { width:144px; height:22px; display:block; background-image:url(img/19.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.design19 a:hover { width:144px; height:22px; display:block; background-image:url(img/roll_02.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

/* Features Navigation */
.design23 { width:234px; padding:0; margin: 0; display: block;}
.design23 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design23 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
* html .design23 li { float:left; }
.design23 a	 { width:144px; height:22px; display:block; background-image:url(img/23.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }
.design23 a:hover { width:144px; height:22px; display:block; background-image:url(img/roll_03.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

Habe ich da etwas übersehen?

Sonnige Grüße,
Marcel "cille" M.

PS: komme da irgendwie nicht hinter ^^.
 
Zuletzt bearbeitet:
Versuch es mal hiermit:

Code: 
/* Clan Navigation */
.design10 { width:234px; padding:0; margin: 0; display: block; }
.design10 ul { padding:0; margin: 0; width:234px; list-style-type:none; }
.design10 li { padding:0; margin: 0; widht:234px; height:27px; list-style-type:none; }
.design10 a         { width:144px; height:22px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/10.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px;}
.design10 a:hover { width:144px; height:22px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/roll_01.jpg); background-repeat: no-repeat;  padding-left:90px;  padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; }

/* Features Navigation */
.design19 { width:234px; padding:0; margin: 0; display: block;}
.design19 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design19 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
.design19 a         { width:144px; height:21px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/19.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }
.design19 a:hover { width:144px; height:21px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/roll_02.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }

/* Features Navigation */
.design23 { width:234px; padding:0; margin: 0; display: block;}
.design23 ul { margin:0; padding:0; width:234px; list-style-type:none; }
.design23 li { margin:0; padding:0; widht:234px; height:26px; list-style-type:none; }
.design23 a         { width:144px; height:21px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/23.jpg); background-repeat: no-repeat; padding-left:90px; padding-top: 5px; text-decoration:none; color: #666666; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }
.design23 a:hover { width:144px; height:21px; display:block; background-image:url(http://www.p-gaming.eu/neu/img/roll_03.jpg); background-repeat: no-repeat;  padding-left:90px; padding-top:5px; text-decoration:none; color: #FFFFFF; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; margin:0; }
 
Danke es Funktioniert,
aber könntest Du mir Erklären wie Du der Fehlersuche angegangen bist?

Danke vielmals :)
 
Du hattest dich wohl in der Höhenangabe für die Links in .design19 und .design23 vertan. ;-)

Zudem hab ich den "* html-Hack" entfernt, da dieser im IE7 nicht greift, deshalb auch der "Conditional Comment".
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück