---
title: "vertikal meny med ikoner som rör sig"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/164312-vertikal-meny-med-ikoner-som-rör-sig"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "stompes"
published: "2007-09-09T13:35:50.000Z"
updated: "2007-09-09T16:12:28.000Z"
replies: 5
views: 573
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/164312-vertikal-meny-med-ikoner-som-rör-sig"
---

# vertikal meny med ikoner som rör sig

## #1 — stompes, 2007-09-09T13:35Z

Försöker skapa en vertikal meny, som består av en ikon och text därefter. Vill att ikonen ska röra sig när man drar musen över den.

har gjort den hät koden och den funkar perfekt i mozilla men brakar ihop helt i IE:

```
.reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
.reduced li {display:block; width:inherit; height:inherit; position:relative; padding-bottom:5px;}
.reduced li a {display:block; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
.reduced li a img {width:30%; height:80%; border:0; float:left;}
.reduced li a span {width:60%; height:20%; border:0; float:right; text-overflow:clip; text-decoration:none; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
.reduced li a:hover { left:-1px; top:-1px; z-index:100;}
```

 

och HTML:

```
<ul class="reduced" id="toolbox">
     <li><a href="#one"><img src="/images/test/image1.png" alt="image 1" title="image 1" /><span>lägg till användare</span></a></li>
      <li><a href="#two"><img src="/images/test/image2.png" alt="image 2" title="image 2" /><span>skapa rättigheter</span></a></li>
	<li><a href="#three"><img src="/images/test/image3.png" alt="image 3" title="image 3" /><span>ändra lösen ord</span></a></li>
	<li><a href="#four"><img src="images/test/image4.png" alt="image 4" title="image 4" /><span>spara användar historia</span></a></li>
</ul>
```

 

Nån som har nått tips på vad som kan vara galet?

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

## #2 — stompes, 2007-09-09T14:47Z

egentligen så splear det ingen roll om bilderna eller hela href taggen kan röra sig, huvudsaken är att bilden blir nerskalad och att det funkar i både mozilla och IE

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

## #3 — Danne V, 2007-09-09T15:35Z

Kollade inte koden. Men i princip så tar du en bild som bakgrund till "a" och en annan som bakgrund till "a:hover". Placera bakgrunderna till höger eller vänster eller var du nu vill ha dom, och lägg in bildernas bredd som padding till samma stilar. Ungefär så här:

```
a {
background-image:url(bild1.jpg)right no-repeat;
padding-right:20px;
}
a:hover {
background-image:url(bild2.jpg)right no-repeat;
padding-right:20px;
}
```

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

## #4 — stompes, 2007-09-09T15:50Z

denna kod fungerar i både IE och mozilla

```
.reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
.reduced li {display:block; width:100%; height:100%; position:relative; padding-bottom:5px;border-width: 1px; border-color:#000;}
.reduced li a {display:block; width:100%; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
.reduced li a img {width:30%;  border:0; float:left;}
.reduced li a span {width:60%; height:20%; border:0; float:left; text-overflow:clip; text-decoration:none; padding-left:5px; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
.reduced li a:hover { margin-left:1px; z-index:100; background: #333;}
```

 

Probelemt låg i bredden får inte vara ärvd i IE

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

## #5 — Danne V, 2007-09-09T16:06Z

> **stompes skrev:**
>
> denna kod fungerar i både IE och mozilla
> 
>
>
> ```
> .reduced {padding:0; margin:6px auto; list-style-type:none; text-align: left; }
> .reduced li {display:block; width:100%; height:100%; position:relative; padding-bottom:5px;border-width: 1px; border-color:#000;}
> .reduced li a {display:block; width:100%; width:inherit; height:inherit; background:transparent; display:block; overflow:hidden; position:relative; text-decoration:none;}
> .reduced li a img {width:30%;  border:0; float:left;}
> .reduced li a span {width:60%; height:20%; border:0; float:left; text-overflow:clip; text-decoration:none; padding-left:5px; padding-top:9px; padding-bottom:9px; text-overflow:ellipsis;}
> .reduced li a:hover { margin-left:1px; z-index:100; background: #333;}
> ```
>
>  
> 
> Probelemt låg i bredden får inte vara ärvd i IE

Jag har ingen aning. Men det ser ut som om du har öst in en väldans massa onödiga parametrar i dom där stilarna, och har span-klasser och jox. Är du verkligen säker på att du måste ha allt det där? Det ser liksom ut som om du ber om problem...

Kan du ladda upp sidan och ge en länk så att man får se rubbet?

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

## #6 — tanten, 2007-09-09T16:12Z

Blir lite nyfiken på varför du har både text-overflow:clip; och text-overflow:ellipsis; i ditt a span. Är det skillnad på webläsarna, som gör att du har det så? Vet att IE6, konstigt nog har stöd för denna som väl tillhör css3.  Undrar bara :-)

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

---

Tråden på webben: https://www.webforum.nu/amne/html-css/164312-vertikal-meny-med-ikoner-som-rör-sig