CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

du3n Nybegynder

18. december 2008 - 18:34 Der er 11 kommentarer og
1 løsning

Fjerne mellemrum under img i XHTML/CSS

Hej eksperter,

Jeg ved ikke om det her det rette forum at skrive i, men jeg er støt på et problem under udviklingen af en ny side. Jeg er for nyeligt kastet mig ud i XHTML og er derfor ikke helt forvant til alle de faste regler der gælder.
Mit problem er at når jeg lægger min kode ind i en XML fil kommer der mellemrum imellem mine billeder, som det ses her:

http://www.estadio.dk/Andet/design/index.xml

Når jeg laver det om til en HTML-fil og fjerner den indledende XML inde i filen, forsvinder mellemrummene som der er mellem billederne. Dvs. problemmet opstår ikke i simpel HTML, men hvad skal jeg gøre nu hvor jeg gerne vil kode i XHTML/CSS?

Synes godt om

mireigi Novice

18. december 2008 - 18:43 #1

Du har en del fejl af typen:
<img style="margin:0px;border=0"...

Flyt "border=0" ud som en property, eller omskriv den til "border:none;" i style-property'en

Du kan også prøve følgende:
<table style="margin:0px;" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0px;">
<img style="margin:0px; border:none; padding:0px;" src=".." alt="" />
</td>
<td style="padding:0px;">
<img style="margin:0px; border:none; padding:0px;" src=".." alt="" />
</td>
...
...
</tr>
</table>

Synes godt om

du3n Nybegynder

18. december 2008 - 19:00 #2

Hmm har rettet mine fejl med border i img og prøvet dit andet forslag, men der er stadig mellemrum under billederne...

Synes godt om

micc Nybegynder

18. december 2008 - 20:02 #3

Jeg tror dit problem kommer af at billeder vises (eller i hvert fald bør vises) som inline-level elementer under xhtml-strict. Hvis det er tilfældet så kan du komme af med mellemrummet ved at bruge:

img

Synes godt om

micc Nybegynder

18. december 2008 - 20:04 #4

Det blev sendt af sted lidt for tidligt ved et uheld. :) Jeg prøver igen:

Jeg tror dit problem kommer af at billeder vises (eller i hvert fald bør vises) som inline-level elementer under xhtml-strict. Hvis det er tilfældet så kan du komme af med mellemrummet ved at bruge:

img {
display: block;
}

i din css.

Synes godt om

du3n Nybegynder

21. december 2008 - 00:23 #5

Cool, nu forsvandt mellemrummet under img, men nu laver den automatisk linjeskift efter hver billed, er det noget der kan undgåes? Eller må jeg billederne ind i en tabel på at få dem på linje?

Synes godt om

du3n Nybegynder

21. december 2008 - 00:27 #6

Lige meget hvad kan du da lige smide et svar, du har jo om ikke andet svaret på det jeg spurgte efter.

Synes godt om

mireigi Novice

21. december 2008 - 01:01 #7

Prøv med "display: inline-block;"

Synes godt om

du3n Nybegynder

21. december 2008 - 10:36 #8

inline-block fjerner linje skiftet mellem billederne, men fjerne ikke mellemrummet under billedet.

Synes godt om

mireigi Novice

21. december 2008 - 12:11 #9

så må det her vel virke:
display: block;
float:right;

Synes godt om

micc Nybegynder

21. december 2008 - 22:00 #10

Float lyder helt klart som en bedre løsning end tabeldesign. Så behøver du imidlertid ikke bruge
display: block;
da en float-værdi forskellige fra 'none' tvinger elementet til at være block-level uanset display-værdi.

Og hvis den boks hvori de floatede img elementer er ikke har yderligere indhold så kan du tilføje noget i retning af
<div style="clear:both;"></div>
i slutningen af boksens indhold hvis du vil have den til at udvide sig til at indeholde de floatede elementer. :)

Synes godt om

du3n Nybegynder

22. december 2008 - 21:10 #11

Mange tak, det fungeret perfekt.

God jul :D

Synes godt om

olebole Juniormester

04. januar 2009 - 21:11 #12

<ole>

Dette vil altid give et mellemrum under billedet i IE (HTML eller XHTML er ligemeget):

<td style="padding:0px;">
<img style="margin:0px; border:none; padding:0px;" src=".." alt="" />
</td>

Det gør denne syntaks derimod ikke:

<td style="padding:0px;">
<img style="margin:0px; border:none; padding:0px;" src=".." alt="" /></td>

Derudover skal det lige nævnes, at XHTML er elendigt understøttet på WWW - og slet ikke i IE7 (og formodentlig heller ikke i den kommende IE8)

/mvh
</bole>

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Programmeringssprog kurser

Kurser inden for grundlæggende programmering

Se alle Programmeringssprog kurser

Flere spørgsmål fra XML & XSLT kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Gyldig XML? Af jpi i XML & XSLT	8	13/03/202314:56	14/03/202316:28
håber nogen kan hjælpe Af offenbach1 i XML & XSLT	4	01/02/202310:27	01/02/202314:13
Hvordan skal der svares på dette telegram Af scb i XML & XSLT	0	03/03/202121:25	-
ZIP > XML > HTML Af kodak i XML & XSLT	2	07/03/202001:19	07/03/202010:41
Skjule forretningslogik Af ABCit i XML & XSLT	1	24/01/202012:54	25/01/202017:43

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS