[CSS] Overerving positie (in tabel) - Softwareontwikkeling

donderdag 18 augustus 2005 18:13

Acties:

Topicstarter

Onderstaande code geeft in IE/Opera en Firefox verschillende resultaten. Ik heb nog geen vergelijkbaar probleem kunnen vinden en ik heb al helemaal geen oplossing kunnen vinden.

Het resultaat in IE/Opera lijkt mij de correcte weergave. Namelijk dat de positie van VertBar gelijk is aan linksboven van tabel.

Klopt deze aanname?
Of doe ik iets fout?
Is er een oplossing?

code:

<html>
<head> 
<style type="text/css">
.tabel {
    position: absolute;
    top: 80px;
    width: 600px;
    z-index: 1;
    background-color: #ff0000;
}

.VertBar {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-color: #00ff00;
}
</style>
</head>
<body>

<table cellpadding="0" cellspacing="0" border="0" class="tabel">
<tr valign="top">
    <td>
        <div class="VertBar">Vaag</div>

    </td>
    <td>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum aliquet eros. Sed velit purus, molestie vel, venenatis id, volutpat quis, leo. Aenean vitae wisi. Sed nibh nibh, ultrices id, venenatis non, tincidunt ut, augue. In non purus venenatis pede malesuada blandit. Proin vitae nibh lobortis purus molestie semper. Fusce porttitor bibendum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quam justo, dictum id, iaculis ac, congue in, est. Donec blandit ultricies eros. Maecenas ullamcorper.
    </td>
</tr>
</table>

</body>
</html>

Het lijkt er op dat Firefox de mist in gaat als er gebruik gemaakt wordt van een tabel. Als ik hetzelfde soort voorbeeld zonder tabel maak, gaat alles goed. Helaas moet ik wel een tabel gebruiken.

code:

<html>
<head> 
<style type="text/css">
.tabel {
    position: absolute;
    top: 80px;
    width: 600px;
    z-index: 1;
    background-color: #ff0000;
}

.VertBar {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 2;
    background-color: #00ff00;
}
</style>
</head>
<body>

<div class="tabel">
    <div class="VertBar">Vaag</div>

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum aliquet eros. Sed velit purus, molestie vel, venenatis id, volutpat quis, leo. Aenean vitae wisi. Sed nibh nibh, ultrices id, venenatis non, tincidunt ut, augue. In non purus venenatis pede malesuada blandit. Proin vitae nibh lobortis purus molestie semper. Fusce porttitor bibendum metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla quam justo, dictum id, iaculis ac, congue in, est. Donec blandit ultricies eros. Maecenas ullamcorper.
</div>

</body>
</html>

Bovenstaande is een uitgeklede versie van het probleem. Alle code die niets met het probleem te maken heeft, heb ik verwijderd.

None

donderdag 18 augustus 2005 18:23

Acties:

André

Analytics dude

Als je in FF de position:absolute op de TD zet werkt het prima. Daar zal het probleem ook wel zitten.

donderdag 18 augustus 2005 18:55

Acties:

reddevil001

Topicstarter

André schreef op donderdag 18 augustus 2005 @ 18:23:
Als je in FF de position:absolute op de TD zet werkt het prima. Daar zal het probleem ook wel zitten.

Dat geeft echt hele vage resultaten. De hele tabel lijkt verdwenen te zijn. De tekst loopt gewoon de tabel uit en er blijft maar een rood lijntje van 1 pixel over.

None

vrijdag 19 augustus 2005 20:43

Acties:

SuperRembo

Er staat in de W3 specs wel iets over position:relative en tables:

The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.

Dit staat niet bij position:absolute. Toch lijkt me er wel iets voor om tabel-elementen niet uit de normale positionering te halen. Als je een cel uit een tabel haalt met position:absolute, hoe moet de rest van de tabel dan gerenderd worden?

| Toen / Nu

zaterdag 20 augustus 2005 05:52

Acties:

ZeilDude

Inderdaad - aanvullend op SuperRembo - is je code onlogisch. Een tabel is om tekst/getallen op een raster weer te geven. Hokjes dus, naast en boven elkaar. Dan ga je dus niet met z-layers werken en positioning ten opzichte van elkaar. Daar heb je andere elementen voor, bijvoorbeeld <div>. Je tweede codeblok is dan ook stukken beter. J ehebt du zelf al de oplossing aangedragen. Waarom wil je dan toch weer met die eeuwige tabel werken?