✔ Navigation im IE6 geht nicht

[daniel2001]

IE7 und Firefox stellen die Seite korrekt da.

IE6 lässt den Inhalt aus dem Content-Div wenn er länger ist als das Navigations-Div unten diesem Div herlaufen :-(

Kann man irgendwie umgehen? Hier die Quelltexte

Html

<div id="container">

<div id="head">
Kopfleiste
</div>

	<div id="navigation">

	<div class="balken-nav">
	.::Navigation::.
	</div>

	<ul id="navi">
	<li><a href="index.html">Home</a></li>
	<li><a href="aktuell.html">Aktuelles</a></li>
	<li><a href="index.html">Home</a></li>
	<li><a href="aktuell.html">Aktuelles</a></li>
	<li><a href="index.html">Home</a></li>
	<li><a href="aktuell.html">Aktuelles</a></li>
	<li><a href="index.html">Home</a></li>
	<li><a href="aktuell.html">Aktuelles</a></li>


	</ul>

	<div class="balken-nav">
	.::Besucher::.
	</div>
Counter
	</div>




<div id="content">
Content.......
</div>

CSS

	body
	{
		background-color: #FFFFFF;
		margin: 0;
		padding: 0;
		font-size:0.8em;
		font-family: verdana, geneva, helvetica, sans-serif;
	}

	#container
	{
		margin: 10px auto;
		width: 940px;
		background-color: white;
		border: 1px solid black;


	}

	#content
	{
		padding:5px;
		color:black;
		background-color: #fafafa;
		overflow: auto;
		min-height:475px;
	}



	.balken
	{
		height:21px;
		line-height:21px;
		font-size:11px;
		font-weight : bold;
		text-transform : uppercase;
		text-align : left;
		letter-spacing : 1px;
		text-align:center;
		background: url(images/balken.jpg);
		color:white;
		clear:left;
	}
	
.balken-nav
	{
		height:21px;
		line-height:21px;
		font-size:11px;
		font-weight : bold;
		text-transform : uppercase;
		text-align : left;
		letter-spacing : 1px;
		text-align:center;
		background: url(images/balken.jpg);
		color:white;
		clear:left;
	}

* html .balken-nav {  /* nur fuer Internet Explorer */
  width:140px;     /* Version 5.x */
  w\idth:140px;    /* Version 6 */
}




	#contents
	{

		padding:5px;
		min-height:560px;
	  	height:auto !important;  /* für moderne Browser */
  		height:560px;  /*für den IE */
		float:left;
		width:420px;
	        background-color: white
	}

	#head
	{
		height: 85px;
		background-color: #333;
	}

	#footer
	{
		clear:both;
		height: 20px;
		background-color: black;
		border-top: 1px solid white;
		color:white;
	}


       
	#navigation
	{
		background-color: white;
		width:140px;
		padding:5px 0px 5px 5px;
		float:left;
                font-size:0.9em;
                color:black;

	}

* html #navigation {  /* nur fuer Internet Explorer */
  width:143px;  float:left;   /* Version 5.x */
  w\idth:143px; float:left;   /* Version 6 */
}

 

[Maik]

Hi,

dies kann man ganz einfach mit einem linken Außenabstand für #content umgehen:

        #content 
        {
                padding:5px;
                color:black;
                background-color: #fafafa;
                overflow: auto;
                min-height:475px;
                margin-left:0 !important; /* Moderne Browser */
                margin-left:140px; /* IE6 */
        }

oder alternativ zur angewandten !important-Regel mit Hilfe eines "Conditional Comments":

<style type="text/css">
...
        #content /* Hier ändert sich nichts */
        {
                padding:5px;
                color:black;
                background-color: #fafafa;
                overflow: auto;
                min-height:475px;
        }
...
</style>
<!--[if lt IE 7]>
<style type="text/css">
        #content
        {
                margin-left:140px;
        }
</style>
<![endif]-->

mfg Maik

 

[daniel2001]

Super, hat funktioniert!

Tolles Forum, weiter so!