[css] Menu bij hover verdwijnt de tekst

Door Raymond --- op 04-07-2006 20:54

868 views

Ik heb een probleem, ik ben een beetje aan het klooien met een website (let niet op de inhoud, wordt nog anders) raymond.phpnet.us staat een menu. In ff ziet het menu er verder goed uit, ook bij hover. Maar nu ga ik naar IE daar krijg ik het volgende probleem:
Zodar ikover de link ga gaat de tekst weg. Wat kan ik hier aan doen?

Mijn menu (html)


<div class="buttonscontainer">
		<div class="buttons">
			<a href="index.php">Home</a>
			<a href="tut.php">Tutorials &#38; Scripts</a>
			<a href="link.php">Links</a>
			<a href="forum.php">Forum</a>
			<a href="faq.php">FAQ</a>
		</div>
	</div>

mijn menu (css):


.buttonscontainer {
	width: 140px;
}
.buttons a {
	color: #ffff00;
	background-color: #cc0033;
	padding: 2px;
	padding-left: 3px;
	display: block;
	border-left: 10px solid #f7941d;
	font: 12px Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
	text-align: left;
	margin-top: 1px;
	width: 100%;
}
.buttons a:hover {
	color: #ffff00;
	border-left: 10px solid #ffc56b;
	text-decoration: none;
	width: 100%;
}

PS het lukte me niet om een mooi menu te maken, dus dit menu is gemaakt met een menugenartor. Ik heb die genartor als basis gebruikt en verder zelfklueren ea opties gedaan.

ArendJan

04-07-2006 20:58

Ik zou het niet weten? Misschien iets met dit? --> text-decoration: none;

Jelmer -

04-07-2006 21:00

hoort geen kwaat te kunnen, ik zie trouwens zo ook even geen fouten. Probeer eens een voor een een eigenschap bij a:hover weg te halen en zo kan je zien aan welke het ligt. Ik kan het helaas niet voor je doen, aangezien ik geen IE heb.

Danny K

04-07-2006 21:05

je doet width en padding-left samen..
dat mag niet samen.. dat geeft problemen..
je kan bijv inplaats van width: 100% ook margin: 0; zetten.

Maar i kzie dat hij het inmiddels doet :)

Raymond ---

04-07-2006 21:12

Danny schreef op 04.07.2006 21:05
je doet width en padding-left samen..
dat mag niet samen.. dat geeft problemen..
je kan bijv inplaats van width: 100% ook margin: 0; zetten.

Maar i kzie dat hij het inmiddels doet :)

Zie jij dat hij het inmiddels doet? Dan zie je meer dan mijIk heb nog niks veranderd en bij mij doet hij het nog steeds niet, ik NU die oplossing van jou proberen

Jan Koehoorn

04-07-2006 21:15

Even over semantiek:

Een menu is van nature een lijst. Het is dan ook correcter om een menu niet in een serie divs te zetten, maar om een <ul> te gebruiken, gevuld met <li> tags.

@Danny: een width en een padding-left samen kan prima, geeft geen problemen.

@Raymond: gebruik de juiste volgorde voor de pseudo-classes, dan gaat het in alle browsers goed:

a:link
a:visited
a:hover
a:active

Dit is ook echt de volgorde waarin ze moeten staan. Meestal worden ze zo gegroepeerd:

a:link, a:visited {

}
a:hover, a:active {

}

Raymond ---

04-07-2006 21:17

Ok nu geeft hij hover weer zo als hij moet zijn nu de rest nog :S

ik heb width: 100% veranderd in margin: 0

EDIT:
Jan, ik ga het proberen

Raymond ---

04-07-2006 21:22

Jan, beadnkt! Het werkt! (ik ga nu ook nog even proberen of ik niet iets zelf kan maken met LI zoals jij zij

Jan Koehoorn

04-07-2006 21:34

@Raymond:
stel je hebt je menu zo:


<ul class="menu">
    <li><a href="#">item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
</ul>

dan kun je je CSS zo doen:


* {
	margin: 0px;
	padding: 0px;
}
ul.menu {
	list-style-type: none;
}
ul.menu a:link, ul.menu a:visited {
	text-decoration: none;
	color: red;
}
ul.menu a:hover, ul.menu a:active {
	text-decoration: none;
	color: blue;
}

Reageren

Inloggen om te reageren