Standaard margin afbeeldingen

[mcdronkz]

Bij mij krijgen afbeeldingen een standaard margin als ik de volgende code hanteer:

code:

[img]"images/layout/gif/images/layout_02.gif"[/img]
[img]"images/layout/gif/images/layout_03.gif"[/img]
[img]"images/layout/gif/images/layout_04.gif"[/img]

Als ik ze zo neerzet werkt het prima:

code:

[img]"images/layout/gif/images/layout_02.gif"[/img][img]"images/layout/gif/images/layout_03.gif"[/img][img]"images/layout/gif/images/layout_04.gif"[/img]

Ik heb geprobeerd dit met CSS te verhelpen, margin: 0px padding: 0px; enzovoorts, dat gaf mij niet de oplossing.

Aangezien ik allemaal linkjes erachter wil zetten etc, is het wel zo praktisch als ik het op de eerste manier kan klaarspelen.

Iemand een idee ?

[E-Vix]

Dat is typisch gedrag van internet explorer. Je kan er wel regels tussen hebben zitten, maar dan mogen er absoluut geen spaties of tabs voor of na komen, en als je het in een table hebt staan ook geen linefeed na je <td> of voor je </td>

[Michali]

Als je ze een float: left; geeft worden ze wel goed naast elkaar gezet. Dit omdat het dan block elementen worden (normaal zijn ze inline). Alleen weet ik niet of dat het juiste gedrag veroorzaakt. Je kunt er dan namelijk geen tekst voorzetten, zonder die in een container ook te laten floaten.

[frickY]

E-Vix schreef op maandag 26 juni 2006 @ 07:23:
Dat is typisch gedrag van internet explorer. Je kan er wel regels tussen hebben zitten, maar dan mogen er absoluut geen spaties of tabs voor of na komen, en als je het in een table hebt staan ook geen linefeed na je <td> of voor je </td>

Ditzelfde gedrag doet zich ook voor met LI-tags. Omdat het in IE niet verplocht is om de LI tag te sluiten, scant IE de tag na de LI tag om te bepalen of deze gesloten wordt. Datzelfde doet hij, blijkbaar, ook bij IMGs.
[code=html]
<ul>
<li>Blaat
<li>Mekker
<li>Toet
</ul>
[/code]

FOUT! Zie Crisp's post hieronder

Ik denk dat je bij je voorbeeld code 'vergeten' bent de tabjes mee te kopieëren welke nog voor je img tags staan. Met alle tags tegen het begin van de regel zou je hier geenlast van moeten hebben.

[ Voor 19% gewijzigd door frickY op 26-06-2006 13:54 ]

[crisp]

frickY: da's onzin want de close-tag voor het LI-element is per spec optioneel. Het probleem zit 'm in nodes met enkel whitespace die IE niet ignored. Ruimte aan de onderkant van images kan je voorkomen door de images een vertical-align:bottom mee te geven.

[mcdronkz]

frickY schreef op maandag 26 juni 2006 @ 08:37:
[...]

Ditzelfde gedrag doet zich ook voor met LI-tags. Omdat het in IE niet verplocht is om de LI tag te sluiten, scant IE de tag na de LI tag om te bepalen of deze gesloten wordt. Datzelfde doet hij, blijkbaar, ook bij IMGs.

HTML:

<ul>
  <li>Blaat
  <li>Mekker
  <li>Toet
</ul>

Ik denk dat je bij je voorbeeld code 'vergeten' bent de tabjes mee te kopieëren welke nog voor je img tags staan. Met alle tags tegen het begin van de regel zou je hier geenlast van moeten hebben.

Klopt ja, ik maak gebruik van tabs omdat ik netjes geindenteerde code wil hebben. Blijkbaar denken Firefox en Internet Explorer hier anders over.

Edit:

Of ik ze nu onder elkaar zet mét of zonder tabs maakt geen verschil zie ik nu. Ook in een tabel lijkt het naar behoren te werken:

code:

<table>
                    <tr>
                        <td>[img]"images/layout/gif/images/layout_02.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_03.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_04.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_05.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_06.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_07.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_08.gif"[/img]</td>
                        <td>[img]"images/layout/gif/images/layout_09.gif"[/img]</td>
                    </tr>
                </table>

[ Voor 38% gewijzigd door mcdronkz op 26-06-2006 13:50 ]

[frickY]

Crisp. Naar ik weet moet de LI-tag met welke DTD dan ook gewoon worden afgesloten, maar is het een 'feature' van IE dat deze je list wel gewoon 'correct' renderd als je dat niet doet.
Ik zie dat in diverse DTDs de sluitende LI inderdaad optioneel is. My bad :x

[ Voor 24% gewijzigd door frickY op 26-06-2006 13:53 ]

[BtM909]

frickY schreef op maandag 26 juni 2006 @ 13:50:
Crisp. Naar ik weet moet de LI-tag met welke DTD dan ook gewoon worden afgesloten, maar is het een 'feature' van IE dat deze je list wel gewoon 'correct' renderd als je dat niet doet.

Dan moet je toch nog een keer de standaarden eens doorlezen

Start tag: required, End tag: optional

[mcdronkz]

float: left; maakt óók al geen verschil. Heeft iemand een oplossing die misschien wél werkt ?

[mcdronkz]

Iemand nog een idee ?

[moozzuzz]

mcdronkz schreef op maandag 26 juni 2006 @ 04:39:
Bij mij krijgen afbeeldingen een standaard margin als ik de volgende code hanteer:

HTML:

[img]"images/layout/gif/images/layout_02.gif"[/img]
[img]"images/layout/gif/images/layout_03.gif"[/img]
[img]"images/layout/gif/images/layout_04.gif"[/img]

Ik versta je prob niet meteen (ligt aan mij). Wat is de bedoeling? Alle prentjes naast mekaar? Waar definieer je je margin ook al weer? Graag code=html tag voor leesbaarheid :].

[ Voor 15% gewijzigd door moozzuzz op 27-06-2006 13:11 ]

[mcdronkz]

moozzuzz schreef op dinsdag 27 juni 2006 @ 13:10:
[...]

HTML:

[img]"images/layout/gif/images/layout_02.gif"[/img]
[img]"images/layout/gif/images/layout_03.gif"[/img]
[img]"images/layout/gif/images/layout_04.gif"[/img]

Ik versta je prob niet meteen (ligt aan mij). Wat is de bedoeling? Alle prentjes naast mekaar? Waar definieer je je margin ook al weer? Graag code=html tag voor leesbaarheid :].

[BalusC]

HTML:

<html>
    <head>
        <title>test</title>
        <style>
            #menu {float: left; clear: both;}
            #menu dd {float: left; margin: 0px;}
            #menu dd img {display: block;}
        </style>
    </head>

    <body>
        <dl id="menu">
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
                <dd><img src="img.gif"></dd>
        </dl>
    </body>
</html>

Dat is ook nog semantisch correct

[Bloemkoolsaus]

mcdronkz schreef op maandag 26 juni 2006 @ 04:39:
Bij mij krijgen afbeeldingen een standaard margin als ik de volgende code hanteer:

code:

[img]"images/layout/gif/images/layout_02.gif"[/img]
[img]"images/layout/gif/images/layout_03.gif"[/img]
[img]"images/layout/gif/images/layout_04.gif"[/img]

Dit is geen margin, maar spaties.
Iedere 'enter' (dus nieuwe regel) zal een spatie geven. Daarom werkt het wel als je het achter elkaar zet.

[Osiris]

BalusC schreef op dinsdag 27 juni 2006 @ 14:00:

HTML:

<html>
    <head>
        <title>test</title>
        <style>
            #menu {float: left; clear: both;}
            #menu dd {float: left; margin: 0px;}
            #menu dd img {display: block;}
        </style>
    </head>

    <body>
        <dl id="menu">
                <dd>[img]"img.gif"></dd>
                <dd><img[/img]</dd>
                <dd>[img]"img.gif"></dd>
                <dd><img[/img]</dd>
                <dd>[img]"img.gif"></dd>
                <dd><img[/img]</dd>
                <dd>[img]"img.gif"></dd>
                <dd><img[/img]</dd>
                <dd>[img]"img.gif"></dd>
        </dl>
    </body>
</html[/img]

Dat is ook nog semantisch correct

Ik vind een "definition lists" nou niet echt semantisch correct voor een simpel menu-tje, gebruik dan een "unordered list"