thomas: Div_layer Position IE6 versus IE5.5

liebe leuts,
stosse grade auf ein Problem, wo ich mich wundere, dass mir das noch nicht früher aufgefallen ist:
HABE ein CSS Menue, das über div_Layer gesteuert wird bzw positioniert wird.
Das Menu liegt auf einer Seite der ich Left-Margin = 20 mitgegeben habe.

Genau da liegt das Problem:
Im IE6 / mozilla / Firebird / Opera / Netscape 6+ liegt das Menue bei einer positionierung von Left: 20px genau da wo es hin soll - nämlich am 20px vom linken Rand.

jetzt stelle ich fest das IE 5.5 und darunter bei der positionierung des div_Layer das Left Margin = 20 nicht vom Linken Rand rechnet, sondern vom für die Seite festgelegten Left Margin = 20 Rand - also müßte ich hier bei der positionierung des Div_Layer Left mit 0px angeben.

Bin also grad mal baff erstaunt und frage nach einer Lösung ohne Browseweiche setzen zu müssen.

liebe Grüße thomas

live zu sehen:
http://www.jazzkeller69.de.vu  (unter Programm)

Code:
<div id="Layer1" style="position:absolute; width:242px; height:46px; z-index:1; left: 20px; top: 163px;">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#" title="alte Zeiten" class="mybold" onClick="MM_showHideLayers('Layer2','','show')"onMouseOver="MM_showHideLayers('Layer2','','hide')">s
u c h e:   a l t e   Z e i t e n </a></li>
</ul>
</div>

CSS:
BODY{
 margin-left: 20px;
 margin-top: 0px;
 margin-right: 20px;
 margin-bottom: 0px;
 color: #FFFFFF;
 background-color: #666699;
}
#navlist{
 padding: 0 1px 1px;
 margin-left: 0;
 font: 12px Verdana, sans-serif;
 background: #666699;
 width: 21em;
}
#navlist li{
 list-style: none;
 margin: 0;
 border-top: 1px solid gray;
 text-align: center;
 width: 100%
}

#navlist li a{
 display: block;
 padding: 0.25em 0.5em 0.25em 0.75em;
 border-left: 1em solid #AAB;
 text-decoration: none;
 width: 100%
}

#navlist li a:link { color: #00FF00; }
#navlist li a:visited { color: #00FF00; }

#navlist li a:hover{
 border-color: #FE3;
 color: #FFF;
 background: #332;
}

  1. Hallo,

    jetzt stelle ich fest das IE 5.5 und darunter bei der positionierung des div_Layer das Left Margin = 20 nicht vom Linken Rand rechnet, sondern vom für die Seite festgelegten Left Margin = 20 Rand - also müßte ich hier bei der positionierung des Div_Layer Left mit 0px angeben.

    Ich kann dein Problem nicht ganz nachvollziehen (habe keinen IE5.5).
    Du kannst Conditional Comments nutzen:

    <!--[if lt IE 6]>
    <style type="text/css">
    #menu { margin-left:0px; }

    /* du kannst an der Stelle natürlich auch eine Externe CSS DAtei einbinden */

    </style>
    <![endif]-->

    if lt IE 6 -> bezieht alle IE (bis zur Version 5) ein, die kleiner als (less than = lt) IE 6 sind.

    mfg NAG

    --
    signatur
    1. hallo nag,
      Danke, ja 'less than' wird da wohl die Lösung werden.
      Hatte mich nur gewundert, das ich hier an anderer Stelle noch nichts zu dem Thema gefunden hatte, also untersschiedliche Positionierung des Div_Layer mit in diesem Falle left: wenn Left Margin für eine Seite vorgegeben ist zwischen IE 6 und den IE Varianten darunter.
      Habe allerdings auch noch nicht ausprobiert ob dies Verhalten nur im Quierks Modus vorliegt. Baue das Gleiche nacher nochmal in 'ner Strict Version und schau mal was da passiert.

      Inzwischen gibts aber diese Standalone IE Versionen, die man auch parallel Betreiben kann (und nicht viel Platz wegnehmen) zum Testen:
      http://www.insert-title.com/web_design/?page=articles/dev/multi_IE

      liebe Grüße thomas

      Hallo,

      jetzt stelle ich fest das IE 5.5 und darunter bei der positionierung des div_Layer das Left Margin = 20 nicht vom Linken Rand rechnet, sondern vom für die Seite festgelegten Left Margin = 20 Rand - also müßte ich hier bei der positionierung des Div_Layer Left mit 0px angeben.

      Ich kann dein Problem nicht ganz nachvollziehen (habe keinen IE5.5).
      Du kannst Conditional Comments nutzen:

      <!--[if lt IE 6]>
      <style type="text/css">
      #menu { margin-left:0px; }

      /* du kannst an der Stelle natürlich auch eine Externe CSS DAtei einbinden */

      </style>
      <![endif]-->

      if lt IE 6 -> bezieht alle IE (bis zur Version 5) ein, die kleiner als (less than = lt) IE 6 sind.

      mfg NAG