Avatar billede sqwer Nybegynder
28. august 2004 - 21:57 Der er 6 kommentarer og
1 løsning

Firefox: img i span - forklaring ønskes

Jeg har lavet et meget lille eksempel som indeholder to billeder der ligger i hvert sit span. Eksemplet giver ret forskellige resultater i NS/Firefox og IE/Opera, er der nogen der kan forklare mig hvorfor?
Jeg går ud fra at svaret indeholder noget med "Firefox gør det rigtigt og IE/Opera tager fejl", men hvorfor kan jeg ikke få en span til at omslutte et billede i Firefox (billedet rager jo langt uden for rammen)? Begge dele er inline-elementer svjv, men det er tilsyneladende ikke nok...


--- kode ---
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.test {
border: solid 1px;
width: 30%;
}
.test img {
width: 40%;
}
-->
</style>
</head>
<body>
<span class='test'><img src='billede.gif'></span>
<span class='test'><img src='billede.gif'></span>
</body>
</html>
Avatar billede knudgert Nybegynder
28. august 2004 - 23:22 #1
At sætte width på et billede med css kan være noget bøvl.
Sæt width på selve billedet i stedet for.
<img src='billede.gif' width="40%" alt="alttekst">

Der er også den fordel, at når du sætter width (og height) på selve billedet, så afsætter browseren plads til billedet med det samme og opbygningen af siden bliver pænere under load.
Avatar billede skovenborg Nybegynder
28. august 2004 - 23:30 #2
Du bliver nok nødt til at bruge div-elementer i dette tilfælde. Span-elementer er, som du selv siger, inline-elementer, og det betyder bla. at deres størrelse ikke umiddelbart ændres som andre block-elementer. I dette tilfælde bliver højden altså heller ikke større end en linies højde, og ikke i forhold til billedets.

Så løsningen er altså enten at bruge et div-element (evt. med float:left; hvis du gerne vil have placeret billeder ved siden af hinanden) eller ved at give billedet en border istedet for det omkransende element.
Avatar billede skovenborg Nybegynder
28. august 2004 - 23:33 #3
hov, ja det ser ud til at man ikke kan definere bredden på billedet oppe i selve stylen, så min forklaring var vist ikke helt rigtig. Du kan dog godt sætte en style nede i selve img-elementet, sådan her:
<img src='billede.gif' style="width:40%" alt="alttekst">
hvilket også virker fint.
Avatar billede knudgert Nybegynder
29. august 2004 - 02:55 #4
Det er en rigtig dårlig ide at angive størrelser på billeder med css, brug den "gammeldags" måde i stedet for, det er langt bedre og er fuld valid i alle former for (x)html, selv strict.
Avatar billede sqwer Nybegynder
29. august 2004 - 21:25 #5
Takker.
Hvad med at sætte klassen direkte på billedet i stedet for et span (altså "<img class='x' src='billede.gif'>" og ".x { width: 40%; }")? Så vidt jeg kan se giver det samme resultat som det du foreslår, men giver det nogle andre problemer jeg ikke lige har opdaget?
Point på vej til knudgert, jeg skal bare lige høre hvad I siger til det sidste spørgsmål først :).
Avatar billede olebole Juniormester
30. august 2004 - 19:00 #6
<ole>

Ehhhh ... knudgert og skovenborg skylder vist en forklaring  :)

sqwer kan sagtens sætte et billedes dimensioner i sit stylesheet - forudsat han bruger CSS korrekt. Så er det endda en _overordentlig_ god idé.

Det betyder (hvis billedet skal have sat relative dimensioner), at billedets omkransende element har fået sat sine dimensioner (enten inline eller i stylesheet'et). Det gælder ikke specielt for billeder, men for alle HTML-elementer.

Dette volder f.eks. overhovedet ingen problemer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>TITLE</title>
<style type="text/css">
body, html {
    height: 100%;
    margin: 0px;
}
.im {
    width: 45%;
}
</style>
</head>
<body>

<div style="width:200px;height:200px">
    <img class="im" src="my_pic.jpg" onclick="alert(this.width)">
</div>

</body>
</html>

/mvh
</bole>
Avatar billede sqwer Nybegynder
22. september 2004 - 20:54 #7
>ole
Du svarer nu heller ikke selv på spørgsmålet, som var hvorfor jeg ikke kunne få det til at køre med spans. At det kunne gøres med div'er vidste jeg godt, med det var ikke det jeg spurgte om ;)
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