3 Spalten (2 feste breite, 1 variabel) Problem im IE

**sebi89** · 01.11.2011 18:43

Hallo zusammen,

Ich habe ein Layout erstellt, bei dem ein Header aus zwei Grafiken besteht, die eine feste Breite haben und ganz rechts bzw. links angeordnet sein sollen. Der Freiraum dazwischen soll (wenn er aufgrund der Fensterbreite vorhanden ist) den restlichen Raum mit einer einheitlichen Farbe füllen. Das funktioniert auch in allen Browsern, nur im IE nicht... Dort werden die Div-Boxen einfach nebeneinander dargestellt und rutschen teilweise in die nächste Zeile. Außerdem schließen sie nicht aneinander an sondern haben einen weißen Rand.

Anbei HTML&CSS Code der Seite. Hat jemand eine Idee, wo das Problem liegen könnte?

HTML-Code:

<body>
  <div id="outer">
      <div id="header">
          <div id="head_left">
          <img src="res/header_left.jpg" />
            </div>
            <div id="head_right">
            <img src="res/header_right.jpg" />
            </div>
            <div id="head_center"></div>
      </div>
        <div id="menu_wrap">
        <div id="menup">
        <ul class="menu">
        <li><a href="#">Ebene1 Punkt1</a></li>
        <li onmouseover="show(this)" onmouseout="hide(this)" >
          <a href="#">Ebene1 Punkt2</a>
          <ul class="submenu" onmouseover="show(this)" onmouseout="hide(this)" >
              <li><a href="#">Ebene2 Punkt1</a></li>
              <li><a href="#">Ebene2 Punkt2</a></li>
              <li class="active"><a href="#">Ebene2 Punkt3</a></li>
          </ul>
        </li>
        <li><a href="#">Ebene1 Punkt3</a></li>
        <li><a href="#">Ebene1 Punkt4</a></li>
    </ul>
         </div>
        <div id="menulang">Sprachauswahl</div>
        <div id="menu_center"></div>
        </div> <!-- Ende menu_wrap -->
        
        <div id="border">
        rechter Rand
        </div>
        <div id="content" align="left">
        <table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td valign="top">
          Lorem ipsum dolor sit amet,...
          </td>
          </tr>
          </table>


        </div>
    </div>
    <div id="footer">
      <img src="res/footer.jpg" height="113" width="100%" />
  </div>
</body>

CSS:

Code:

@charset "UTF-8";
/* CSS Document */

* {
    margin:0;
    padding:0
}
html, body {
    height:100%;/* needed to base 100% height on something known*/
    text-align:left;
  font-family:Verdana, Geneva, sans-serif;
  font-size:15px;
}

#outer {
    width:100%;
  	min-width:1000px;
    background:#ffffff;
  	float:left;
    margin:auto;
    min-height:100%;
    margin-top:-113px;/*footer height - this drags the outer -113px up through the top of the monitor */
    text-align:left;
}
* html #outer {
    height:100%
}
#header {
  border-top:113px solid #fff; /* soak up negative margin and allows header to start at top of page*/
  width:100%;
  min-width:1000px;

}

#head_left {
  float:left;
  width:500px;
}

#head_center {
  height:120px;
  background-color:#285a98;
}

#head_right {
  float:right;
  width:500px;

}

#menu_wrap {
  width:100%;
  min-width:1000px;
  z-index:2;
}

#menup {
  float:left;
  z-index:2;
}

#menulang {
  float:right;
  margin-right:30px;
  z-index:2;
}

#menu_center {
  height:1.7em;
  background-color:#285a98;
  z-index:2;
}

#content {
  clear:left;
  width:100%;
  max-width:720px;
  padding-left:20px;
  margin-left:20px;
  margin-top:10px;
  z-index:3;
}

#border {
  float:right;
  width:210px;
  margin-left:10px;
  margin-right:10px;
  margin-top:10px;
}

#footer {/* footer now sits at bottom of window*/
  float:left;
    width:100%;
  min-width:1000px;
    margin:auto;
    height:113px;/* must match negative margin of #outer */
    clear:both;
}

/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}
h1, h2 {
	font-size:18px;
	color:#285a98;
  
}

p {
	padding-bottom:10px;
}

h1, h2, h3, h4, h5, h6, label{

  font-size:18px;

  color:#285a98;
}

#outer:after {/*instead of using display table for ie8*/
    clear:both;
    display:block;
    height:1%;
    content:" ";
}

a {
  text-decoration:none;
}


/* MENU */

ul.menu, ul.menu ul {
    list-style-type: none;
}

ul.menu a {
    display: block;
    padding: 1px 10px 3px 10px;
  color: #FFFFFF;
    font-weight:normal;
}

ul.menu ul a {
    padding: 0px 10px 3px 10px;
}

ul.menu li {
    padding:0;
    margin:0;
    background-image: none;
    background-color: #285a98; /* bg color level 1 */
    float:left;
    border:1px solid #006;
}

ul.menu ul {
    margin-left:0;
    padding: 0 0 0 0;
    position: absolute;
    background-color: #285a98;
    border:1px solid #006;
    display:none;
    min-width:180px;
}

/* IE-Hack fï¿½r die Breite */
*html ul.menu ul {
    width:180px;
}


ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul  {
    display:block;
}

ul.menu ul li {
    float:none;
    background-color: transparent;
}

Viele Grüße,
Sebastian

**kami** · 01.11.2011 19:59

Hallo Sebastian,

verwendest Du noch einen alten Browser?
In alten Browser des IE ist das ein bekannter Bug:

Es handelt sich dabei um "IE Three Pixel Gap" bzw. "The IE Three Pixel Text-Jog" (frei übersetzt: die drei Pixel breite Lücke/Kluft/Abstand). Dieses Phänomen tritt auf in Verbindung mit floatenden Menüs und Internet Explorer (Windows 5.0-6).

Das habe ich auf der Page von http://www.perun.net/2004/07/09/3-pixel-abstand/ entdeckt

**sebi89** · 01.11.2011 20:07

Hallo kami,

Vielen Dank, das scheint wirklich der Fehler mit dem weißen Rand zu sein.

Ich glaube aber, dass das eigentliche Problem damit nicht behoben ist. Das tritt nämlich auch im aktuellen IE auf.

hier mal mein template: http://web2592.srv20.sysproserver.de..._template.html
Firefox, Chrome, Safari, Opera + div. Android Browser zeigen es korrekt an, der IE aber nicht

**kami** · 01.11.2011 20:24

Hallo Sebastian,

bin leider nicht der richtige Mann für den IE. Ich stehe seit jeher auf dem Kriegsfuß mit ihm. Habe sogar alle CSS in früherer Zeit dem IE enthalten. Sogar mit dem Hinweis hierzu. Hier sind bestimmt User die es besser als ich kann und eine andere Einstellung zum IE haben. Hauptsächlich User die das professionell benötigen. Selber bin nur ein Hobby-User.

**wildmieze** · 01.11.2011 20:48

Hmm .. in meinem IE8 siehts genauso aus wie im Firefox ..

Wofür ist eigentlich "head_center" ..? Nur für die Höhenangabe? .. *kratzamkopp* .. als Alternative könntest Du dem Header zB das rechte Bild als Hintergrund geben. Dann bräuchtest Du nur noch ein div (oder auch nur ein img) für das linke Bild... das würde die Sache vereinfachen und das Problem vielleicht automatisch lösen

**sebi89** · 01.11.2011 21:06

IE8 geht? Das ist schon mal eine gute Nachricht!

head_center ist das div in der Mitte, welches den Bereich zwischen den Bildern bei breiten Browserfenstern mit der blauen Hintergrundfarbe füllt.
Wenn ich das rechte Bild als Hintergrund wähle, dann wird es aber bei breiten Fenstern verzerrt oder ist nicht mehr am rechten Rand...? Es soll ja bei jeder beliebigen Breite am rechten Rand sein. Nur unterhalb einer bestimmten Breite kommen irgendwann die seitlichen Scrollbalken.
Oder würdest Du das ganz anders umsetzen?

**wildmieze** · 02.11.2011 00:39

.. Die blaue Hintergrundfarbe kannst Du auch dem Header geben (dem gibst Du auch gleich die passende Höhe mit), und gleichzeitig auch das Hintergrundbild und sagst, daß es rechts angezeigt werden soll. Verzerrt wird da nix.

Versuchs mal so:

#header {
border-top:113px solid #fff; /* soak up negative margin and allows header to start at top of page*/
height: 120px;
background: url(res/header_right.jpg) top right no-repeat #285a98;
width:100%;
min-width:1000px;

}

... kann auch sein, daß die Höhe nur 7px ist, weil der 113px-Rahmen mitgezählt wird (siehe Boxmodell). Probiers aus, ich merk mir das nie

Im HTML-Bereich kannst Du dann #head_center und #head_right weglassen ..

**sebi89** · 02.11.2011 12:02

Vielen Dank, damit zeigt jetzt auch der IE alles korrekt an (bis auf ein paar kleine Verschiebungen, aber das ist lösbar)

zur Startseite vom TP

Thema: 3 Spalten (2 feste breite, 1 variabel) Problem im IE

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

3 Spalten (2 feste breite, 1 variabel) Problem im IE

Ähnliche Themen

Feste Breite im Editor

3 Spalten - Mitte fix - Rest variabel

3 Spalten Layout - aussen fixe Breite, mitte variabel

bei boxen dynamische und feste breite angeben

Netscape 4.75, feste Breite eines Textblocks

Aktive Benutzer

Aktive Benutzer