✔ IE6 und absolute Positionsangaben. Problem!

Ardaric · 10. Juli 2006

Hallo!

Also ich habe folgendes Problem mit dem IE6 und absoluten Positionsangaben.

Ich habe einen DIV, in dem ich 4 Bilder positioniert habe (nav_edge_bottomright.gif, nav_edge_bottomleft.gif, nav_edge_topright.gif, nav_edge_topleft.gif). Ich brauche nämlich abgerundete Ecken. Im Firefox funktioniert das prima, aber wenn ich das im IE6 öffne, dann sind die unteren Bilder immer einen Pixel zu hoch! Die Oberen passen aber.

Ich habe Items im Menü. Das sind einfache Menüpunkte, die sich per Javascript aufklappen lassen (DIV wird eingeblendet). Und dementsprechend vergrößert sich die Navigationsleiste. Aber dann bleiben die Bilder an der vorherigen position, anstatt dass sie sie nach unten verschieben (bottom:-1px) Im Firefox klappt das alles wunderbar.

Warum im IE6 nicht, und wie löse ich dieses Problem?

HTML:

<div id="navigation">
		<!-- Round egdes IE6 fix : This must be at the very top of the 'navigation' div! //-->
			<img src="http://www.tutorials.de/forum/images/nav_edge_topleft.gif" style="position:absolute; top:-1px; left:-1px; z-index:999;" />
			<img src="http://www.tutorials.de/forum/images/nav_edge_topright.gif" style="position:absolute; top:-1px; right:-1px; z-index:999;" />
		
		
		<!-- Level 0 : Item00 //-->
		<!-- Level 0 : Item01 //-->
		<!-- Level 0 : Item02 //-->
		<!-- Level 0 : Item03 //-->
					
		<!-- Round egdes IE6 fix : This must be at the very bottom of the 'navigation' div! //-->
			<img src="http://www.tutorials.de/forum/images/nav_edge_bottomleft.gif" style="position:absolute; bottom:-1px; left:-1px; z-index:999;" />
			<img src="http://www.tutorials.de/forum/images/nav_edge_bottomright.gif" style="position:absolute; bottom:-1px; right:-1px; z-index:999;" />
	</div> <!-- NAVIGATION END //-->

CSS:

Code:

#navigation {
	position:relative;
	width:240px;
	min-height:496px;
	padding:1px;
	z-index:200;
	
	border: 1px solid #004D85;
	background-color:#276C9E;
	background-image:url(images/nav_background.gif);
	background-repeat:repeat-x;
	
	float:left;
	display:inline;
	
	color:#FFFFFF;
}

Maik · 10. Juli 2006

Vielleicht liegt es daran, daß du für das DIV #navigation lediglich eine Mindesthöhe definiert hast, die vom IE nicht unterstützt wird.

Probier es mal mit folgender Erweiterung für das Stylesheet:

Code:

* html #navigation { /* Für IE */
height: 496px;
}

Ardaric · 10. Juli 2006

Nein, das ist leider nicht die Lösung. IE6 verändert sein verhalten nicht.

Maik · 10. Juli 2006

Gibt es auch eine Online-Version der Seite, um das Problem direkt in Augenschein nehmen zu können?

Ardaric · 10. Juli 2006

Ich mache gerade ein Praktikum, und glaube nicht, dass ich die Seite im Moment veröffentlichen darf

Ich kläre das morgen mal ab.

Maik · 10. Juli 2006

In diesem Beispiel habe ich mal eine Liste eingefügt und für das ul-Element entsprechend der Grafikhöhe einen Außenabstand nach oben und unten eingerichtet. Den Wert 20px habe ich hier frei gewählt, da ich ja nicht die tatsächliche Dimension deiner verwendeten Grafiken kenne.

Auf diese Weise wird im IE 6.0 die Lücke zwischen den Grafiken und dem unteren Boxrand geschlossen.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
#navigation {
        position:relative;
        width:240px;
        min-height:496px;
        padding:0px;
        z-index:200;
        border: 1px solid #004D85;
        background-color:#276C9E;
        background-image:url(images/nav_background.gif);
        background-repeat:repeat-x;
        float:left;
        display: inline;
        color:#FFFFFF;
}

ul {
        margin-top: 20px; /* muss der tatsächlichen Grafikhöhe angepasst werden */
        margin-bottom: 20px; /* muss der tatsächlichen Grafikhöhe angepasst werden   */
}
-->
</style>

</head>
<body>

<div id="navigation">
                <!-- Round egdes IE6 fix : This must be at the very top of the 'navigation' div! //-->
                        <img src="nav_edge_topleft.gif" style="position:absolute; top:-1px; left:-1px; z-index:999;" />
                        <img src="nav_edge_topright.gif" style="position:absolute; top:-1px; right:-1px; z-index:999;" />

                <ul>
                    <li>item 1</li>
                    <li>item 2</li>
                    <li>item 3</li>
                    <li>item 4</li>
                    <li>item 5</li>
                    <li>item 6</li>
                    <li>item 7</li>
                    <li>item 8</li>
                    <li>item 9</li>
                </ul>

                <!-- Round egdes IE6 fix : This must be at the very bottom of the 'navigation' div! //-->
                        <img src="nav_edge_bottomleft.gif" style="position:absolute; bottom:-1px; left:-1px; z-index:999;" />
                        <img src="nav_edge_bottomright.gif" style="position:absolute; bottom:-1px; right:-1px; z-index:999;" />
        </div> <!-- NAVIGATION END //-->


</body>
</html>

Ardaric · 13. Juli 2006

So, lange nichts von mir gehört, aber jetzt bin ich wieder hier.
Ich habe das jetzt mal kleiner gebaut, um alle überflüssigen Fehlerquellen zu beseitigen. Leider funktioniert es immer noch nicht! Die unteren Grafiken verschieben sich nicht mit! Und das ist ein Problem!

Außerdem sind die Grafiken rechts nicht bündig! Da fehlt ein Pixel.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
<!--
#Layer1 {
	position:relative;
	left:50px;
	top:50px;
	width:600px;
	z-index:1;
	background-color:#993300;
	font-weight:bold;
}
#Layer2 {
	position:relative;
	width:200px;
	z-index:2;
	background-color:#3366FF;
}
-->
</style>
</head>

<body>
<div id="Layer1">
	
	<img src="grml.gif" style="position:absolute; left:0px; top:0px; z-index:100;" />
	<img src="grml.gif" style="position:absolute; left:0px; bottom:0px; z-index:100;" />
	<img src="grml.gif" style="position:absolute; right:0px; bottom:0px; z-index:100;" />
	<img src="grml.gif" style="position:absolute; right:0px; top:0px; z-index:100;" />
  <p>ABC</p>
  <p>ABC</p>
  <p>ABC</p>
  <a href="#" onclick="document.getElementById('Layer2').style.display='block';">zeige</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <a href="#" onclick="document.getElementById('Layer2').style.display='none';">verstecke</a><br />
<br />
<br />
<br />
<br />

  <div id="Layer2">testtesttest</div>
</div>

</body>
</html>

Maik · 13. Juli 2006

Hier mein alternatives Lösungsbeispiel:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>

<style type="text/css">
<!--
div#Layer1 {
        position:absolute;
        left:50px;
        top:50px;
        width:600px;
        z-index:1;
        background-color:#993300;
        font-weight:bold;
}

div.lt { /* left-top */
       background: url(grml.gif) 0 0 no-repeat;
       height: 10px;
       padding-left: 10px;
}

div.rt { /* right-top */
       background: url(grml.gif) 100% 0 no-repeat;
       height: 10px;
       padding-right: 10px;
}

div.lb { /* left-bottom */
       background: url(grml.gif) 0 100% no-repeat;
       height: 10px;
       padding-left: 10px;
}

div.rb { /* right-bottom */
       background: url(grml.gif) 100% 100% no-repeat;
       height: 10px;
       padding-right: 10px;
}

div.space {
       background: #993300;
       height: 10px;
       font-size: 0;
}

div.content {
       width: 600px;
       background: #993300;
}

div.content p {
       margin-top: 0;
}

#Layer2 {
        position:relative;
        width:200px;
        z-index:2;
        background-color:#3366FF;
}
-->
</style>

</head>
<body>

<div id="Layer1">
     <div class="lt"><div class="rt"><div class="space"></div></div></div>
     <div class="content">
          <p>ABC</p>
          <p>ABC</p>
          <p>ABC</p>
          <p>ABC</p>
          <p>ABC</p>
          <p>ABC</p>
          <p>ABC</p>

          <a href="#" onclick="document.getElementById('Layer2').style.display='block';">zeige</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#" onclick="document.getElementById('Layer2').style.display='none';">verstecke</a><br />
          <div id="Layer2">testtesttest</div>
     </div>
     <div class="lb"><div class="rb"><div class="space"></div></div></div>
</div>

</body>
</html>

Ardaric · 17. Juli 2006

Oh Nein! Ich habe den Border völlig vergessen. Layer1 hat einen 1Pixel breiten Rand! Sorry, das mir das erst jetzt aufgefallen ist! So geht das dann leider nicht mehr ...

Maik · 17. Juli 2006

Warum sollte es denn mit einem zusätzlichen Rahmen nicht mehr funktionieren?

Ich habe in dem zuletzt erstellten Lösungsbeispiel einen Rahmen für Layer1 eingerichtet und das Modell anschliessend in allen mir zur Verfügung stehenden Browsern erfolgreich getestet.

Testumgebung: Win2k, FF 1.5.0.4, IE 6.0, MOZ 1.7.12, NN 7.0, OP 8.50

✔ IE6 und absolute Positionsangaben. Problem!

Ardaric

Erfahrenes Mitglied

Maik

Ardaric

Erfahrenes Mitglied

Maik

Ardaric

Erfahrenes Mitglied

Maik

Ardaric

Erfahrenes Mitglied

Anhänge

Maik

Ardaric

Erfahrenes Mitglied

Maik

Neue Beiträge