[cyprus]

Hallo ich hab ein vertikales Menü gebaut. Da es als Template für Typo3 herhalten soll sind die Menüpunkte und der Hintergrund getrennt. Wenn ich mit der Maus drüberfahre soll sich der Button austauschen. Im Firefox läufts super aber im IE 6
springen die darunterliegenden Button ca 5px nach unten. Auch ist im IE nur der Text anklickbar. Ich denke das dieses Problem nicht neu ist aber ich such jetzt ne Stunde und kann irgendwie keine Lösung finden. Die FAQ sind leider auch nciht mit dem Problem vertraut.
Deshalb bitte ich um Hilfe. Vielen Dank im vorraus.

Mein HTML

 <!-- ###MENU_LINKS### Start -->
<ul>
<li><a href="allgemeine Info">Allgemeine Info</a></li>
<li><a href="suche">Suche</a></li>
<li><a href="biete">Biete</a></li>
<li><a href="service">Service</a></li>
<li><a href="ueber uns">Über uns</a></li>
<li><a href="Preise">Preise</a></li>
<li><a href="AGB">AGB</a></li>
<li><a href="Kontakt">Kontakt</a></li>
</ul>
 <!-- ###MENU_LINKS### Stop -->
<!--id="nav_seite"--></div>

Das CSS dazu:

#nav_seite{
	float:left;
	width:300px;
}
#nav_seite li {
	text-decoration: none;
	padding: 0em;
	background-image: url(../iredia-Dateien/SUB4_BUTTON_GRUEN.jpg);
	height:40px;
	}
	
#nav_seite  a {
	display: block;
	font-size:1.2em;
	padding-top: 15px;
	padding-left:70px;
	color: #E7DA7C;
	}
#nav_seite :hover {
	background-image: url(../iredia-Dateien/SUB4_BUTTON-WEISS.jpg);
	height:40px;
	}

[cyprus]

Sorry aber hat noch keiner von euch dieses Phänomen gehabt?

[heiko_rs]

Zuerst siehe mein FAQ-Beitrag, und dann:

#nav_seite :hover {
	background-image: url(../iredia-Dateien/SUB4_BUTTON-WEISS.jpg);
	height:40px;
	}

Was genau willst Du hovern? Das mußt Du schon noch angeben. Aber da der IE < 7 eh nur a hovert, mußt Du auch a:hover nehmen (und ggf. background der li-Regel anpassen). Und wenn Du beim Hovern eine Höhe angibst, die im "Normalzustand" nicht dasteht (der IE geht bei dieser falschen Syntax offensichtlich von a aus, wohl weil er eh nur a hovert), springt's natürlich beim Hovern.

Allerdings ist eine feste Höhe eh nicht sinnvoll (Textvergrößerung).

EDIT: Du kannst doch nicht ernsthaft schon nach 1 Stunde schieben...

[IChao]

Ich glaube, ":hover" allein steht für "*:hover" und ist damit erlaubt, weil der Universalselektor in einem solchen simplen Selektor weggelassen werden kann.

[cyprus]

Das mit dem a: hab ich schnell gemerkt aber das wars nicht. Ich hab in dem Forum ne stunde gesucht davor habe ich mir alle möglichen Skripte reingezogen.
Aber das wars alles nicht.

Ich habs dann doch noch hingekriegt. Mein CSS sieht jetzt so aus:

#nav_seite{
	float:left;
	width:300px;
}
#nav_seite li {
	text-decoration: none;
	padding: 0em;
	
	
	}
	
#nav_seite  a {
	display: block;
	background-image: url(../iredia-Dateien/SUB4_BUTTON_GRUEN.jpg);
	background-repeat: no-repeat;
	height:30px;
	font-size:1.2em;
	padding-top: 15px;
	padding-left:70px;
	color: #E7DA7C;
	}
#nav_seite  a:hover {
	
	background-image: url(../iredia-Dateien/SUB4_BUTTON-WEISS.jpg);
	background-repeat: no-repeat;
	height:30px;
	}

Allerdings sind jetzt die Abstände zwischen den Button ca. 3-5 px zu weit. Das mach ich heute. Ich bin ehrlich warum der Fehler aufgetreten ist ist mir nicht klar. Auch nicht warum er jetzt weg ist. Wenn jemand ne Erklärung dazu abgeben kann wär das sicherlich spannend.

Liebe Grüße

Cy

[heiko_rs]

Zitat von IChao

Ich glaube, ":hover" allein steht für "*:hover" und ist damit erlaubt

Stimmt, und auch der FX interpretiert es korrekt (das hatte ich gar nicht ausprobiert).

Zitat von cyprus

Das mit dem a: hab ich schnell gemerkt aber das wars nicht.

Natürlich nicht, aber ich hatte Dir die Lösung doch schon geschrieben:

Zitat von heiko_rs

wenn Du beim Hovern eine Höhe angibst, die im "Normalzustand" nicht dasteht (...), springt's natürlich beim Hovern.

Dein erstes CSS hatte keine Höhe für a im Normalzustand, aber für :hover height: 40px;. Jetzt haben sowohl a als auch a:hover height: 30px (was überflüssig ist, background-image reicht, da einzige Änderung), also springt's auch nicht mehr.

An dieser Stelle nochmal der Rat, height komplett rauszuwerfen.

[cyprus]

height hatte ich schon mal komplett raus aber dann wird der Button abgeschnitten.

Zu deinem Einwand: Hab ich dir schon beschrieben.

Ohne dir zu nahe treten zu wollen, und unter berücksichtigung das du immer sehr hilfsbereit bist und meist die richtigen Enwände und Tips hast.
Es ist nicht leicht deinen Gedankengängen zu folgen. Ich komme eigentlich aus dem Flash Lager und ich weiß wie nervig das sein kann immer wieder dieselben Neulings-Fragen zu beantworten, aber wir haben alle mal angefangen und manche Sachen sind total easy und andere wollen einfach nicht klar werden. Aber nur durch solche Fragen und Leute wie euch die darauf eingehen geht das lernen.
Bücher und Tutorials helfen da nur begrenzt. Und ich muß gestehen das ich aus solchen Problemen und diesen Diskussionen mehr lerne als aus jedem Buch.

Ein kleines Beispiel. float hab ich mittlerweile klar vor einer Woche sah das noch ganz anders aus. Und dafür muß ich mich direkt bei dir bedanken, weil du mir auf die Füße getreten hast und mich nicht im Regen stehen gelassen hast.

Ich hoffe noch auf viele Probleme und viele Anregeungen.

Nebenbei bemerkt ist CSS ne geile Sache. Ich habe HTML immer gehast aber das hier ist oberklasse!

Bis denne

Cy

[heiko_rs]

Zitat von cyprus

height hatte ich schon mal komplett raus aber dann wird der Button abgeschnitten.

Dann vergib ausreichend vertikales padding und/oder min-height (height nur für IE < 7), aber nie eine feste Höhe für textenthaltende Elemente, denn dann wird bei Textvergrößerung alles zerschossen.

[Dirk1]

Als überwiegend lesender Teilnehmer dieses Forums möchte ich mal ein Lob loswerden:

An dieser Stelle nochmal der Rat, height komplett rauszuwerfen.

Dann vergib ausreichend vertikales padding und/oder min-height (height nur für IE < 7), aber nie eine feste Höhe für textenthaltende Elemente, denn dann wird bei Textvergrößerung alles zerschossen.

Sehr gute Ratschläge sind das!!!
Gerade hatte ich ein optisch ganz ähnliches Problem, das nur scheinbar ganz anders gelagert zu sein schien.

Die Suche nach height in Text enthaltenden Elementen brachte die Lösung!