menü "rutsch runter"?!

freakincage2008

hallo!
ich habe ein problem mit meiner webseite, und zwar habe ich bon einem benutzer rückmeldung erhalten, dass bei einer älteren IE - Version mein gesamter inhalt (also alle buttons) nach unten rutschen wenn man mit der maus auf die drüber fährt. ich habe den fehler selbst noch nicht gesehen obwohl ich mehrere browser und betriebssysteme getestet habe und da ich (leider) kein spezialist bin in sachen html und css würde ich euch mal bitte nen blick auf den quelltext zu werfen. hab auch schon dreamweaver auf fehler überprüfen lassen, hat aber nichts gefunden.
hier der quelltext:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<META NAME="Keywords" CONTENT="TC H&uuml;ttersdorf,TC,TC86 H&uuml;ttersdorf,TC Huettersdorf,Huettersdorf,H&uuml;ttersdorf,TC86 Huettersdorf,TC 86 H&uuml;ttersdorf,TC 86 Huettersdorf,Kia Motors,Kia Motors Cup,Tennis,Tennisclub,Kribser,Kribser Cup">
<META NAME="description" CONTENT="Webseite des Tennisclub H&uuml;ttersdorf">
<title>TC '86 H&uuml;ttersdorf</title>
<link rel="stylesheet" type="text/css" href="style.css" >
</head>


<body>
<div class="top">
</div>


<div class="middle">
<div class="menue">
<div class="menue1">


[url='http://www.tc86huettersdorf.de/']Startseite/News[/url]
[url='http://www.tc86huettersdorf.de/verein/index.htm']Der Verein[/url]
[url='http://www.tc86huettersdorf.de/anlage/index.htm']Die Anlage[/url]
[url='http://www.tc86huettersdorf.de/mannschaften/index.htm']Die Mannschaften[/url]
[url='http://www.tc86huettersdorf.de/jugend/index.htm']Jugendabteilung[/url]
[url='http://www.tc86huettersdorf.de/bildergallerie/index.htm']Bildergalerie[/url]
[url='http://www.tc86huettersdorf.de/turniere/index.htm']Turniere[/url]
[url='http://www.tc86huettersdorf.de/ergebnisse/index.htm']Ergebnisse/Spielpl.[/url]
[url='http://www.tc86huettersdorf.de/anfahrt/index.htm']Anfahrt[/url]
[url='http://www.tc86huettersdorf.de/mitglied/index.htm']Mitglied werden[/url]
[url='http://www.tc86huettersdorf.de/trainer/index.htm']Unsere Trainer[/url]
[url='mailto:info@tc86huettersdorf.de']E-M@ail[/url]
[url='http://www.tc86huettersdorf.de/guestbook/index.htm']G&auml;stebuch[/url]






<div style="width: 145px; height:120px;">
<font face="Comic Sans MS" size="1">letzte Aktualisierung:
Fr 06.05.08 21.30Uhr


Besucher seit 01.04.08:</font>


[img]/tinc?key=cEmptmaC[/img]
</div>
</div>
</div>


<div class="inhalt">

... hier steht mein inhalt von der webseite.....


</div>
<div style="clear:both;"></div>
</div>


<div class="bottom">
     </div>


</body>
</html>

Alles anzeigen

und css:

Code

body {
background-image:url(images/design/bg.png);
}


.top{
  background:url(images/design/top1.png);
  margin:auto;
  height:87px;
  width:918px;
}


.middle{
  background:url(images/design/mitte.png);
  margin:auto;
  height:auto;
  width:918px;
  clear:both;


}




.bottom{
  background:url(images/design/unten.png);
  margin:auto;
  height:34px;
  width:918px;


}


.menue{
	float:left;
	background-image:url(images/design/menue.png);
	height: 500px;
	Width : 160px;
	margin-left: 2px;
	display:inline;




}


.menue1{
	height: 500px;
	Width : 160px;
	margin-top:30px;
	}








.inhalt{
float: right;
margin-top: 20px;
display:inline;
margin-right: 25px;
width: 730px;


}


.newstop{
	background-color: #cac8ca;
	width: 90%;
	margin: auto;
	margin-top:40px;
	font-family: Comic Sans MS;
	  font-size:14px;
	      font-weight: normal;
}


.news{
 	width: 90%;
	margin: auto;
	margin-top: 5px;
	font-family: verdana;
	font-size:12px;


}




a.normal {color: #000000;} 
a.normal:hover {color: #99aa45;} 
a.normal:visited {color: #000000;} 
a.normal:visited:hover {color: #99aa45;} 






a.inhalt {
	float:left;
	color: #EBEFD1;
      display:block;
      width: 142px;
      height: 18px;
	margin-right:0px;
      padding-top: 2px;
	padding-left: 3px;
      font-size:13px;
      font-family:Comic Sans MS;
      font-weight: normal;
      text-decoration:none;
      text-align:left;
      margin-top: 3px;
      background-image:url(images/design/button.png);




      }
a.inhalt:hover {
	float:left;
	color: #EBEFD1;
      display:block;
      width: 142px;
      height: 18px;
	margin-right:0px;
      padding-top: 2px;
	padding-left: 3px;
      font-size:13px;
      font-family:Comic Sans MS;
      font-weight: normal;
      text-decoration:none;
      text-align:left;
      margin-top: 3px;
      background-image:url(images/design/hover.png);
      }

Alles anzeigen

wie das ganze aussieht könnt ihr euch dann auch auf http://www.tc86huettersdorf.de anschauen!

tschau

sejuma

Ich habe leider kein alten IE zum Testen parat.
Aber deine Hintergrundgrafiken sind beim Hovern ja breiter als beim normalen Link.

Passe deshalb mal bei

Code

a.inhalt:hover

den width-Wert so an, dass er dem der breiteren Hover-Hintergrundgrafik entspricht.

freakincage2008

sorry verstehe ich jetzt nicht... die hintergrundgrafiken haben genau die gleiche breite: http://www.tc86huettersdorf.de/images/design/hover.png bzw. http://www.tc86huettersdorf.de/images/design/button.png
und in der css datei sind die werte auch alle identisch?! oder übersehe ich da jetzt was?

sejuma

Da hast du recht. Die Buttons sehen nur rein optisch breiter aus.

Folgendes könntest du mal noch ausprobieren (alternativ oder auch zusammen):

1. Die CSS-Datei so ergänzen:

Code

* {
	margin: 0;
	padding: 0;
	}

2. statt display: block; mal mit display: inline; versuchen (block ergibt sich durch automatisch float)

3. Wenn das nichts hilft:
Die Navi in Listenform umbauen wie hier ff beschrieben.

menü "rutsch runter"?!

Tags

Benutzer online in diesem Thema