HTML/JS Problem
grOOvekill@ 18.10.2012 - 11:17 1657 6
grOOvekill@
LegendVienna Badass
|
S'gott, so, bastel gerade eine Seite und habe folgendes Problem: Ich benötige auf den Unterseiten expandierende Contentboxen. Da habe ich auch ein Javascript Ding gefunden, das genau das macht was ich brauche. Die Seite könnt ihr euch hier ansehen: http://www.kemalkara.com/_tmp/site2/So. Das funktioniert alles soweit. Das Problem ist nur: lokal im Editplus Texteditor waren die 3 Boxen geschlossen, so wie sie es sein sollen. Im IE sind sie das auch, wenn man auf die Seite geht. Seltsamerweise werden im Firefox aber alle 3 Boxen bereits expandiert angezeigt, wobei die Bezeichnung 'Öffnen [+]' dann natürlich auch Blödsinn ist. Das gleiche Problem habe ich leider in Chrome und Opera. Ich gehe mal davon aus, dass das irgendeine Kleinigkeit im Javascript ist, aber ich komme leider nicht drauf. Hat einer von euch eine Idee? Wäre euch wirklich dankbar. Hier nochmal der Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="de">
<head>
<TITLE>SANDOZ FÄCHER | OSPAMOX</TITLE>
<style type="text/css">
td {font-family: verdana; font-size:10pt; color:#000000; }
a:link {font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
a:visited {font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
a:active {font-family: verdana; font-size:10pt; color:#000000; text-decoration:none;}
a:hover {font-family: verdana; font-size:10pt; color:#FF0000; text-decoration:none;}
</style>
<script type="text/javascript">
function toggle_visibility(tbid,lnkid) {
if (document.getElementsByTagName) {
var tables = document.getElementsByTagName('table');
for (var i = 0; i < tables.length; i++) {
if (tables[i].id == tbid){
var trs = tables[i].getElementsByTagName('tr');
for (var j = 2; j < trs.length; j+=1) {
trs[j].bgcolor = '#CCCCCC';
if(trs[j].style.display == 'none')
trs[j].style.display = '';
else
trs[j].style.display = 'none';
}
}
}
}
var x = document.getElementById(lnkid);
if (x.innerHTML == 'Öffnen [+]')
x.innerHTML = 'Schließen [-]';
else
x.innerHTML = 'Öffnen [+]';
}
</script>
</head>
<BODY>
<table border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="ospamox_header.jpg"></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl1" name="tbl1">
<tr><td></td></tr>
<tr>
<td width="710" align="right">INDIKATION ERWACHSENE</td>
<td width="90"><a href="javascript:toggle_visibility('tbl1','lnk1');"><div align="right" id="lnk1" name="lnk1">Öffnen [+]</div></a></td>
</tr>
<tr style="{display='none'}">
<td colspan="2"><div><img src="ospamox_ind_erw.jpg"></div></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl2" name="tbl2">
<tr><td></td></tr>
<tr>
<td width="710" align="right">INDIKATION KINDER</td>
<td width="90"><a href="javascript:toggle_visibility('tbl2','lnk2');"><div align="right" id="lnk2" name="lnk2">Öffnen [+]</div></a></td>
</tr>
<tr style="{display='none'}">
<td colspan="2"><div><img src="ospamox_ind_kind.jpg"></div></td>
</tr>
</table>
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="tbl3" name="tbl3">
<tr><td></td></tr>
<tr>
<td width="710" align="right">FACHKURZINFORMATION</td>
<td width="90"><a href="javascript:toggle_visibility('tbl3','lnk3');"><div align="right" id="lnk3" name="lnk3">Öffnen [+]</div></a></td>
</tr>
<tr style="{display='none'}">
<td colspan="2"><div><img src="ospamox_fki.jpg"></div></td>
</tr>
</table>
</body>
</html>
tia
|
ill
...
|
<tr style="{display='none'}"> auch schon ohne die geschwungenen klammern in der inline style angabe versucht? Bin mir nämlich ziemlich sicher, dass diese Schreibweise jeder vernünftige Browser eigentlich ignorieren müsste 
|
mat
AdministratorLegends never die
|
Ack. Chrome und FF ignoriert die Style-Angabe wegen den geschwungenen Klammern. Wenn du dir Firebug im Firefox installierst, dann kannst du per "Rechtsklick auf das <tr> => Element im Firebug untersuchen" sehen, dass dort nur ein leeres Style-Tag steht.
|
grOOvekill@
LegendVienna Badass
|
Das war's!!!  Also, nicht ganz, ich hab aus der Zeile das hier geabstelt: <tr style="display: none;"> Und Bäm! Funktioniert! :-) Tausend Dank! Ich hab einfach an der falschen Stelle gesucht!
|
ill
...
|
da schau her, dass auch die css-syntax fehlerhaft war is mir dann schon garnimma aufgefallen
|
Nico
former person of interest
|
|
ill
...
|
|
Anmeldung