---

Jeg forsøger at skifte den sorte plet foran et <li> element i en <ul> ud
med et lille grafikfirkant, som meget lidt sigende har navnet arrow.png.

Til det står der følgende i min CSS-fil:

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
background-image: url(../images/arrow.png) ;
background-repeat: no-repeat;
background-position: 0px 3px;
}

og det virker faktisk ganske fint i IE, som ellers har givet mig grå hår
i hovedet på andre punkter.

Men i Firefox 1.5 ender der med først at være den normal sorte plet og
ved siden af den min lille grafikfirkant anbragt foran hvert <li>
element. Og det ser jo ikke så smart ud.

Kan jeg gøre det på en anden måde, som virker med Firefox?

---

"Holst" <newsjan06@shelter.dk> skrev i en meddelelse
news:43d0c934$0$38660$edfadb0f@dread12.news.tele.dk...
>
> Jeg forsøger at skifte den sorte plet foran et <li> element i en <ul> ud
> med et lille grafikfirkant, som meget lidt sigende har navnet arrow.png.
>
> Til det står der følgende i min CSS-fil:
>
> li
> {
> line-height: 15px;
> padding-left: 15px;
> padding-top: 0px;
> background-image: url(../images/arrow.png) ;
> background-repeat: no-repeat;
> background-position: 0px 3px;
> }
>
> og det virker faktisk ganske fint i IE, som ellers har givet mig grå hår i
> hovedet på andre punkter.

Background-image er ikke den rigtige måde at gøre det på. Du skal bruge

list-style-image: url(ditbilede.gif);-- Med venlig hilsenCarsten
SørensenNørholm Forsamlingshus - http://forshus.dk

---

Hej Holst!
"Holst" <newsjan06@shelter.dk> skrev i en meddelelse
news:43d0c934$0$38660$edfadb0f@dread12.news.tele.dk...
>
> Jeg forsøger at skifte den sorte plet foran et <li> element i en <ul> ud
> med et lille grafikfirkant, som meget lidt sigende har navnet arrow.png.
>
> Til det står der følgende i min CSS-fil:
>
> li
> {
> line-height: 15px;
> padding-left: 15px;
> padding-top: 0px;
> background-image: url(../images/arrow.png) ;
> background-repeat: no-repeat;
> background-position: 0px 3px;
> }
>
> og det virker faktisk ganske fint i IE, som ellers har givet mig grå hår i
> hovedet på andre punkter.
>
> Men i Firefox 1.5 ender der med først at være den normal sorte plet og ved
> siden af den min lille grafikfirkant anbragt foran hvert <li> element. Og
> det ser jo ikke så smart ud.
>
> Kan jeg gøre det på en anden måde, som virker med Firefox?

Det skyldes sikkert, at du skriver det lidt forkert i dit stylesheet - prøv
med dette:

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
list-style-type: url(../images/arrow.png) ;
}

Og ikke andet - dit ikon skal ikke sættes som baggrund, men som
list-elementet istedet...
Har ikke testet det, men er ret sikker på, at det virker - også i FF...


Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.eds-denmark.dk/

---

Dennis Munding wrote:

> li
> {
> line-height: 15px;
> padding-left: 15px;
> padding-top: 0px;
> list-style-type: url(../images/arrow.png) ;
> }

Jeg ændrede list-style-type ovenfor til list-style-image, som CS også
skrev, også virker det sådan nogenlunde i Firefox. Der er dog meget
la-a-a-ngt mellem grafikken og teksten til højre derfor. Det er som om,
der nu er et tomt hul, hvor den dobbelt prik/grafik var før.

Og ... i IE er der nu slet ingen plet.

Jeg brugte præcis:

li
{
line-height: 15px;
padding-left: 15px;
padding-top: 0px;
list-style-image: url(../images/arrow.png) ;
}

---

Holst wrote:

> Jeg ændrede list-style-type ovenfor til list-style-image, som CS også
> skrev, også virker det sådan nogenlunde i Firefox. Der er dog meget
> la-a-a-ngt mellem grafikken og teksten til højre derfor. Det er som om,
> der nu er et tomt hul, hvor den dobbelt prik/grafik var før.

Du skal lige huske på at nulstille dine
liste-marginer og padding:
ul, ol {margin:0;padding:0;}
IE og Gecko har to forskellige metoder til at sætte luft
foran en liste.



--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk

---

Jørgen Farum Jensen wrote:

> Du skal lige huske på at nulstille dine
> liste-marginer og padding:
> ul, ol {margin:0;padding:0;}

Jeg vil kigge på det. Tak. CSS er meget nyt for mig, så jeg må blankt
erkende, at jeg ikke ved meget om det, men det kommer måske løbende. Med
lidt held kan min viden om CSS blive lige så ringe som min viden om HTML

---

Holst skrev:

> Jeg vil kigge på det. Tak. CSS er meget nyt for mig, så jeg må blankt
> erkende, at jeg ikke ved meget om det

Topstyle Lite har været og er mig en stor hjælp til at hitte rede
i hvad man kan med CSS. Det er gratis:

http://www.bradsoft.com/index.asp

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Jørgen Farum Jensen wrote:

> Du skal lige huske på at nulstille dine
> liste-marginer og padding:
> ul, ol {margin:0;padding:0;}

Det hjalp ikke meget. Til gengæld ændrede jeg min li til:

li
{
line-height: 15px;
margin : 0px 0px 0px 0px;
padding-left: 0px; /* ændret fra 15px */
padding-top: 0px;
list-style-image: url(../images/arrow.png) ;
list-style-position: outside;
}

hvilket giver næsten samme resultat. Det virker under Firefox, for nu er
afstanden mellem grafikklatten og teksten normal igen (ændring af
padding-left fra 15px til 0px. Men under IE er der stadig ingen lille
grafikklat inden teksten.

Ændrer jeg derimod margin til 0px 0px 0px 15px, så dukker grafikklatten
op i IE. Til gengæld bliver hele listen forskudt endnu længere mod højre
i Firefox.

Det kunne være rart, hvis de var enige.

---

Holst wrote:
>
> Jørgen Farum Jensen wrote:
>
>> Du skal lige huske på at nulstille dine
>> liste-marginer og padding:
>>
>
>
> Det hjalp ikke meget. Til gengæld ændrede jeg min li til:
>
> li
> {
> line-height: 15px;
> margin : 0px 0px 0px 0px;
> padding-left: 0px; /* ændret fra 15px */
> padding-top: 0px;
> list-style-image: url(../images/arrow.png) ;
> list-style-position: outside;
> }

Jmen det er de nu en gang ikke, men jeg glemte nok at
skrive det hele, som er

ul, ol {margin:0;padding:0;}
ul.minliste {
padding-left:1.5em;
margin-left:0;
}

--

Med venlig hilsen

Jørgen Farum Jensen
http://www.webdesign101.dk
..

---

Jørgen Farum Jensen wrote:

> ul, ol {margin:0;padding:0;}
> ul.minliste {
> padding-left:1.5em;
> margin-left:0;
> }

Nu kom det vist til at virke. Umiddelbart ser de nu nogenlunde ens ud
både i IE og Firefox. Tusind tak for hjælpen.

---

Hej Holst!
"Holst" <newsjan06@shelter.dk> skrev i en meddelelse
news:43d0d2fd$0$38732$edfadb0f@dread12.news.tele.dk...
> Jeg ændrede list-style-type ovenfor til list-style-image, som CS også
> skrev, også virker det sådan nogenlunde i Firefox. Der er dog meget
> la-a-a-ngt mellem grafikken og teksten til højre derfor. Det er som om,
> der nu er et tomt hul, hvor den dobbelt prik/grafik var før.

Ja, selvfølgelig skulle det være list-style-image - min fejl...

> Og ... i IE er der nu slet ingen plet.
>
> Jeg brugte præcis:
>
> li
> {
> line-height: 15px;
> padding-left: 15px;
> padding-top: 0px;
> list-style-image: url(../images/arrow.png) ;
> }

Kan være, at du skal ændre "li {..." til "ul {...", men jeg er ikke
sikker...


Med venlig hilsen
--
Dennis Munding
Web-master
http://www.skovaa-munding.dk/, http://www.mundings-memorial.dk/
http://www.cantica.dk/, http://www.eds-denmark.dk/

---

Holst skrev:

> meget la-a-a-ngt mellem grafikken og teksten til
> højre derfor. Det er som om, der nu er et tomt hul,
> hvor den dobbelt prik/grafik var før.
>
> Og ... i IE er der nu slet ingen plet.

Vis os din side, så er det meget nemmere at hjælpe
dig.

--
Allan Vebel
http://html-faq.dk