Avatar billede tweak Nybegynder
08. august 2005 - 12:02 Der er 30 kommentarer og
1 løsning

list-style-image

Hey,

Når jeg bruger list-style-image placeres billedet ikke midt for linket i IE, FF er der ingen problemer.?

Nogen der ved hvorfor.?
Avatar billede softspot Forsker
08. august 2005 - 12:38 #1
Bruger du list-style-position for at positionerer billedet?
Avatar billede tweak Nybegynder
08. august 2005 - 12:48 #2
Nej, sådan her:

li {
list-style-image: url(/billede.gif);
}

    <? // php loop for printing all the links
    for ($i=0; $i<=sizeof($files)-1; $i++) {
        $p1 = strrpos($files[$i],"/") + 1;
        $p2 = strpos($files[$i],".flv");
        $name = substr($files[$i],$p1,($p2-$p1));
        echo "    <li><a href=\"player.php?file=".($i+1)."\">".$name."</a></li>\n";
    } ?>
Avatar billede tweak Nybegynder
08. august 2005 - 12:48 #3
Men husk at det virker i FF.?
Avatar billede softspot Forsker
08. august 2005 - 12:51 #4
Jeg tror det har noget med forskel i standardværdier i de to browsere og at IE's udgangspunkt (hvis ikke andet er angivet) er anderledes end FF. Valg af DTD her sikkert også noget at sige i den sammenhæng, men hvilket du skal vælge er jeg ikke afklaret med. Bruger du noget DTD i øjeblikket?
Avatar billede tweak Nybegynder
08. august 2005 - 12:54 #5
Denne her på den side der er problemer med: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">

I FF er der også en mindre indrykning en i IE.
Avatar billede softspot Forsker
08. august 2005 - 12:57 #6
Næh, der tog jeg lige fejl af betydningen af list-style-position - det er ikke placering som jeg forventede... :(

Nå, men jeg så et online-seminar med en CSS-guru forleden og han anbefalede at man slog list-style-image fra og benyttede background-image på linket i stedet (med padding for at give plads til billedet).
Avatar billede tweak Nybegynder
08. august 2005 - 12:58 #7
Det er også galt i Opera
Avatar billede softspot Forsker
08. august 2005 - 12:59 #8
Jeg har f.eks. et stylesheet der ser således ud:

ul
{
    margin: 0px;
    padding:0px;
    list-style:none;
}
ul li
{
    display:inline;
    padding:0px;
}
ul li a
{
    padding:3px 0px 5px 25px;
    background: url(img/bullet2.gif) no-repeat 10px 5px;
}
Avatar billede softspot Forsker
08. august 2005 - 13:07 #9
Til dette benytter jeg flg. DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

men jeg er ikke klar over om et andet kan gøre tricket (det tror jeg, for jeg har gjort det før jeg så det klip på nettet ;))...
Avatar billede tweak Nybegynder
08. august 2005 - 13:08 #10
softspot, jeg kigger lige på det senere, jeg skal ud og køre nu ;)
Avatar billede softspot Forsker
08. august 2005 - 13:08 #11
god tur :)
Avatar billede jesper-moeller Nybegynder
08. august 2005 - 15:29 #12
Har du prøvet at med
img  { display: block }
i stylesheetet ?? ....
Avatar billede tweak Nybegynder
08. august 2005 - 20:19 #13
jesper-moeller, ved ikke hvor du vil hend.?

softspot, hvis jeg bruger:

ul li a
{
    padding:3px 0px 5px 25px;
    background: url(img/bullet2.gif) no-repeat 10px 5px;
}

og så retter padding:3px 0px 5px 25px; til padding:1px 0px 5px 25px;

Så rykker den ikke med ned.?

Kam du ikke lige prøve at skrive det hele inde i:

        echo "    <li><a href=\"player.php?file=".($i+1)."\">".$name."</a></li>\n";
    } ?>

Bare så jeg er sikker på jeg ikke laver noget forkert.?
Avatar billede jesper-moeller Nybegynder
08. august 2005 - 20:24 #14
--->
Har blot før set at  indsætte et display: block på billeder modvirke linieforskydning i IE ved stric DTD.... (Vist nok IE der faktisk gør det rigtige i den situation)
Avatar billede olebole Juniormester
08. august 2005 - 20:50 #15
<ole>

jesper-moeller >> Her er jo ikke tale om billeder - men baggrundsbilleder  ;o)

tweak >> background: url(img/bullet2.gif) no-repeat 10px 5px;

- de 10px angiver, hvorlangt inde billedet begynder ... de 5px, hvorlangt nede. Ret de to værdier, så de passer til dit billede  :)

/mvh
</bole>
Avatar billede tweak Nybegynder
08. august 2005 - 21:00 #16
Hey, jeg får stadig problemet: http://www.digitalife.dk/player.php?file=1
Avatar billede tweak Nybegynder
08. august 2005 - 21:16 #17
Jeg har skrevet den sådan:

ul
{
    margin: 0px;
    padding:0px;
    list-style:none;
}
ul li
{
padding:3px 0px 5px 25px;
color: #CCCCCC;
font-family: Courier New, Courier, mono, Verdana, Geneva, Arial, sans-serif;
font-size: 12px;
text-decoration:none;
background: url(/Logo/pijl_kort.gif) no-repeat 4px 10px;
}

og:

    <? // php loop for printing all the links
    for ($i=0; $i<=sizeof($files)-1; $i++) {
        $p1 = strrpos($files[$i],"/") + 1;
        $p2 = strpos($files[$i],".flv");
        $name = substr($files[$i],$p1,($p2-$p1));
        echo "  <a href=\"player.php?file=".($i+1)."\"><ul><li>".$name."</li></ul></a>\n";
    } ?>
Avatar billede softspot Forsker
08. august 2005 - 21:28 #18
Er det ok nu, for den side du refererer til ser da fin nok ud... eller hvad?
Avatar billede tweak Nybegynder
08. august 2005 - 21:29 #19
softspot, ja den er okay i IE, men nu står den for lavt i FF :^)
Avatar billede tweak Nybegynder
08. august 2005 - 21:32 #20
Men det passe med indrykningen, før var snow og video længere mod højre i IE end i FF. Men jeg kan ikke lige se hvordan jeg kan få dem til at stå lige højt i FF og IE :( Hele siden er her: http://www.digitalife.dk/test.php
Avatar billede olebole Juniormester
08. august 2005 - 21:33 #21
Jamen, det er da også noget helt andet, du har lavet. Nu lægger du jo hele lister ind i dine links  :)
Avatar billede tweak Nybegynder
08. august 2005 - 21:34 #22
Jeg fatter hat af det her :( Hvordan pokker skal det så skrives.?
Avatar billede olebole Juniormester
08. august 2005 - 21:36 #23
<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>
Avatar billede olebole Juniormester
08. august 2005 - 21:40 #24
- og så med den CSS, softspot viste dig i (08/08-2005 12:59:36) - men du skal naturligvis rette dimensioner, så de passer til dit eksempel.
Desuden må der ikke være mellemrum i CSS-properties ... hvis der er det, skal de escapes med gåseøjne:

font-family: 'courier new', courier, mono, verdana, geneva, arial, sans-serif;

- og brug lowercase, da ikke alle browsere kan lide uppercase font-angivelser  ;o)
Avatar billede softspot Forsker
08. august 2005 - 21:42 #25
...og prøv så med dette stylesheet:

.pil {
  position: absolute;
  top: 5px;
  left:325px;
}
.pil ul {
  margin:0px;
  padding:0px;
  list-style:none;
}
.pil ul li {
  padding:0px;
  display:inline;
}
.pil ul li a {
  padding:3px 0px 5px 25px;
  background: url(/Logo/pijl_kort.gif) no-repeat 4px 10px;
  color: #CCCCCC;
  font-family: Courier New, Courier, mono, Verdana, Geneva, Arial, sans-serif;
  font-size: 12px;
  text-decoration:none;
}
Avatar billede softspot Forsker
08. august 2005 - 21:42 #26
...og så med det olebole lige sagde om spaces i font-family navnene ;)
Avatar billede tweak Nybegynder
08. august 2005 - 21:49 #27
Så skulle de se ud som det skal :) MANGE tak for hjælpen, jeg har set mig helt blind på det :(

Jeg kan godt se jeg skal til at læse lidt mere på det hele ;)

Der er ikke så mange point at dele, men kan i ikke smide et svar.?
Avatar billede softspot Forsker
08. august 2005 - 21:51 #28
olebole >> dem får du! :)
Avatar billede olebole Juniormester
08. august 2005 - 22:10 #29
Nej, sq ikke - softspot! Du gav løsningen ... jeg bidrog blot med et lille skohorn. Ellers tak  ;o)
Avatar billede softspot Forsker
08. august 2005 - 22:33 #30
Jamen, hvis du insisterer, så vil jeg da lægge et svar :)

Tak til Jer begge :D
Avatar billede tweak Nybegynder
08. august 2005 - 22:35 #31
Det er mig som takker.!!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester