• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Probleme mit DIV beim IE

S

scoobdoop

Neues Mitglied
Leider habe ich beim Darstellen ein Problem mit dem IE. Ich habe sozusagen 3 Blöcke (Navigation=links, Hauptteil=mitte und einen Navigationsblock= rechts)

Leider klebt der rechte Block #nav_right irgendwie rechts fest. Den linken kann ich positionieren, Der rechte macht aber nicht was er soll.

Natürlich hab ich da noch mehr aber ich hab jetzt mal alles auf das Problem hin reduziert.

Im FireFox funktioniert alles einwandfrei.
Zu sehen bei Living-Luebeck

Code: 
* { margin: 0px; padding: 0px; }
#body { text-align: left; width: 980px;}
#page_container { width: 980px; overflow: hidden; margin: 0; }
#page_inner_container { clear: both; text-align: left; padding: 0; float: left; margin: 0; }
#innerBox { border: 1px solid #333333; text-align: center; overflow: hidden; float: left; clear: both; padding-right: 1px; margin: 0; position: relative; }
#head_container { position: absolute; top: 0; width: 980px; overflow: hidden; }
#outerContainer { border-left: 198px solid #FF0033; border-right: 200px solid #FF0033; z-index: 1; margin-top: 180px; width:572px; }
.mainbody { width: 540px;  margin: 0 5px 0 5px;}
.clr { clear: both; float: none; }
#content { text-align: left; padding: 0 5px 0 12px; margin: 0 0 0 0; overflow: hidden; }
#innerContainer { border-width: 0 1px; margin: 0; width: 100%; z-index: 2; background: #fff000; }
#nav_left { float: left; width: 184px; position: relative; z-index: 5; }
#middle { margin: 0; width: 100%; }
#nav_right { float: right; width: 180px; position: relative; z-index: 5; } 
#wrap { float: left; margin: 0; width: 100%; text-align: left; }

Code: 
config_load file="$language/lang_$language.conf" section="index"}
<div align="center">
 <div id="page_container">
  <div id="page_inner_container">
   <div id="innerBox">
    <div id="outerContainer">
     <div id="innerContainer">
      <div id="wrap">
       <div id="middle">
        <!-- Hauptteil -->
        <div class="mainbody">
         {$main_content}
        </div>
        <!-- Ende Hauptteil  -->
       </div>
       <!-- Linke Spalte -->
       <div id="nav_left">
        {$box_CATEGORIES}
        {$box_ADD_QUICKIE}
        {$box_CONTENT}
        {$box_INFORMATION}
        {$box_LAST_VIEWED}
        {$box_REVIEWS}
        {$box_SPECIALS}
        {$box_WHATSNEW}
       </div>
       <!-- Ende  -->
      </div>
          <!-- Rechte Spalte -->
      <div id="nav_right">
       {$box_CART}
       {$box_LOGIN}
       {$box_ADMIN}
       {$box_NEWSLETTER}
       {$box_BESTSELLERS}
       {$box_INFOBOX}
       {$box_CURRENCIES}
       {$box_LANGUAGES}
       {$box_MANUFACTURERS_INFO}
      </div>
      <!-- Ende Rechte Spalte -->
      <div class="clr"></div>
     </div>
      <div class="clr"></div>
    </div>
    <!-- Logo + Navigation -->
     <div id="head_container">
      <!-- Headergrafik -->
      <div id="head" align="center">
                         <div id="head_logo">
                            </div>
       <div id="reiternav">
        <div class="mini_wrapper">
         <div id="reiter_inner">
         </div>
        </div>
       </div>
      </div>
      <!-- Ende Headergrafik -->
      <!-- Navigation -->
       <div id="navigation">
        <div id="headsearch">
          </div>
        </div>
      <div id="breadcrump">
                        </div>
                        <!-- Ende Navigation -->
     </div>
    <!-- Ende Logo + Navigation -->
   </div>
  </div>
 </div>
</div>
<!-- Fussteil -->
<br />
 {if $BANNER}
  <div id="banner" align="center">
   {$BANNER}
  </div>
 {/if}
<!-- Ende Fussteil -->

Vielleicht kann mir ja einer helfen :)
Schon mal Danke
 
OMG!
Bist Du Hobby-Koch? Das ist ja eine total unübersichtliche div-Suppe, steigst Du da selbst noch durch? Teilweise stecken da mehrere, gleich große divs ineinander, dann wird - um ein Element zu zentrieren - noch ein weiteres Element drumrum gelegt, anstatt das eigentliche Element zu zentrieren.

Von der völlig fehlenden Semantik und der Nutzung veralteter HTML-Attribute, die eigentlich Layout beschreiben, mal ganz abgesehen.
Dass Du damit Probleme hast, wundert mich eigentlich nicht, ich würd das ganze abreißen und neu machen. Und dabei gleich HTML und CSS lernen.

Bei mir sieht die Seite im FF3 und IE7 übrigens gleich aus.

Du hast aber im nav_right (schlechter Name für eine ID, keine Layoutinformationen in den HTML-Code!) sowohl float als auch position:relative verwendet. Das ist sinnfrei. Nimm eines davon raus, vielleicht nimmt Dir das der IE (ich nehme an, Du meinst <=6) nicht mehr übel.
 
Hallo :)
Also diese Suppe habe ich nicht gekocht:) Es ist ein Template von SEO:Commerce das mit dem Shop zum Downloaden ist. Die *.css Datei umfasst über 500 Zeilen. Um das alles neu zu schreiben braucht man woll ne ganze Weile, da es auf so viele Shop Seiten zugreift. Ich habe das Template als Vorlage benutzt. Leider harpert es beim IE an der Ausrichtung der rechten Navigation. Ich benutze übrigens IE7 und FF3. Seite getestet auf verschiedenen Rechner.

Beim IE befindet sich bei mir der main und der Linke Teil im gelben Kasten. Der rechte leider im border-right des outerCountainer.
Er sollte wie bei mir im FireFox im gelben Teil des innerContainer sich befinden.
 
Stimmt. Jetzt weiß ich, was Du meinst.

Was mich irritiert ist, dass #wrap left floaten soll aber auch 100% breit sein soll.
Wozu floatest Du den dann?
Da der IE manchmal Probleme beim floaten hat, würde ich das als erstes rausnehmen. float und width:100% macht ja keinen Sinn. Wenn etwas die volle Breite einnimmt, kann nichts anderes mehr daneben sitzen.
 
Habe den float da mal entfernt. Jetzt ist die rechte Spalte nach unten gerutscht befinden sich aber immer noch nicht auf der gelben Fläche und der IE und FF zeigen immer noch was anderes an :(

Gibt es eigentlich für den IE auch so ein gutes Tool wie WebDeveloper für den FF.

Hast du noch eine andere Idee :)

Vielen Dank ersteinmal schon für deine Hilfe !!
 
Hmmm...was ich am komischsten an Deinem layout finde ist, dass das rote beides tatsächlich borders sind. Und komisch an dem Problem ist, dass das Element sich über den border legt, obwohl es mit float:right eigentlich am rechten Rand des Containers, also an der Innenseite des borders kleben sollte.

Ich bin im Augenblick etwas sprachlos.

Ein Tool für den IE kenne ich nicht. Ich nutze Firebug für Firefox und ärgere mich auch jedes Mal, dass ich im IE nicht die Auskünfte einholen kann, wie im Firebug, dann wäre jetzt womöglich schon einiges klarer.
 
So ich hab beides mal auf das äußerste gekürzt. Vielleicht findet da ja jemand einen Hinweis darauf was hier falsch läuft !

Code: 
*
 { margin: 0px; padding: 0px; }
 
#outerContainer { border-left: 198px solid #FF0033; border-right: 200px solid #FF0033; z-index: 1; margin-top: 180px; width:572px; }
 
.clr { clear: both; float: none; }
 
#nav_left { float: left; width: 184px; z-index: 5; }
#nav_right { float: right; width: 180px; z-index: 5; }

Code: 
{config_load file="$language/lang_$language.conf" section="index"}
    <div id="outerContainer">
       <div id="nav_left">
       box links
       </div>
       <div id="nav_right">
       box rechts
       </div>
    <div class="clr"></div>
    </div>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben