Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]2215[/thread]

IE Darstellung: Keine <table> im <div>?



<< >> 7 Einträge, 1 Seite
Gast Gast
 2004-06-24 17:47
#25806 #25806
Ich blende in einer Tabelle Detailinfos mit folgendem JS ein und aus:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
function toggle_det(elementname)
{
 if (document.getElementById(elementname).style.visibility == "visible" )
 {
     document.getElementById(elementname).style.visibility = "hidden";
     document.getElementById(elementname).style.position = "absolute";
 } else {
     document.getElementById(elementname).style.visibility = "visible";
     document.getElementById(elementname).style.position = "relative";
 };
}

Das Snippet funktioniert problemlos (Danke an [E|B] an dieser Stelle). Ich blende verschiedene divs ein und aus. Bsp.:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  <div id="id<TMPL_VAR NAME="MID">" class="detail">
    <strong>Allgemeine Daten</strong><br />
     Geburtsdatum: <TMPL_VAR NAME="Geburtsdatum"><br />
     Eintritt: <TMPL_VAR NAME="Eintritt"><br />
     Austritt: <TMPL_VAR NAME="Austritt"><br />
     Funktion: <TMPL_VAR NAME="Funktion"><br />
     Ausbildung: <TMPL_VAR NAME="Ausbildung"><br />
     Fachrichtung: <TMPL_VAR NAME="Fachrichtung"><br />
    <br />
    <strong>Privatadresse</strong><br />
    Strasse:<TMPL_VAR NAME="Strasse"><br />
    Wohnort:<TMPL_VAR NAME="PLZ"> <TMPL_VAR NAME="Wohnort"><br />
    <br />
    <strong>Aktienanzahl:</strong> <TMPL_VAR NAME="Aktienanzahl"><br />
  </div>

Wenn ich nun hier eine table einsetze um die Felder sauber darzustellen bekomme ich im IE nur einen weißen Block statt einer Tabelle. Im Firefox geht es hingegen problemlos.

Hat von euch jemand einen Vorschlag?

Gruss,
Ronnie
renee
 2004-06-24 18:00
#25807 #25807
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
Ich benutze sehr häufig table's in div's. Und das funktioniert auch im IE Problemlos. Hast Du Dir mal den Quelltext der HTML-Seite (Ergebnisseite) angeschaut??
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
Ronnie
 2004-06-24 19:22
#25808 #25808
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
So, das ganze mal als Seite zum ausprobieren:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IE fails.</title>
<style type="text/css">
<!--
table	{	border-style: solid;
		border-width: 3px;
	}
.detail {
                border-style: solid;
                border-width: 1px;
                border-color: P
                background-color:#FFFFDD;
                visibility: hidden;
                position: absolute;
	}

.outer {
                border-style: solid;
                border-width: 0px;
                border-bottom-width: 1px;
                border-color: േ
                background-color:#DDDDFF;
                padding: 1px;
	}
-->
</style>
<script type="text/javascript">
<!--
function toggle_det(elementname)
{
 if (document.getElementById(elementname).style.visibility == "visible" )
 {
     document.getElementById(elementname).style.visibility = "hidden";
     document.getElementById(elementname).style.position = "absolute";
 } else {
     document.getElementById(elementname).style.visibility = "visible";
     document.getElementById(elementname).style.position = "relative";
 };
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a href="javascript:toggle_det('id1');">1. On/Off</a><br />
  <div id="id1" class="detail">
  <table><tr><td>Hello</td><td>World</td></tr>
  <tr><td>IE</td><td>fails!</td></tr></table>
  </div>

<a href="javascript:toggle_det('id2');">1. On/Off</a><br />
  <div id="id2" class="detail">
  <table><tr><td>Hello</td><td>World</td></tr>
  <tr><td>Firefox</td><td>succeeds!</td></tr></table>
  </div>
</body>
</html>
ShadowRunner
 2004-06-24 20:36
#25809 #25809
User since
2004-06-09
8 Artikel
BenutzerIn
[default_avatar]
lass doch das div weg und benutze nur die tabelle
an sich.dann funktioniert s in beiden.

also so:


Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>IE fails.</title>
<style type="text/css">
<!--
table { border-style: solid;
border-width: 3px;
}
.detail {
               border-style: solid;
               border-width: 1px;
               border-color: P
               background-color:#FFFFDD;
               visibility: hidden;
               position: absolute;
}

.outer {
               border-style: solid;
               border-width: 0px;
               border-bottom-width: 1px;
               border-color: േ
               background-color:#DDDDFF;
               padding: 1px;
}
-->
</style>
<script type="text/javascript">
<!--
function toggle_det(elementname)
{
if (document.getElementById(elementname).style.visibility == "visible" )
{
    document.getElementById(elementname).style.visibility = "hidden";
    document.getElementById(elementname).style.position = "absolute";
} else {
    document.getElementById(elementname).style.visibility = "visible";
    document.getElementById(elementname).style.position = "relative";
};
}
// -->
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<a href="javascript:toggle_det('id1');">1. On/Off</a><br />

 <table id="id1" class="detail"><tr><td>Hello</td><td>World</td></tr>

 <tr><td>IE</td><td>fails!</td></tr></table>


<a href="javascript:toggle_det('id2');">1. On/Off</a><br />

 <table id="id2" class="detail"><tr><td>Hello</td><td>World</td></tr>
 <tr><td>Firefox</td><td>succeeds!</td></tr></table>

</body>
</html>
there's more than one way to do it
Ronnie
 2004-06-24 21:01
#25810 #25810
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Die Idee ist eigentlich ganz gut. Trotzdem wäre eine Lösung statt eines Workarounds schön.
ShadowRunner
 2004-06-24 21:11
#25811 #25811
User since
2004-06-09
8 Artikel
BenutzerIn
[default_avatar]
workaround ?
du willst ne tabelle ein-und ausblenden.
also blendest du die tabelle ein und aus.
für mich is das umschliessende div n workaround ;)
there's more than one way to do it
Ronnie
 2004-06-24 22:17
#25812 #25812
User since
2003-08-14
2022 Artikel
BenutzerIn
[default_avatar]
Ich verwende divs gerne anstatt von Blindtabellen. Mit CSS ist man da relativ flexibel. Ich vermeide es Tabellen als Layoutwerkzeuge zu nutzen - nicht zuletzt aus Rücksicht auf Sehbehinderte. Deshalb verwende ich auch normal keine fixen Größenangeben für Schriftgrößen, sondern nur relative.
Die Tabelle im Beispiel ist ja auch nur ein Bestandteil des divs.
Da es aber anscheinend sonst nicht geht probiere ich es morgen auf der Arbeit mal mit verschachtelten Tabellen aus. Hat ja früher auch geklappt. Die äüßerste ist dann halt jene die ausgeblendet wird.

Vielen Dank,
Ronnie
<< >> 7 Einträge, 1 Seite



View all threads created 2004-06-24 17:47.