witte border rond afbeelding binnen table

woensdag 4 augustus 2010 09:42

Acties:

0 Henk 'm!

Silver Wings Of Morning

Topicstarter

Ik schaam me dood maar ik kom er niet uit.

Ik zit de layout van een email nieuwsbrief te ontwikkelen. Hierdoor moet ik tables gebruiken.

Het probleem is als volgt, als ik een afbeelding toevoeg binnen een table dan zit hier een witte border omheen en wat ik ook doe, ik krijg deze niet weg.

Link: http://peakevents.nl/opzet-nieuwsbrief/peak.html

HTML: peak.html

<html>
<head>
    <style>
    body {background: #f6f6f6; }
    table {border: 0;}
        table, tr, td {font:12px Calibri, Helvetica, sans-serif; border-collapse: collapse;}    
        .header_tbl {color:#7a7a7a; background: #f6f6f6; margin: 0 50px;}
        .content_tbl { background: #ffffff; margin: 0 50px; }
        
    td.left {width: 423; border-right: 2px solid #a5a5a5; border-left: 1px solid #dadada;}
    td.right {width: 153; border: 0px solid #d3d3d3;}
            
    img {margin: 0; padding: 0; border: none; border-collapse: collapse; background-color: transparent;}
        .header_img { margin: 0 50px;}

    </style>
</head>
<body>
    <table class="header_tbl">
        <tr height="50">
            <td width="594">
                <span style="float: left;">Nieuwsbrief niet goed leesbaar? Bekijk dan de online versie</span> <span style="float: right;">Bezoek nu ook onze website</span>
            </td>
        </tr>
    </table>
    <img class="header_img" src="header.jpg" />
    
    <table class="content_tbl">
        <tr>

            <td class="left">1</td>
            <td class="right" colspan="3"><img src="side.jpg" /></td>

        </tr>
        <tr>
        
            <td class="left">1</td>
            

        </tr>
        <tr>

            <td class="left">1</td>

        </tr>
    </table>
    
</body>
</html>

Aan het plaatje zelf ligt het niet, zoals je hier kan zien:
Afbeeldingslocatie: http://peakevents.nl/opzet-nieuwsbrief/side.jpg

Ik staar me hier al anderhalve dag op stuk.

Als iemand suggesties heeft aan me, is dit zeer welkom.

woensdag 4 augustus 2010 09:49

Acties:

0 Henk 'm!

JackPoint

Met border="0" in de img tag haal je de border weg.

Jij hebt:

Cascading Stylesheet:

1 2	img {margin: 0; padding: 0; border: none; border-collapse: collapse; background-color: transparent;} .header_img { margin: 0 50px;}

Als je die border op 0 ipv none zet, werkt het dan wel?

Cascading Stylesheet:

1 2	img {margin: 0; padding: 0; border: 0; border-collapse: collapse; background-color: transparent;} .header_img { margin: 0 50px;}

woensdag 4 augustus 2010 09:49

Acties:

0 Henk 'm!

Niemand_Anders

Dat was ik niet..

De margin/padding zit niet op de image, maar op je table cell (td)..

If it isn't broken, fix it until it is..

woensdag 4 augustus 2010 09:58

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

JackPoint schreef op woensdag 04 augustus 2010 @ 09:49:
Met border="0" in de img tag haal je de border weg.

Dat is is de 1989 oplossing. Gewoon CSS gebruiken hiervoor.

Met Firebug kun je idd zien waar die ruimte cq border nu eigenlijk vandaan komt.

woensdag 4 augustus 2010 09:59

Acties:

0 Henk 'm!

job

css is leuk, maar in emails krijg je in hotmail bijvoorbeeld interessante resultaten.

[ Voor 41% gewijzigd door job op 04-08-2010 10:02 ]

woensdag 4 augustus 2010 10:06

Acties:

0 Henk 'm!

Namu

Silver Wings Of Morning

Topicstarter

Hmmja. Wist wel dat het zoiets stoms was. Wou gisteren ook geen hulp vragen... probleem opgelost.

woensdag 4 augustus 2010 10:31

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css
Html

Namu schreef op woensdag 04 augustus 2010 @ 10:06:
probleem opgelost.

Als je dan de oplossing ook nog even post zodat anderen nog iets hebben aan dit topic als ze het met de search vinden...

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

woensdag 4 augustus 2010 10:50

Acties:

0 Henk 'm!

Namu

Silver Wings Of Morning

Topicstarter

RobIII schreef op woensdag 04 augustus 2010 @ 10:31:
[...]

Als je dan de oplossing ook nog even post zodat anderen nog iets hebben aan dit topic als ze het met de search vinden...

Excuus, de oplossing was al in het topic gegeven. De border werd niet door de image verzorgd maar door de td.
Dus de tags vanuit image in de td.right geplaatst in de css.

HTML: peak.html

<style>
    body {background: #f6f6f6; }
    table {border: 0;}
        table, tr, td {font:12px Calibri, Helvetica, sans-serif; border-collapse: collapse;}    
        .header_tbl {color:#7a7a7a; background: #f6f6f6; margin: 0 50px;}
        .content_tbl { background: #ffffff; margin: 0 50px; }
        
    td.left {width: 423; border-right: 2px solid #a5a5a5; border-left: 1px solid #dadada;}
    td.right {width: 152; border: none; margin: 0; padding: 0; border-collapse: collapse;}
            
    img { border: none;  }
        .header_img { margin: 0 50px;}

    </style>

[ Voor 43% gewijzigd door Namu op 04-08-2010 10:53 ]

woensdag 4 augustus 2010 10:59

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Html
Css

job schreef op woensdag 04 augustus 2010 @ 09:59:
css is leuk, maar in emails krijg je in hotmail bijvoorbeeld interessante resultaten.

Mails opmaken is dan ook een verhaal apart.

edit: zie nu dat het om een nieuwsbrief gaat

Dan is 1989-html gewoon toegestaan en dus ook border="0". (Met een woord van dank aan Microsoft met name).

[ Voor 24% gewijzigd door Bosmonster op 04-08-2010 10:59 ]

Onderwerpen