✔ CSS Hintergrundbreite Problem div im IE

Status
Nicht offen für weitere Antworten.
I

irena

Mitglied
Das folgende Aufklappmenue, das in einem div verschachtelt ist, sieht überall gleich aus nur nicht im IE 6. Getestet: Opera 8, Firefox. Problem: Nur wenn das Menue aufgeklappt ist, ist die Breite des Hintergrundes im IE6 zu breit. Wenn es zugeklappt ist, stimmt es. Irgendwie liegt das Problem hier: #subnavi. Die Breite habe ich auf 13em gestellt, was überall einigermassen ein gleiches Ergebnis liefert, nur eben, sobald die Navigation aufgeklappt ist, nicht. Nachfolgend html-code mit aufgeklapptem Menu, geschlossenen Menu und ausgelagerte CSS.Wenn mir jemand einen Tipp geben könnte, wäre das super!code von html-Seite, aufgeklappt:
-Navigation aufgeklappt, Hintergrund stimmt nicht im IE6 (zu breit).
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../menue_d/nav.css">
<style type="text/css">
<!--
#subnavi {
  background-color: #669999;
  width: 13em;
  height: 500px;
  float: left;
}
-->
</style>

<title>Navigation aufgeklappt</title>
</head>

<body>

<div ID="subnavi">
<div id="nav">
<ul class="liste">
<li><a class="hier" href="#">Rubrik eins</a>
	<ul class="sub">
	<li><a href="nav-1a.html">eins a</a></li>
	<li><a href="nav-1b.html">eins b</a></li>
	<li><a href="nav-1c.html">eins c</a></li>
	</ul>
</li>
<li><a href="nav-2.html">Rubrik zwei</a></li>
<li><a href="nav-3.html">Rubrik drei</a></li>
<li><a href="nav-4.html">Rubrik vier</a></li>
</ul>
</div>
      </div>

</body>

</html>

Navigation geschlossen, Hintergrund stimmt:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="../menue_d/nav.css">
<style type="text/css">
<!--
#subnavi {
  background-color: #669999;
  width: 13em;
  height: 500px;
  float: left;
}
-->
</style>

<title>Navigation geschlossen</title>
</head>

<body>

<div ID="subnavi">
<div id="nav">
<ul class="liste">
<li><a class="hier" href="#">Rubrik eins</a></li>
<li><a href="nav-2.html">Rubrik zwei</a></li>
<li><a href="nav-3.html">Rubrik drei</a></li>
<li><a href="nav-4.html">Rubrik vier</a></li>
</ul>
</div>
      </div>

</body>

</html>

css-Code:
Code: 
html, body {
	margin: 0;
	padding: 0;
}
/*
body {
	background-color: green; }*/

#nav {
      width: 12em;
      height: 5em;
	   margin: 1px;
}

#nav a {
	width: 100%;
	display: block;
}

#nav ul.liste, #nav ul.sub {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.liste li {
	margin: 1px 0;
}

ul.sub li {
	margin-right: 12px;
}

ul.liste a {
	padding: 10px 0 10px 16px;
	background-color: #336699;
	border-left: 1px solid #000080;
	color: #FFF;
	font-family: Arial, Helvetica, sans-serif;
      font-size: 80%;
	text-decoration: none;
}

ul.sub a {
	padding-left: 28px;
	background-color: #CCCCFF;
	border-left: 1px solid #000080;
	color: #000;
	font-style: italic;
}

ul.liste a:hover {
	background-color: #CCCCFF;
	text-decoration: underline;
}

ul.sub a:hover {
	background-color: #CCCCFF;
}

ul.liste a.hier {
	background-color: #336699;
	border-left: 1px solid #ff0000;
	color: #fff;
}

ul.sub a.hier {
	background-color: #CCCCFF;
}

ul.liste a:hover.hier {
	text-decoration: none;
}

ul.liste a.hier2 {
	background-color: #336699;
	border-left: 1px solid #000080;
	color: #fff;
}
ul.liste a.hier3 {
  background-color: #CCCCFF;
}

a#skiplink { 
	position: absolute; 
	left: 0px; 
	top: -500px; 
	width: 1px; 
	height: 1px; 
	overflow: hidden; 
}

Danke im Voraus.
 
Zuletzt bearbeitet:
Hi,

könntest du bitte anstelle der gezeigten Listenstruktur den entsprechenden HTML-Code posten und im gezeigten CSS-Code die Selektoren in Absätzen zusammenfassen?

Code: 
html, body { margin: 0; padding: 0;}

#nav { width: 12em; height: 5em; margin: 1px;}

/* usw. */

Und benutze bitte für Quelltext-Angaben die Highlight-Tags im Editor (siehe Anhang), es erleichtert das Lesen ungemein, wenn sich der Quellcode vom normalen Beitragstext "absetzt".

Vielen Dank! ;)
 

Anhänge

  • texteditor.png
    texteditor.png
    3,9 KB · Aufrufe: 18
Ich habe da nun gemacht und möchte mich entschuldigen, ich wusste nicht, wie man das macht und hoffe, dass mir evtl. jemand bei meinem Problem helfen kann.
 
Danke für die Antwort. Das Problem liegt aber nicht im Aufklappmenu, das funktioniert ja einwandfrei. Es geht eigentlich um den Hintergrund, der im IE im Verhältnis zur Navigation zu breit ist (ich möchte ihn in gleicher Breite wie die Navigation), und komischerweise nur, wenn das Menue aufgeklappt ist, und nur im IE.
 
irena hat gesagt.:
Es geht eigentlich um den Hintergrund, der im IE im Verhältnis zur Navigation zu breit ist (ich möchte ihn in gleicher Breite wie die Navigation)
Zum Vergrößern anklicken....
Und genau aus diesem Grund habe ich dir dieses Beispiel empfohlen, denn für die eingerückten Links des Submenüs muß die Breite um das Maß der Einrückung (padding-left:28px) verringert werden, Stichwort: Boxmodell.
 
Ich habe jetzt also die Navigation nav auf 220 px breit statt auf 12 em gesetzt (externe CSS-Datei), den Container #subnavi (im HTML) ebenfalls auf 220px (äussere div, innere ist div nav der verschachtelt ist), dann im css dort wo die 28px sind, noch width: 192px; (also 28 pixel weniger breit) gesetzt und geändert hat sich gar nichts. Die hintere Box #subnavi ist immer noch breiter im IE6 als die innere Box mit der Navigation.

Es ist aber tatsächlich so, dass wenn ich die Einrückung padding-left: 28px weglasse, die subnavi Box richtig kommt, aber dafür die "Subboxen" der Navigation wieder nicht stimmen.

Jetzt weiss ich wirklich nicht mehr weiter. Gibt es nicht eine Browserweiche oder so etwas, womit man für den IE einfach eine andere Breite der hinteren Box definieren könnte?
 
Hi,

versuch es mal hiermit:

Code: 
#subnavi {
  background-color: #669999;
  width: 222px;
  height: 500px;
  float: left;
}

#nav {
      width: 220px;
      height: 5em;
      margin: 1px;
}

#nav a {
        /*width:100%;*/ /* auskommentiert = deaktiviert */
        display: block;
}

ul.sub li {
        /*margin-right: 12px;*/ /* auskommentiert = deaktiviert */
}

ul.liste a {
        width: 204px;
        padding: 10px 0 10px 16px;
        background-color: #336699;
        border-left: 1px solid #000080;
        color: #FFF;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 80%;
        text-decoration: none;
}

ul.sub a {
        width: 192px;
        padding-left: 28px;
        background-color: #CCCCFF;
        border-left: 1px solid #000080;
        color: #000;
        font-style: italic;
}
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück