[xhtml] Pixelverschillen tussen verschillende OS

[cyberstalker]

Om de een of andere onverklaarbare reden blijf ik pixelverschillen tussen verschillende houden bij het tonen van mijn site onder verschillende besturingssystemen.

Het probleem treed bijvoorbeeld op bij het gebruikersbeheer. Ik heb daar een tabel met voor elke gebruiker een rij. Bovenaan de rij staat een link om nieuwe gebruikers aan te maken. Deze moet mooi aansluiten op de tabel.

De onderkant van de tabel wordt ook weer afgesloten met ronde hoekjes. Onder linux is dit perfect, echter wanneer je onder windows kijkt, verschuift er weer e.e.a.

Zowel de tabel als de link bovenaan de tabel hebben precieze maten in pixels opgekregen, en zouden dus gewoon altijd goed moeten aansluiten. Heeft iemand enig idee waar dit verschil vandaan komt?

Relevante code:

HTML:

<a id="adduser" href="?">[img]"images/titel_gebrtoevoegen.gif"[/img]</a>
<table>
    <tr>
        <th style="width: 20px;">&nbsp;</th>
        <th style="width: 55%">Gebruikersnaam</th>
        <th style="width: auto">Aangemaakt op</th>
        <th style="width: 40px">edit</th>
        <th style="width: 40px">del</th>
    </tr>
    <tr>
        <td>[img]"images/popblauw.gif"[/img]</td>
        <td>cyberstalker</td>
        <td>15 June 2006</td>
        <td><a href="user.php?act=edit&amp;user=cyberstalker">[img]"images/edit.gif"[/img]</a></td>
        <td><a href="user.php?act=del&amp;user=cyberstalker">[img]"images/del.gif"[/img]</a></td>
    </tr>
    <tr>
        <td>[img]"images/popblauw.gif"[/img]</td>
        <td>cygnusx</td>
        <td>10 June 2006</td>
        <td><a href="user.php?act=edit&amp;user=cygnusx">[img]"images/edit.gif"[/img]</a></td>
        <td><a href="user.php?act=del&amp;user=cygnusx">[img]"images/del.gif"[/img]</a></td>
    </tr>
</table>

Cascading Stylesheet:

a#adduser
{
    display: block;
    width: 965px;
    height: 28px;
    text-align: right;
    background-image: url('../images/gebruikers.gif');
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
}

table
{
    width: 966px;
    
    margin-left: auto;
    margin-right: auto;
    padding-left: 1px;
    border-spacing: 0px;
    
    padding-bottom: 2px;
    background-image: url('../images/content_footer.gif');
    background-position: bottom center;
    background-repeat: no-repeat;
}

td:first-child, th:first-child
{
    border-left: 1px solid #919cA0;
}

td:last-child, th:last-child
{
    border-right: 1px solid #919cA0;
}

Wat ik zelf verder wel apart vind, maar wat ik ook niet begrijp, is dat wanneer ik de breedte van de a#adduser op 966 zet (net als de tabel), de link te breed wordt. Ik vermoed dat dit iets te maken heeft met het probleem, maar hoe dit komt, geen flauw idee.

Linkje naar voorbeeld: http://www.xs4all.nl/~zeep10/test/index.xhtml

[Verwijderd]

als je even vermeldt over welke brosers het gaat...

IE zal in quirksmode zitten iig, vanwege "iets" (een xml prolog) voor je dtd uit je html.

[ Voor 48% gewijzigd door Verwijderd op 26-06-2006 12:30 ]

[cyberstalker]

De verschillen treden bijvoorbeeld op in Firefox. In Opera is het probleem hetzelfde, alleen komt daar nog bij dat Opera natuurlijk geen last-child ondersteunt, zodat je dat niet direct ziet. Het probleem komt daar echter ook duidelijk naar voren in het menu.

[H@rry]

wat jij dus doe is een ding met 965 pixels even breed maken als iets met 966 pixels. Dat vind ik een beetje raar.

Ik denk dat je moet proberen om alles even breed te houden, en borders te vermijden (IE en FF tekenen die anders). En probeer alles vanuit het midden te berekenen, maar volgens mij doe je dat al.

[cyberstalker]

Dat verschil in breedte is heel logisch hoor. Die table heeft een padding-left van 1px, dus het lijkt me niet dat dat het probleem is.

En borders vermijden? Dat vind ik een beetje raar. Sowieso staat IE helemaal buiten dit topic, daar werkt sowieso geen XHTML in, dus daar kunnen we niet eens in kijken.

[crisp]

Lijkt mij een afrondings-dingetje. Als je #adduser en de table nou in een wrapper-div zet, en die centreerd?

[H@rry]

het is idd een afrondingsfoutje

Als ik mijn browser venster verklein en dan weer groter sleep zie je het telkens verschuiven.

Nog snap ik je 965/966 niet. Als ik de table op 965 zet en de padding-left op 0 doet ie het bij mij goed.