---
title: "Text-indent döljer LI i FF"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/178407-text-indent-döljer-li-i-ff"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "thevice"
published: "2009-05-04T21:27:40.000Z"
updated: "2009-05-06T09:29:08.000Z"
replies: 4
views: 627
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/178407-text-indent-döljer-li-i-ff"
---

# Text-indent döljer LI i FF

## #1 — thevice, 2009-05-04T21:27Z

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.

Permalänk: https://www.webforum.nu/p/178407

## #2 — ejick, 2009-05-06T08:17Z

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.

Permalänk: https://www.webforum.nu/p/2184149

## #3 — rhdf, 2009-05-06T09:02Z

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

Permalänk: https://www.webforum.nu/p/2184151

## #4 — Danne V, 2009-05-06T09:06Z

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

Permalänk: https://www.webforum.nu/p/2184152

## #5 — rhdf, 2009-05-06T09:29Z

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

Permalänk: https://www.webforum.nu/p/2184153

---

Tråden på webben: https://www.webforum.nu/amne/html-css/178407-text-indent-döljer-li-i-ff