webForumDet fria alternativet

Text-indent döljer LI i FF

HTML & CSSur HTML, XHTML & CSS

4 svar · 617 visningar · startad av thevice

theviceMedlem sedan dec. 2005198 inlägg
#1

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.

ejickMedlem sedan mars 2001895 inlägg
#2

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.

rhdfMedlem sedan okt. 2007446 inlägg
#3

testa att ersätta
text-indent: -13000em;
med
text-indent: -9999px;

Danne VMedlem sedan aug. 20068 090 inlägg
#4

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å?

rhdfMedlem sedan okt. 2007446 inlägg
#5

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

127 ms totalt · 3 externa anrop · v20260731065814-full.29ac60f6
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
124 ms — hämta tråd, inlägg och bilagor (db)