Navigation Liste im IE Falsch

S

Sleepy_J

Grünschnabel
Hallo, ich hoffe jemand kann mir bei meinem "kleinen" Problem helfen:

Ich habe eine Navigation erstellt, die aber bei sämtlichen IE versionen falsch dargestellt wird, bzw. überhaupt nicht.

Mit denn restlichen Bekannten Browsern funkt. es tadellos. Habe im Internet und auch hier einige Lösungsansätze gefunden, aber bei mir will nichts klappen.



HTML: 
<nav>
                           <ul>
                            <li><a href="index.html" class="current">Home</a></li>
                            <li><a href="index-1.html">Ueber uns</a></li>
                            <li><a href="index-2.html">Dienstleistungen</a></li>
                            <li><a href="index-3.html">Services</a></li>
                            <li><a href="index-4.html">Links</a></li>
                            <li class="last"><a href="index-5.html">Kontakt</a></li>
                            </ul>
                            </nav>


Code: 
.list1 {
		padding-bottom:5px;
	}
		.list1 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list1 li a {
				color:#aeaeae;
				text-decoration:none;
			}
			.list1 li a:hover {
				text-decoration:underline;
			}
	
	.list2 {
		padding-bottom:5px;
	}
		.list2 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list2 li a {
				color:#1c7e98;
				text-decoration:none;
			}
			.list2 li a:hover {
				text-decoration:underline;
			}



Wäre froh wenn mir jemand helfen könnte bzw. einen Ansatz gibt wo der Fehler liegt...
 
Zeig mal bitte den gesamten HTML-Code oder besser einen Link auf die Seite damit man sehen kann was überhaupt falsch dargestellt wird.
 
HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
  <title></title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
  <link rel="stylesheet" href="css/style.css" type="text/css" media="all"> 
 <!--[if IE]>
    <style type="text/css">
	
	</style>
  <![endif]-->
</head>

<body onselectstart="return false" ondragstart="return false"
      oncontextmenu="return false" oncontext="return false" id="page1">
  <div id="main">
  	<!-- header -->
    <header>
      <h1><a href="index.html"></a></h1>
    </header>
    <!-- .box -->
    <div class="box">
    	<div class="border-top">
      	<div class="border-right">
        	<div class="border-bot">
          	<div class="border-left">
            	<div class="left-top-corner">
              	<div class="right-top-corner">
                	<div class="right-bot-corner">
                  	<div class="left-bot-corner">
                    	<div class="inside">
                      	<nav>
                        	<ul>
                          	<li><a href="index.html" class="current">Home</a></li>
                            <li><a href="index-1.html">Ueber uns</a></li>
                            <li><a href="index-2.html">Dienstleistungen</a></li>
                            <li><a href="index-3.html">Services</a></li>
                            <li><a href="index-4.html">Links</a></li>
                            <li class="last"><a href="index-5.html">Kontakt</a></li>
                          </ul>
                        </nav>
                        <div class="banner">
                          <a href="#"><link href="index.html"><img src="http://www.tutorials.de/images/fot2.jpg"></a>
                        </div>
                        <div id="content">
                          <div class="wrapper">
                          	<div class="mainContent">
                            	<div class="row-1 outdent">
                              	<!-- .box1 -->
                              	<div class="box1">
                                	<div class="inner">
                                  	<h2>Wir verlieren ihre ziele nicht aus denn augen!<span>learn about us</span></h2>
                                    <h5>Sed ut perspiciatis, unde omnis iste natus error sit volum accusantium doloremque laudantium totam rem aperiam vetore explicabo.</h5>
                                    <div class="wrapper">
                                    	<img src="http://www.tutorials.de/images/1page-img1.jpg" alt="" class="img-indent">
                                      Unde omnis iste natus error sit volum accusantium doloremquetium, totam rem aperiam. vetore explicabo. nemo enim ipsam voluptteuia voluptas sit, aspernatur aut odit aut fugit, sed nseqoiumagdolores. eos, qui ration volup tatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur adipis...
                                    </div>
                                   <!-- <a href="#" class="link1">Erfahren sie mehr</a> -->
                                  </div>
                                </div>
                              	<!-- /.box1 -->
                              </div>
                            	<div class="row-2">
                              	<!-- .box1 -->
                              	<div class="box1">
                                	<div class="inner">
                                  	<h2>Featured servises<span>Aliquam congue fermentum</span></h2>
                                    <h5>Unde omnis iste natus error sit volumccuntium doloremque laudantium, totam rem aperiam. vetore explicabo nemo enim ipsam voluptatem, quia voluptas sit, aspernatur. </h5>
                                    <p>Nulla venenatis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim, pulvinar ac, lorem. Vestibulum sed ante. Donec sagittis euismod purus.</p>
                                    <div class="wrapper">
                                    	<ul class="list1 col-1">
                                      	<li><a href="#">Lorem ipsum iaculipede mnisl ullamcorpermass</a></li>
                                        <li><a href="#">A acotetuer feipsum eget pedec massa ulla</a></li> 
                                      </ul>
                                    	<ul class="list1 col-2">
                                      	<li><a href="#">Ullamcorpermassa,consectetuer feipsum eget</a></li>
                                        <li><a href="#">Pedegw roin nunc donec massa ulla pulvinar</a></li>
                                      </ul>
                                    </div>
                                    <a href="#" class="link1">more services</a>
                                  </div>
                                </div>
                              	<!-- /.box1 -->
                              </div>
                            </div>
                            	
                              
                              
                                                  
                                             </div>
                                         </div>
                                       </div>
                                    </div>
                                </div>
                              </div>
                            	<!-- /.box2 -->
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
    <!-- /.box -->
    <!-- footer -->
    <footer>
      <a href="http://"></a>
       | <a href="index-6.html">Impressum</a>    </footer>
</body>
</html>


Code: 
/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: block; }

/* Globale Einstellungen ======================================================== */
body { 
	background: url(../images/carbon.jpg); 
	font-family:Tahoma, Geneva, sans-serif;
	font-size:100%; 
	line-height:1.0625em;
	color:#5f5f5f;
}
html { min-width:941px;}




html, body { height:100%;}



/* Globale Structur ============================================================= */
#main {
	margin: 0 auto;
	position: relative;
	width: 941px;
	position:relative;
	font-size:.69em;
}

	/* Header */
	header{
		height:86px;
		overflow:hidden;
		position:relative;
	}
	
	/* Content */
	#content {
		padding:15px;
	}
	.mainContent {
		float: left;
		width:552px;
		margin-right:15px;
	}
	.mainContent.left {
		margin-left:15px;
		margin-right:0;
	}
	




/* Left & Right alignment */

.fleft { float:left;}
.fright { float:right;}
.clear { clear:both;}

.col-1, .col-2, .col-3 { float:left;}

.alignright { text-align:right;}
.aligncenter { text-align:center;}

.wrapper { 
	width:100%;
	overflow:hidden;
}

/* The inside class provides consistent padding. To be used often! */
.inside{ padding: 20px; }


/*----- form defaults -----*/
input, select, textarea { 
	font-family:Tahoma, Geneva, sans-serif;
	font-size:1em;
	vertical-align:middle;
	font-weight:normal;
}

/*----- other -----*/
.img-indent { 
	margin:5px 26px 0 0; 
	float:left;
}
.img-box { 
	width:100%; 
	overflow:hidden; 
	padding-bottom:20px;
}
	.img-box img { 
		float:left; 
		margin:5px 26px 0 0;
	}

.extra-wrap { 
	overflow:hidden;
}

p {margin-bottom:17px;}
.p1 { margin-bottom:8px;}
.p2 { margin-bottom:17px;}
.p3 { margin-bottom:25px;
}


/*----- txt, links, lines, titles -----*/
a {
	color:#1c7e98; 
	outline:none;
}
a:hover{
	text-decoration:none;
}

h1 {
	font-size:22px;
	line-height:1.2em;
	font-weight:normal;
	background:url(../images/logo.gif) no-repeat 0 0;
	padding:15px 0 15px 53px;
	text-transform:uppercase;
	position:absolute;
	left:38px;
	top:401px;
}
	h1 a {
		color:#fff;
		text-decoration:none;
	}
h2 {
	background:url(../images/title-line.gif) no-repeat 0 0;
	padding:0 0 0 13px;
	text-transform:uppercase;
	color:#fff;
	font-size:16px;
	margin-bottom:21px;
}
	h2 span {
		font-size:12px;
		display:block;
		color:#525252;
	}
h3 {
	background:url(../images/title-bg.gif) no-repeat 0 0;
	height:34px;
	line-height:34px;
	text-transform:uppercase;
	color:#cecece;
	font-size:15px;
	text-indent:24px;
}
h4 {
	font-size:15px;
	color:#fff;
	text-transform:uppercase;
	margin-bottom:16px;
	padding:8px 0 0 0;
}
h5 {
	font-size:1em;
	color:#aeaeae;
	margin-bottom:1em;
}

.link1 { 
	background:url(../images/arrow1.gif) no-repeat 100% 5px;
	padding:0 8px 0 0;
}



/*==================boxes====================*/
.box {
	background:#000;
	width:100%;
}
	.box .border-top {
		background:url(../images/border-top.gif) repeat-x left top;
	}
	.box .border-bot {
		background:url(../images/border-bot.gif) repeat-x left bottom;
	}
	.box .border-left {
		background:url(../images/border-left.gif) repeat-y left top;
	}
	.box .border-right {
		background:url(../images/border-right.gif) repeat-y right top;
	}
	.box .left-top-corner {
		background:url(../images/left-top-corner.gif) no-repeat left top;
	}
	.box .right-top-corner {
		background:url(../images/right-top-corner.gif) no-repeat right top;
	}
	.box .left-bot-corner {
		background:url(../images/left-bot-corner.gif) no-repeat left bottom;
		width:100%;
		}
	.box .right-bot-corner {
		background:url(../images/right-bot-corner.gif) no-repeat right bottom;
		}
	.box .inside { 
		padding:23px 24px 25px 26px;
	}
		
		
		.box nav {
			background:url(../images/nav-bg.gif) 0 0 repeat-x;
			overflow:hidden;
			margin-bottom:1px;
			height:48px;
		}
			.box nav ul li {
				float:left;
				background:url(../images/divider.gif) no-repeat 0 0;
				padding-left:1px;
			}
			.box nav ul li.last {
				width:145px;
			}
				.box nav ul li a {
					float:left;
					font-size:13px;
					color:#fff;
					text-decoration:none;
					width:148px;
					text-align:center;
					height:47px;
					line-height:47px;
					border:0 none;
				}
				.box nav ul li a:hover, .box nav ul li a.current {
					background:url(../images/nav-bg-act.gif) 0 0 repeat-x;
					border; 1px solid;
				}
				


.box1 {
	background:url(../images/box1-bg.gif) 0 0 repeat-x #090909;
	width:100%;
}
	.box1 .inner {
	padding:50px 50px 50px 50px;
	}
	
	


.box2 {
	background:#000;
	width:100%;
	margin-bottom:12px;
}
.box2.last {
	margin-bottom:0;
}
	.box2 .border-top {
		background:url(../images/border-top1.gif) repeat-x left top;
	}
	.box2 .border-bot {
		background:url(../images/border-bot1.gif) repeat-x left bottom;
	}
	.box2 .border-left {
		background:url(../images/border-left1.gif) repeat-y left top;
	}
	.box2 .border-right {
		background:url(../images/border-right1.gif) repeat-y right top;
	}
	.box2 .left-top-corner {
		background:url(../images/left-top-corner1.gif) no-repeat left top;
	}
	.box2 .right-top-corner {
		background:url(../images/right-top-corner1.gif) no-repeat right top;
	}
	.box2 .left-bot-corner {
		background:url(../images/left-bot-corner1.gif) no-repeat left bottom;
		width:100%;
		}
	.box2 .right-bot-corner {
		background:url(../images/right-bot-corner1.gif) no-repeat right bottom;
		}
	.box2 .inner { 
		padding:10px 24px 5px 24px;
	}
	.box2 .inner1 { 
		padding:10px 24px 15px 24px;
	}

.address { 
	float:left;
	line-height:14px;
}
	.address dt {
		margin-bottom:16px;
	}
	.address dd { 
		clear:both;
	}
		.address dd span { 
			float:left;
			width:70px;
		}


.banner {
	height:240px;
	overflow:hidden;
}

/*===== content =====*/
#content .outdent {
	padding-bottom:12px;
}
	
	.list1 {
		padding-bottom:5px;
	}
		.list1 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list1 li a {
				color:#aeaeae;
				text-decoration:none;
			}
			.list1 li a:hover {
				text-decoration:underline;
			}
	
	.list2 {
		padding-bottom:5px;
	}
		.list2 li {
			background:url(../images/arrow1.gif) no-repeat 0 6px;
			padding:0 0 5px 9px;
		}
			.list2 li a {
				color:#1c7e98;
				text-decoration:none;
			}
			.list2 li a:hover {
				text-decoration:underline;
			}
	
	

/*===== footer =====*/
footer {
	color:#5d5d5d;
	padding:2px 0 20px 66px;
	text-align:center;
}
	footer a {
		color:#5d5d5d;
	}


/*----- forms -----*/
#contacts-form fieldset {
	border:none;
	width:100%;
	overflow:hidden;
	display:block;
	color:#aeaeae;
	font-weight:bold;
}
	#contacts-form .col-1 {
		width:246px !important;
		margin-right:0 !important;
	}
	#contacts-form .col-2 {
		width:246px !important;
		margin-right:0 !important;
	}
	#contacts-form label {
		display:block;
		height:44px;
		overflow:hidden;
	}
		#contacts-form input {
			color:#111;
			border:1px solid #a09b96;
			background:#fff;
			padding:2px 0 2px 5px;
			width:200px;
		}
		#contacts-form textarea {
			color:#111;
			border:1px solid #a09b96;
			background:#fff;
			padding:2px 0 2px 5px;
			width:240px;
			overflow:auto;
			height:100px;
			margin-bottom:12px;
		}
/*==========================================*/
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück