IE Bug Bild doppelt?

[DavidBrechtens]

Hallo zusammen, ich hoffe ihr könnt mir helfen:

Folgendes, ic hhabe eine einfache horizontale Navigation mit einem Hintergrund versehen. Im IE8 wird dieser Hintergrund jedoch unter der Navigation nochmals angezeigt obwohl ich no-repeat verwende.

Hier mal ein Screenshot:



So sieht der betroffene Teil der CSS aus:

#nav { overflow: hidden;}
#nav ul { margin-left: -12px; }
.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: Arial, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;
	}
.menu ul{
	background: url("../../images/nav_bg.gif");
	background-repeat: no-repeat;
	height:36px;
	width: 1040px;
	list-style: none;
	margin:0;
	padding: 11px 0 0 67px;
	
	}
	.menu li{
		float:left;
		padding:0;
		}
	.menu li a{
		color:#000;
		display:inline;
		font-weight:normal;
		margin:0px;
		padding:5px 2px 5px 0;
		text-decoration:none;
		}
	
		.menu li a:hover, .menu ul li:hover a{
			color:#FFFFFF;
			text-decoration:none;
			}
	.menu li ul{
		background:#e60004;
		display:none;
		height:auto;
		padding:0px;
		margin:2px 0px 0px 0px;
		border:0px;
		position:absolute;
		width:225px;
		z-index:1;
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:225px;
		}
	.menu li:hover li a{
		background:none;
		
		}
	.menu li ul a{
		display:block;
		height:25px;
		font-size:12px;
		font-style:normal;
		margin:0px;
		padding:0px 10px 0px 10px;
		text-align:left;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			border:0px;
			color:#ffffff;
			font-weight:bold;
			text-decoration:none;
			background-color: #c70003;
			}
	.menu p{
		clear:left;
		}

Und so der Teil in der index.html:

<div id="nav">
        <div class="menu">
          <ul>
			<li><a href="index.html" ><em>Vermietung von</em></a> | </li>
			<li><a href="index.html"><em>Bagger</em></a> | 
				<ul>
					<li><a href="katalog/kettenbagger.jpg" rel="lightbox"><em>Kettenbagger</em></a></li>
					<li><a href="katalog/langarmbagger.jpg" rel="lightbox"><em>Langarmbagger</em></a></li>
					<li><a href="katalog/mobilbagger.jpg" rel="lightbox"><em>Mobilbagger</em></a></li>
					<li><a href="#"><em>Zubehör Bagger</em></a></li>
                    <li><a href="katalog/minibagger.jpg" rel="lightbox"><em>Minibagger</em></a></li>
					<li><a href="#"><em>Zubehör Minibagger</em></a></li>
		      </ul>
		  </li>
			<li><a href="katalog/radlager.jpg" rel="lightbox"><em>Radlager</em></a> | </li>
			<li><a href="katalog/planierraupe.jpg" rel="lightbox"><em>Planierraupen</em></a> | </li>
            <li><a href="index.html"><em>Walzen</em></a> | 
				<ul>
					<li><a href="katalog/tandemwalze.jpg" rel="lightbox"><em>Tandemwalzen</em></a></li>
					<li><a href="katalog/grabenwalze.jpg" rel="lightbox"><em>Grabenwalzen</em></a></li>
					<li><a href="katalog/walzenzug.jpg" rel="lightbox"><em>Walzenzüge</em></a></li>
		      </ul>
            <li><a href="katalog/raddumper.jpg" rel="lightbox"><em>Raddumper</em></a> | </li>
			<li><a href="katalog/kipper.jpg" rel="lightbox"><em>LKW-Kipper</em></a> | </li>
            <li><a href="index.html" id="current"><em>Arbeitsbühnen</em></a> | 
				<ul>
					<li><a href="katalog/scherenbühne.jpg" rel="lightbox"><em>Scherenbühne</em></a></li>
					<li><a href="katalog/gelenkteleskop.jpg" rel="lightbox"><em>Gelenkteleskop-Arbeitsbühne</em></a></li>
		      </ul>
           <li><a href="katalog/ruettelplatte.jpg" rel="lightbox"><em>Rüttelplatten</em></a></li>
		</ul>
 </li>
</ul>
        </div>
      </div>

 

[sokie]

AW: IE Bug Bild doppelt?

in deiner CSS wird nicht sichtbar, dass der Container #nav eine höhe hätte. Ohne Höhe ist ein wert für overflow nicht besonders sinnvoll.

 

[DavidBrechtens]

AW: IE Bug Bild doppelt?

Vielen Dank, daran hats gelegen!