Darstellung stimmt nicht

N

napsi

Erfahrenes Mitglied
Hallo liebe Kollegen!

Habe ein CSS geschrieben und im IE wird einfach nicht das angezeigt, was ich programmiert habe.

Hier der Code:
HTML: 
<body>
<div id="pagewrap">

<div id="head">
	<img src="img/Style/Schriftzug.gif" style="margin-top:5px; margin-left:200px;">
	
	<div class="lauftext">
		<marquee scrollamount="5" scrolldelay="5">
			<a>test</a>
		</marquee>
	</div>
	
	<img src="img/Style/Logo.gif" style="margin-top:-90px; float:right; z-index:auto">

</div>
<div id="MainNav">
	<ul class="menu2">
		
	<li class="top"><a href="#" id="ergebnisse" class="top_link"><span>Ergebnisse</span></a></li>
	<li class="top"><a href="#" id="teams" class="top_link"><span>Mannschaften</span></a></li>
	<li class="top"><a href="#" id="news" class="top_link"><span>News</span></a></li>
	<li class="top"><a href="#" id="kontakt" class="top_link"><span>Kontakt</span></a></li>
	<li class="top"><a href="#" id="sponsor" class="top_link"><span>Sponsoren</span></a></li>
	<li class="top"><a href="#" id="links" class="top_link"><span>Links</span></a></li>
	<li class="top"><a href="#" id="derfc" class="top_link"><span>DerFC</span></a></li>
	
	</ul>
</div>	
	
<div id="SubFieldLeft">
<p>test</p>
</div>	
<div id="SubFieldLeft">
<p>test</p>
</div>	

</div>
</body>

Code: 
* {                           /* alle Elemente sollen urspruenglich keine Innen- und Aussenabstaende haben */
        margin: 0;
        padding: 0;
        /*border: 1px dashed red;*/
}

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


body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 12px;
        width: 1024px;
        margin: 0;
        padding: 0;
		background-color:#FFF;
}

div#pagewrap {
        width: 1022px;
}

#head {
	background-image:url(/img/Style/HeadImg.jpg);
	float:left;
	height:100px;
	width:100%;
	border:0px;
}

.lauftext {
	width:82%;
	height:20%;
	border:0;
	background-color:#FFF;
	margin-top:30px;
	margin-left:10px;
}

.lauftext a {
	font-size:14px;
	font-weight:normal;
	font-style:italic;
	color:#FF4B10;
}

#MainNav {
	margin-top:2px;
	width:100%;
	height:30px;
	border:2px;
	border-color:#FF4B10;
	background-color:#FFF;
	position:absolute;
}


.menu2 {
	padding:0; 
	margin:0; 
	list-style:none; 
	height:30px; 
	background-color:#FFFFFF; 
	position:relative; 
	z-index:200; 
	font-family:arial, verdana, sans-serif; 
	border-color:#FF4B10; 
	border-style:solid; 
	border:1px; 
	/*margin-top: 2px;*/
}

.menu2 li.top {
	display:block; 
	float:right;
}

.menu2 li a.top_link {
	display:block; 
	float:left; 
	height:21px; 
	line-height:18px; 
	color:#000000; 
	text-decoration:none; 
	font-size:14px; 
	font-weight:bold; 
	padding:0 0 0 12px; 
	cursor:pointer;
}

.menu2 li a.top_link span {
	float:left; 
	display:block;
	padding:0 24px 0 12px; 
	height:18px;
}

.menu2 li a.top_link span.down {
	float:left; 
	display:block; 
	padding:0 24px 0 12px; 
	height:18px;
}

.menu2 li:hover a.top_link, #menu2 a.top_link:hover {
	color:#FFFFFF; 
	background-color:#FF4B10;
}

.menu2 li:hover a.top_link span, #menu2 a.top_link:hover span {
	background-color:#FF4B10;
}

.menu2 li:hover a.top_link span.down, #menu2 a.top_link:hover span.down {
	padding-bottom:3px;
}

.menu2 table {
	border-collapse:collapse; 
	padding:0; 
	margin:0; 
	position:absolute; 
	left:0; 
	top:0;
}

.menu2 li:hover {
	position:relative; 
	z-index:200;
}

.menu2 a:hover {
	position:relative; 
	white-space:normal; 
	z-index:200;
}

#SubFieldLeft {
	margin-top:2px;
	width:200px;
	height:350px;
	border:2px;
	border-color:#FF4B10;
	background-color:#FFF;
}

#SubFieldLeft p {
	font-size:14px;
	font-weight:normal;
	font-style:italic;
	color:#FF4B10;
}


#SubFieldRight {
	
}

Der Rahmen wird nicht angezeigt, die navigation ist über den #head gelegt, sollte aber 2 px unterhalb sein, selbiges mit den # auf der seite, kein rahmen, kein abstand,...

ich denke mal, das es wieder mal nur eine kleinigkeit ist, aber welche?

hier der testlink von mir: http://testbild.mgloop.at/

bitte um hilfe.


lg.

napsi
 
Zuletzt bearbeitet:
napsi hat gesagt.:
Habe ein CSS geschrieben und im IE wird einfach nicht das angezeigt, was ich programmiert habe.



Der Rahmen wird nicht angezeigt, die navigation ist über den #head gelegt, sollte aber 2 px unterhalb sein, selbiges mit den # auf der seite, kein rahmen, kein abstand,...
Zum Vergrößern anklicken....
In den anderen Browsern sieht's auch nicht besser aus, also nicht immer auf dem armen "IE" herumhacken :p
 
das ist mir schon klar, dass es in den anderen vermutlich nicht stimmt. habe auch nicht auf dem IE herumgehackt, sondern derzeit nur den zum testen.

verstehe das problem nicht, da ich so schon so viele seiten gemacht habe und jede funktioniert.
 
Wo kein Rahmen erscheint, fehlt in deinen Regelmengen die border-style-Eigenschaft, und border erwartet mehr, als nur die Rahmenstärke.

Wenn die Navigation unterhalb des Headers erscheinen soll, mußt du position:relative anstelle von position:absolute deklarieren.
 
Danke, hat sich aber auch nicht geändert, die navigation ist immer noch über dem head, leider, habe das eh schon versucht gehabt
 
Dann leer mal deinen Browsercache, und ruf die Seite anschliessend neu auf, denn bei mir erscheint die Navigation nun unterhalb des Headers.
 
nein, der rahmen mit dem weißen hintergrund bleibt über dem header gelegt, die navpunkte sind eh unterhalb.
 
Tja, wer floatet, muß anschliessend auch ordnungsgemaäß clearen - sprich #MainNav mit clear:left formatieren, damit der Umfluß von #head abgebrochen wird.

Soviel zum Thema "Browser zeigt nicht das an, was ich programmiert habe".
 
danke, hatte ich auch schon mal, aber irgendwie passte anscheinend die kombination damals nicht.

danke nochmals

lg.

napsi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück