4 svar · 627 visningar · startad av thevice
Hejsan,
Försöker få till en meny med ul och li. För att snygga till det lite så har jag valt att ta bort texten i mina länkar och ersätter de med en bakgrund istället. Problemet är att när jag har sätter text-indent: -13000em; på mina länkar så försvinner alla mina LI och man ser inger i FireFox. Det fungerar i IE.
Kod:
#header ul {
float: right;
}
#header ul li {
float: left;
display:inline;
list-style: none;
margin: 40px 10px;
}
#header ul li a,
#header ul li a:hover {
background: url(Images/Menu.gif) no-repeat 0 0;
height: 13px;
display: block;
text-indent: -13000em;
}
#header ul li a#homepage:link { width: 72px; }
#header ul li a#homepage:hover { background-position: 0 -13px; }
#header ul li a#links:link { width: 50px; background-position: -72px 0; }
#header ul li a#links:hover { background-position: -72px -13px; }
#header ul li a#information:link { width: 82px; background-position: -122px 0; }
#header ul li a#information:hover { background-position: -122px -13px; }
#header ul li a#images:link { width: 45px; background-position: -204px 0; }
#header ul li a#images:hover { background-position: -204px -13px; }
#header ul li a#quiz:link { width: 29px; background-position: -249px 0; }
#header ul li a#quiz:hover { background-position: -249px -13px; }
#header ul li a#about:link { width: 92px; background-position: -278px 0; }
#header ul li a#about:hover { background-position: -278px -13px; }
Min HTML kod är bara:
<ul>
<li><a id="homepage" href="Default.aspx" title="Startsidan">Startsidan</a></li>
<li><a id="links" href="Links.aspx" title="Länkar">Länkar</a></li>
<li><a id="information" href="Information.aspx" title="Information">Information</a></li>
<li><a id="images" href="Images.aspx" title="Bilder">Bilder</a></li>
<li><a id="quiz" href="Quiz.aspx" title="Quiz">Quiz</a></li>
<li><a id="about" href="About.aspx" title="Om ThinkFirst">Om ThinkFirst</a></li>
</ul>
Tack på förhand.
Efter en snabb koll kan jag misstänka att problemet är att du har text-indent på både a, och a:hover,
prova att bara ha det bara på a. Alltså
#header ul li a {
text-indent: -13000em;
overflow: hidden;
}
Kan dock inte svara på att detta löser det, men misstänker det som sagt. Lycka till.
testa att ersätta
text-indent: -13000em;
med
text-indent: -9999px;
Utan att testa i praktiken:
Det verkar vanskligt att dona med negativa värden på en indent. Kan tänka mig att en del webbläsare sparkar bakut. Kan du inte bara sätta padding-left på ul då?
det är nog ingen fara att ha negativa värden, bara man håller sig inom vettiga gränser
13000em är ju lite luddigt eftersom em är ett relativt mått, därför blir nog FF förvirrad, särskilt om man inte har resten av sidans mått angivet i em
