IE macht mal wieder Zicken!!!

mkrohmann · #1 (**permalink**) 22.03.2005, 17:51

Wer kann mir helfen dieses Template für den IE kompatibel zu machen:
Im Mozilla und Opera läuft es einwandtfrei, also diese bitte als Vorlage für den IE nehmen! Danke!!!

Code:

<html>
<head>
  <style type="text/css">
    body {
      margin: 0;
      padding: 0;
      background: #ddd;
      font-family: verdana, arial, sans-serif;
      font-size: 10px;
    }
    
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Siteframe */
    
    .l, .r {
      position: absolute;
      margin: 0;
      top: 0;
      width: 40px;
      height: 100%;
    }
    
    #frame_Top {
      position: relative
      margin: 0;
      height: 20px;
      background: url('http://www.mickro.de/img/nrw/frame/oc.gif') repeat-x;
    }
    
    #frame_Top .l {
      left: 0;
      background: url('http://www.mickro.de/img/nrw/frame/ol.gif') no-repeat;
    }
    
    #frame_Top .r {
      right: 0;
      background: url('http://www.mickro.de/img/nrw/frame/or.gif') no-repeat;
    }
    
    
    #frame_Center {
      margin: 0;
      background: url('http://www.mickro.de/img/nrw/frame/l.gif') top left repeat-y;
    }
    
    #frame_Center .inner {
      margin: 0;
      background: url('http://www.mickro.de/img/nrw/frame/r.gif') top right repeat-y;
    }
    
    #frame_Center .left {
      float: left;
    }
    
    #frame_Center .c {
      margin: 0 40px;
      background: #fff;
    }
    
    #frame_Center .right {
      float: right;
    }
    
    
    #frame_Bottom {
      position: relative;
      margin: 0;
      height: 30px;
      background: url('http://www.mickro.de/img/nrw/frame/uc.gif') repeat-x;
    }
    
    #frame_Bottom .l {
      left: 0;
      background: url('http://www.mickro.de/img/nrw/frame/ul.gif') no-repeat;
    }
    
    #frame_Bottom .r {
      right: 0;
      background: url('http://www.mickro.de/img/nrw/frame/ur.gif') no-repeat;
    }
    
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ site structure */
    
    #header {
      margin: -1px 0 0;
      padding: 0;
      height: 80px;
      border: 1px solid #1f8f1f;
      border-width: 0 1px 1px;
      z-index: 2;
    }
    
    #wrapp_outer {
      margin: 0;
      border: 1px solid #fff;
      border-width: 1px 0 0;
    }
    
    #wrap_inner {
      margin: 0;
      border: 1px solid #fff;
      border-width: 0 0 1px;
    }
    
    #lefthand {
      float: left;
      margin: 0;
      width: 200px;
    }
    
    #content {
      margin: 0 180px 0 200px;
      border: 1px solid #fff;
    }
    
    #righthand {
      float: right;
      margin: 0;
      width: 180px;
    }
    
    #footer {
      background: #ccc;
      padding: 5px 0;
    }
    
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ general classes */
    
    .clear {
      clear: both;
      height: 0;
      font-size: 0;
      line-height: 0;
      border: none;
      margin: 0; 
      padding: 0;
    }
    
    /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ #reiter */
    
    #reiter {		
	  position: relative;
	  padding: 0;
	  height: 2em;
      background: url('http://www.mickro.de/img/nrw/reiter_gradient.gif') repeat-x;
    }
    
    #reiter .left {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 0.6em;
	  height: 2em;
	  margin: 0;
      background: url('http://www.mickro.de/img/nrw/reiter_gradient_left.gif') no-repeat;
	}
      
   	
   	#reiter ul {
	  position: absolute;
	  margin: 0;
	  padding: 0;
	  top: 0;
	  right: 0;
	  width: auto;
	  list-style: none;
	}
	
	#reiter li {
	  float: right;
	  padding: 0 4px 0 0;
	  margin: 0;
	  background: transparent url('http://www.mickro.de/img/nrw/reiter/tabreiter.gif') 100% -100px no-repeat;
	}
	
	#reiter .last {
	  padding: 0 5px 0 0;
	  background: transparent url('http://www.mickro.de/img/nrw/reiter/tabreiter.gif') 100% -150px no-repeat;
	}
	
	#reiter a {
	  float: left;
	  display: block;
	  margin: 0;
	  padding: 0.4em 0.8em 0.4em 2.8em;
	  color: #fff;
	  text-decoration: none;
	  background: transparent url('http://www.mickro.de/img/nrw/reiter/tabreiter.gif') 0% -50px no-repeat;
	}
	
	#reiter .first a {
	  background: transparent url('http://www.mickro.de/img/nrw/reiter/tabreiter.gif') 0% 0% no-repeat;
	}
  </style>
</head>
<body>


<div id="frame_Top">
  <div class="l"></div>
  <div class="r"></div>
</div>


<div id="frame_Center">
  <div class="inner">
    <div class="left"></div>
    <div class="right"></div>
    
    <div class="c" style="position:relative;">
    
      <div id="reiter">
        <div class="left"></div>
        <ul>
          <li class="last">Link 3[*]Link2
          <li class="first">Link 1[/list]	
      </div>   
      
      <div id="header"></div>
      
      <div id="wrap_outer">
        <div id="wrap_inner">
        
          <div id="lefthand">
            Lefthand

            Lefthand

            Lefthand
          </div>
          
          <div id="righthand">
            Righthand

            Righthand

            Righthand

            Righthand
          </div>
          
          <div id="content">
            <div>
              <div style="float:left; margin:0 10px 10px 0; padding:10px; border: 1px solid #ccc;">
                [img]http://www.mickro.de/img/nrw/reiter/tabreiter.gif[/img]
                

Untertitel</p>
              </div>
              Hier steht dann etwas text... und vielleicht auch etwas mehr
              


                bla bla bla bla bla bla bla bla bla bla 

                bla bla bla bla bla bla bla bla bla bla 

                bla bla bla bla bla bla bla bla bla bla 

              </p>
              <br class="clear" />
              hier kommt das, was nicht da drunter soll...
            </div>
          </div>
          
          <div class="clear"></div>
        </div>
      </div>
      
      <div id="footer">frameFooter</div>
      
    </div>   
    <div class="clear"></div>
  </div>   
</div>   

  
<div id="frame_Bottom">
  <div class="l"></div>
  <div class="r"></div>
</div>


</body>
</html>

wahsaga · #2 (**permalink**) 22.03.2005, 18:33

Zitat:

Zitat von mkrohmann

Wer kann mir helfen dieses Template für den IE kompatibel zu machen:
Im Mozilla und Opera läuft es einwandtfrei, also diese bitte als Vorlage für den IE nehmen! Danke!!!

möchtest du vielleicht noch'n lutscher oder einen kaffee, um die wartezeit zu überbrücken ...?

Boris · #3 (**permalink**) 23.03.2005, 00:27

Also wenn das wengstens online zu sehen wäre, würde ich es mir ja noch ansehen. Aber so? Nee ...

mkrohmann · #4 (**permalink**) 23.03.2005, 10:08

hier online zu sehen

Zitat:

möchtest du vielleicht noch'n lutscher oder einen kaffee, um die wartezeit zu überbrücken ...?

Lieber gar keine Antwort, als geistige Diarrhoe... Dankeschön!!!

Boris · #5 (**permalink**) 23.03.2005, 10:27

Dass Du ohne Tabellen arbeitest, ist schonmal sehr gut

Aber Du solltest dem Kind auch einen Namen geben - mit einem passenden DOCTYPE! Erst damit schalten alle Browser in den Standardmodus und unterstützen so (mehr oder weniger) HTML und CSS komplett.

Für Deine Seite solltest Du den nehmen:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">

Wenn das getan ist, wäre der nächste Schritt der Validator:
http://validator.w3.org/

mkrohmann · #6 (**permalink**) 23.03.2005, 10:34

Hey, jemand der sich konstuktiv mit dem Problem beschäftigt! Vielen Dank schon mal dafür!!!

Das Doctype ist leider nicht das Problem. Das ist valides strictes XHTML 1.0. Trotzdem hat der IE mal wieder einen Renderfehler...

Boris · #7 (**permalink**) 23.03.2005, 10:45

Zitat:

Zitat von mkrohmann

Hey, jemand der sich konstuktiv mit dem Problem beschäftigt! Vielen Dank schon mal dafür!!!

Das Doctype ist leider nicht das Problem. Das ist valides strictes XHTML 1.0. Trotzdem hat der IE mal wieder einen Renderfehler...

Sorry, aber so, wie der Code derzeit aussah, war er kein strictes XTML 1.0 - der <title> Tag fehlte - aber wie ich sehe, hast Du das jetzt nachträglich eingebaut *g*

Ich schätze, der IE hat ein Problem (hätt ich auch) mit Deinen absoluten Positionsangaben. Du solltest vielleicht eher probieren, komplett mit floats zu arbeiten.

Auch ist das hier in Deinem CSS sehr eigenartig:

.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
border: none;
margin: 0;
padding: 0;
}

Ein clear: both; reicht da aus, der Rest hat überhaupt keinen Sinn.

Um Dein eigenes Layout mal zu analysieren, installier Dir mal die Webdeveloper Toolbar für den Firefox und klick auf "Outline -> Block Level Elements" ... Du wirst sehen, dass da einiges generell nicht stimmt (selbst wenn der Firefox es korrekt anzeigt).

mkrohmann · #8 (**permalink**) 23.03.2005, 10:58

Zitat:

Auch ist das hier in Deinem CSS sehr eigenartig:

.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
border: none;
margin: 0;
padding: 0;
}

Ein clear: both; reicht da aus, der Rest hat überhaupt keinen Sinn.

Bei DIVs reicht sicher das clear: both; wenn Du das jedoch auf LIs anwendest, bekommt der IE wieder Probleme...

Die absolute Positionierung wird ja durch das position: relative; des übergeordneten Elements wieder "relativiert". Von daher sollte das Problem auch da nicht liegen. Aber ich probiere es gerne mal aus...

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Mac IE 5.2 macht Zicken...	LarsD	Site- und Layoutcheck	1	30.09.2004 14:40