Text verschiebt sich ungewollt nach unten

Ich schreibe gerade an einer Seite auf welcher ich eine neue Navigation im Registerkarten-Stil teste. Dabei verschiebt sich der Text in der Registerkarte allerdings ungewollter Weise nach unten.

Hier erstmal ein Screenshot der Seite:

Oben in den Registerkarten verschiebt sich der Text "Test" weiter nach unten, sogar aus dem DIV raus. Der Text sollte mit dem "Testlink" auf einer höhe liegen.

Hier der Quelltext der Seite:

<html>

	<head>
		<title>Testseite</title>
		<link rel="stylesheet" type="text/css" href="styles/style.css">  
	</head>
	
	<body bgcolor="FFE8D6">  
		<!-- Außenrand-->
<table width="100%" height="100%"  border="0" cellpadding="0" cellspacing="0">   
  <tr> 
    <td valign="middle">  
		
		<div class="outerdiv">  
		
		<img src="images/header.png">  
		
				<div align="center" class="naviyes"><p class="navi">Test</p></div><div align="center" class="navino"><a class="navi" href="index.html">Testlink</a></div><div class="navino" align="center"><p class="navi">Test</p></div><div align="center" class="navino"></div>		  
		
				<div class="innerdiv">  
				<p>Testtesttest.<br></div>

		</div>
	</td></tr></table>
	</body>

</html>

und hier das CSS:

div.outerdiv {
	background-image: url(../images/png.png);
	background-repeat:no-repeat;
	background-position:center;
	margin: 5em 5em 5em 5em;
	padding-left:50px;
	padding-right:170px;
	width:730px;
	height: 580px;
	border:1px solid EE6C39;
	margin: auto;}

div.navino {
	float: left;
	position: relative;
	width:182px;
	height:35px;
	border-bottom:1px solid EE6C39;
	border-top:1px transparent;
	border-left:1px transparent;
	border-right:1px transparent;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px}
	
div.naviyes {
	float: left;
	position: relative;
	width:182px;
	height:35px;
	background-image: url(../images/white_t.png);
	border-bottom:1px transparent;
	border-top:1px solid EE6C39;
	border-left:1px solid EE6C39;
	border-right:1px solid EE6C39;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px}
	
div.innerdiv {
	position: absolute;
	font-family: Arial;
	font-size: 13px;
	background-image: url(../images/white_t.png);
	width:628px;
	height: 300px;
	border-bottom:1px solid EE6C39;
	border-left:1px solid EE6C39;
	border-right:1px solid EE6C39;
	border-top:0px transparent;
	padding-left: 50px;
	padding-right: 50px;
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 36px;}
	
p.navi {
	font-family: Arial;
	font-size: 20px;
	color: #EE6C39;}

a.navi:hover {
	font-family: Arial;
	font-size: 20px;
	color: #EE6C39;
	text-decoration: none;}

a.navi:visited {
	font-family: Arial;
	font-size: 20px;
	color: #F9A870;
	text-decoration: none;}

a.navi:link {
	font-family: Arial;
	font-size: 20px;
	color: #F9A870;
	text-decoration: none;}

Kann mir da jemand helfen? Ich hab schon alles probiert.

Danke schonmal,

Grüße,
Max aka v3rtico

Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben

Content-ID: 102145

Url: https://administrator.de/contentid/102145

Ausgedruckt am: 05.11.2024 um 17:11 Uhr

2 Kommentare

Neuester Kommentar

<div align="center" class="navino">
<p class="navi"><a class="navi" href="index.html">Testlink</a></p>

</div>

hat bei mir im firefox funktioniert...

wenn ich mich recht erinnere gab es da irgendeine einschränkung, was im <div> verschaltet werden darf... oder so ähnlich...

vielleicht hilft es ja weiter...

gruss, mike