Div layer in IE

[rmfloris]

Hallo,

ik heb een div layer (eigenlijk meerdere) in mijn pagina staan. Deze zien er goed uit in Firefox, maar in IE werken ze niet goed.

Dit is de code voor de div layer:

code:

<tr>
<td>
<div id=1  class=box style="visibility: hidden; height: 0;">
inhoud
</div>
</td>
</tr>

het deel van de stylesheet voor de class=box is als volgt:

code:

.box {
 position:relative;
 border:2px #006699 dotted;
 background-color:#FFFFFF;
 }

ik snap niet precies waar het aan ligt, dat hij in Firefox het goed laat zien, terwijl IE het niet doet.

[crisp]

boxmodel: IE (in quirks) rekent height exclusief border (dus word er nog ruimte gereserveerd voor de border).

[rmfloris]

Het vreemde is dat de ruimte veel groter is dan de border. Ik heb hier twee screenshot gemaakt zowel in IE als in Firefox.

Shot van IE


Shot in Firefox


De content die in het vak staat is 1 regel tekst. De ruimte tussen beide regels is veel meer dan 1 regel tekst.

Belangrijker is, hoe los ik het op? Kan ik dit regelen met een stylesheet?

[Verwijderd]

wat is je code verder? want wat je hier post is wel heel marginaal, als we moeten gokken heb je natuurlijk dikke kans dat we het fout gokken

heb je je code al eens door de validator gehaald?

[Geert.H]

heb je je code al eens door de validator gehaald?

Oja, ons groot orakel kan ons wel vertellen wat er fout is

Maar voor de rest zou het wel handig zijn als er even wat meer informatie op voorhanden was.

<div id=1 class=box style="visibility: hidden; height: 0;">
inhoud
</div>

Misschien kan je beginnen met hier " " omheen te gooien ?

[ Voor 7% gewijzigd door Geert.H op 01-02-2005 20:33 ]

[Eskimootje]

code:

table, tr, td {
     border-collapse: collapse;
}

Dit toevoegen?
Waarom gebruik je uberhaupt divs in een cel

[Verwijderd]

id=1 mag niet.
een id moet met een letter beginnen.

[rmfloris]

Dit is de complete code van het screenshot van hierboven:

code:

<table width="100%">
<tr bgcolor="#eeeeee">
<td><b>Datum</b></td><td><b>Nieuws</b></td>
</tr>
<tr bgcolor="#eeeeee">
<td>25-01-2005</td>
<td><a name="1"></a><a href="#1" onclick="handleClick('show','1');">Aanbieders toegevoegd [img]"images/arrowwhitedown.gif"[/img]</a></td>
</tr>
<tr>
<td></td>
<td>
<div id="1"  style="visibility: hidden; height: 0;">
Hier komt het nieuws te staan.
<p><a href="#1" onclick="handleClick('hide','1');">Klap in</a>
</div>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>24-01-2005</td>
<td><a name="1"></a><a href="#2" onclick="handleClick('show','2');">Aanbieders toegevoegd [img]"images/arrowwhitedown.gif"[/img]</a>
</td>
</tr>
<tr>
<td></td>
<td>
<div id="1"  style="visibility: hidden; height: 0;">
Hier komt het nieuws te staan.
<p><a href="#1" onclick="handleClick('hide','1');">Klap in</a>
</div>
</td>
</tr>
</table>

De reden van de div layer in de tabel is de mogelijkheid om extra gegevens te tonen c.q. weg te laten. Ik heb hier nog geen andere oplossing voor gevonden dan bovenstaande. Hij is niet perfect, maar het werkt.

Hopelijk kan iemand mij helpen en die grote witregels tussen de twee div layers weg te halen.

[Eskimootje]

visibility: hidden;
moet worden
display: none;

omdat visibility wel ruimte reserveerd voor de div en display niet.

[crisp]

het is eigenlijk meer doordat IE height als min-height interpreteert

[Verwijderd]

Ghoekzema schreef op dinsdag 01 februari 2005 @ 20:33:
[...]

Oja, ons groot orakel kan ons wel vertellen wat er fout is

als ik zulke grote verschillen zie is mijn eerste gedachte vaak rotte html, en die haalt de validator er feilloos uit. Maar zoals ik al zei was dat ook maar een gok, zonder code kan ik ook niks zien

[Verwijderd]

HTML:

id="1"

staat er inmiddels 2x in, dat is 2x hetzelfde ID, dus mag niet.

en zoals ik zei Moet een ID met een letter beginnen.

[rmfloris]

De oplossing is gevonden en lag in het verschil tussen visibilty: hidden en display: none. Iedereen bedankt voor de informatie.