Fehler bei Anzeige

[zsoerenm]

Hallo ich brauch mal wieder eure Hilfe

Bilder sagen mehr als Worte:

So sollte es aussehen (so siehts aus im IE 7):


So sieht es jedoch im Firefox und Opera aus:


Das mittelstück von der Box scheint irgendwie mit der oberen Navigation zusammenzuhängen...



Der Code ist valide und ich kann keine Zusammenhang erkennen...

Die Navigation ist so aufgebaut:

<ul id="navigation">
	<li><div id="nav_right"></div></li>
	<li><a href="?page=clanmatch">                   
        	Clan Matches                
	</a></li>
        <li><div class="nav_seperator"></div></li>
        <li><a href="?page=home">                   
        	Home                
	</a></li>
        <li><div id="nav_left"></div></li>
</ul>

#navigation {
text-align:right;
height:36px;
margin: 0;
}
#nav_left {
background: url(../images/mainnav/left_side.gif) no-repeat;
width: 17px;
height: 36px;
float:right;
}
.footer {
clear:both;
}
#navigation li {
list-style: none;
display: inline;
margin: 0;
padding: 0;
}
#navigation a {
background: url(../images/mainnav/repeater.gif) repeat-x;
width: 125px;
height: 36px;
display:block;
float:right;
}
#nav_right {
background: url(../images/mainnav/right_side.gif) no-repeat;
width: 17px;
height: 36px;
float:right;
}
#navigation a:hover {
background: url(../images/mainnav/repeater_hover.gif) repeat-x;
text-decoration:none;
}
.nav_seperator {
background: url(../images/mainnav/seperator.gif) no-repeat;
width: 3px;
height: 36px;
float:right;
}

(unwichtige Teile rausgenommen)

und hier der Header von der Box:

<div class="box">
	<div class="box_header_left"></div>
	<div class="box_header_right"></div>
	<div class="box_header_main">
		<div class="box_header"><? echo $this->name; ?></div>
		<div class="box_mushroom"></div>
	</div>
</div>

.box_header_left {
width:87px;
height:42px;
float: left;
background: url(../images/boxes/header_left.gif) no-repeat;
}
.box_header_right {
width:19px;
height:42px;
float: right;
background: url(../images/boxes/header_right.gif) no-repeat;
}
.box_header_main {
height:42px;
background: url(../images/boxes/header_repeater.gif) repeat-x;
}
.box_mushroom {
width:27px;
height:42px;
background: url(../images/boxes/mushroom.gif) no-repeat;
float:right;
}
.box_header {
font-weight:bold;
font-size:13px;
float:left;
margin: 12px 0 5px 1px;
}

Hier die Seite zum selber testen:
klick hier

Danke schon mal
Gruß Sören

[anna55]

Welche Sorte IE7 Du auch immer hast?? Meiner zeigt nicht die Version 1 sondern die 3 an. Ganz übel sieht es im IE6 aus.

[zsoerenm]

ja das weiß ich durchaus... um den IE 6 kümmer ich mich später, da ich momentan wegen Vista an IE 7 gebunden bin.

ja Bild 3 ist immer dann der Fall, wenn die Navigation kleiner ist als die Box darunter... wird die Navigation jedoch länger als die Box so ensteht sowas korioses wie in Bild 2.

Ohne Navigation sieht das ganze auch im Firefox und Opera in Ordnung aus...
Aber ich kann leider den Fehler nicht finden... Ich hab schon vieles versucht. Ich glaube es liegt daran, dass die "Buttons" in der Navigation gefloatet sind...
Ich hab schon versucht mit clear:both das zu ändern jedoch ohne Erfolg... liegt wahrscheinlich daran, dass ich nicht genau weiß wo der clear hingehört...

Ich wäre sehr dankbar wenn ihr mir weiterhelfen könntet...

Gruß Sören

[zsoerenm]

Bitte helft mir hier weiter... ich kann dieses Problem nicht lösen...

[anna55]

Ich bin überfordert, mich in Deinem Code zurechtzufinden und möglicherweise andere hier auch, was Du an den wenigen Antwortversuchen ggfs. sehen kannst. Da wimmelt es ja nur so von divs und auch floats sind zahlreich vorhanden.

Du hast sicher in Deinem Firefox auch die Erweiterung Web-Developer am Start und kannst mühelos einige Szenarien ausprobieren.

Ich habe mal etwas versucht, indem ich die Navi aus dem content-Bereich heraus direkt unter den div Banner genommen habe. Ob das in den anderen Browsern ein ähnliches Ergebnis bringt, musst Du testen. Die margin-bottom-Angabe kannst Du in Dein CSS nehmen, allerdings sind die 15px nötig, damit es klappt. Wie Du den Abstand verkürzt, musst Du ausprobieren.

Achtung: Ich habe im Code den div Banner und content mit drin, um deutlich zu machen, wo er einzusetzen ist. Also nicht doppelt stehen lassen.

<div id="banner">
            </div>
<ul id="navigation" style="margin-bottom:15px;">
        	<li><div id="nav_right">
            </div></li>
			                <li><a href="?page=clanmatch">                   
                    Forum                </a></li>
<li><a href="?page=clanmatch">                   
                    Death-Matches                </a></li>
<li><a href="?page=clanmatch">                   
                    Random Matches                  </a></li>
<li><a href="?page=clanmatch">                   
                    Clan Matches                </a></li>
                                    <li><div class="nav_seperator"></div></li>
                                    <li><a href="?page=home">                   
                    Home                </a></li>
                            <li><div id="nav_left">
            </div></li>
        </ul>

            <div id="content">
.....
.....

[ein schlauer]

Ich hab keinen Plan was das Problem ist, aber sowas:

<body>
    <div id="container">
        <div id="left_side">
        </div>
        <div id="right_side">

        </div>
        <div id="mainpage">
            <div id="banner">
            </div>
            <div id="content">
                        <ul id="navigation">
            <li><div id="nav_right">
            </div></li 

nennt sich DIV-Suppe und ist ein untrügliches Zeichen, dass das Layout völlig vermurkst ist. Damit ist es fast unmöglich irgendwelche Fehler zu finden.

[anna55]

Ich hab keinen Plan was das Problem ist, aber sowas:
...
nennt sich DIV-Suppe und ist ein untrügliches Zeichen, dass das Layout völlig vermurkst ist. Damit ist es fast unmöglich irgendwelche Fehler zu finden.

Ist nicht der erste Thread zu dem Thema. Die DIV-Suppe habe ich bereits hier vergeblich moniert.