18.01.2010, 16:54
|
|||
|
|||
Layer auf- und zublenden im IE.
Hi,
und wieder hab ich nen Problem mit Javascript im IE. Im Firefox funktioniert das ganze... Ich hab einen Layer mit einer height von 50px. Bei Klick in eine Checkbox vergrößere ich die height auf 350px und blende einen weiteren Layer innerhalb des Layers ein. Bei weiterem Klick in die Checkbox, verschwindet der eine Layer dann und der andere Layer geht wieder auf die 50px. Hier mein CSS: Code:
#kundendaten {
background-color:#E4E9EE;
border:1px solid #999999;
bottom:506px;
font-weight:bold;
margin-right:10px;
position:absolute;
top:225px;
width:532px;
left:0px;
}
Code der Layer: HTML-Code:
<div style="margin-top: 15px;"> <div id="kundendaten" style="height: 50px;"> <br /> <div align="left" style="padding-left:35px;"> <input id="kundendaten_checkbox" type="checkbox" onclick="javascript:kundendatenClicked();"> <label for="kundendaten_checkbox">{kundendaten}: </label> </div> <br /> <div id="kundendaten_hide" style="visibility:hidden"> <table cellspacing="1" cellpadding="1" style="border: 1px solid rgb(153, 153, 153); background-color: rgb(228, 233, 238); margin-left: 35px;" class="middle_medium" align="left"> <!-- Kundeninfo --> <tr> <td colspan="4"> <table cellspacing="1" cellpadding="1" class="middle_medium" style="border:0px none transparent; width:100%;"> <tr style="background-color:#E4E9EE;"> <th style="font-weight:bold; white-space:nowrap;"> {t_user_portal_name} </th> <th style="font-weight:bold; white-space:nowrap;"> {t_email}: </th> <th style="font-weight:bold; white-space:nowrap;"> <select name="email_senden_funktion_vorlage" onChange="if (this.value != \'\') email_funktion_oeffnen(\'\', this.value, \'\', \'\'); else email_funktion_schliessen();"><option value="" style="font-weight:bold; color:#666666;">{t_kundendaten_email_box}</option></select> </th> <th style="font-weight:bold; white-space:nowrap;"> {t_buyer_id} </th> </tr> <tr style="background-color:#FF5555;"> <td style="font-weight:bold; white-space:nowrap;"> <input type="text" name="edit_mitgliedsname" maxlength="80" size="15" value="Barzahlung" id="f_user_portal_name"> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Mitgliedsnamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_user_portal_name\'); f_buyer_id_search(tmp.value, \'portal_name\');" /> </td> <td colspan="2" style="font-weight:bold; white-space:nowrap;"> <input type="text" name="edit_email" id="f_email" maxlength="80" size="19" value="Barzahlung" id="f_email" /> </td> <td style="font-weight:bold; white-space:nowrap; text-align:center;"> <input type="text" name="edit_kundennummer" maxlength="80" size="13" value="" id="f_buyer_id"> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Kundennummer" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_buyer_id\'); f_buyer_id_search(tmp.value, \'id\');" /> </td> </tr> </table> <div id="f_buyer_id_function_body" class="f_buyer_id_function_body_hidden"></div> </td> </tr> <!-- Kunden-Adressen --> <tr style="background-color:#E4E9EE;"> <th colspan="2" style="font-weight:bold; white-space:nowrap;"> {t_bill_address} </th> <th colspan="2" style="font-weight:bold; white-space:nowrap;"> {t_delivery_address} </th> </tr> <tr style="background-color:#E4E9EE;"> <td colspan="4" title="" style="text-align:center;"><input type="hidden" name="adressen_aenderbar" value="1" /></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_name} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_name" id="f_bill_name" maxlength="80" size="20" value=""> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Kundennamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_bill_name\'); f_buyer_id_search(tmp.value, \'bill_name\');" /></td> <td style="white-space:nowrap;"> {t_delivery_name} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_name" id="f_delivery_name" maxlength="80" size="20" value=""> <img src="./images/lupe.png" border="0" alt="s" title="Suche nach Liefernamen" style="cursor:pointer;" onclick="var tmp = document.getElementById(\'f_delivery_name\'); f_buyer_id_search(tmp.value, \'delivery_name\');" /></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_name_2} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_name_2" id="f_bill_name_2" maxlength="80" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_name_2} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_name_2" id="f_delivery_name_2" maxlength="80" size="20" value=""></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_street} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_strasse_1" id="f_bill_street_1" maxlength="80" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_street} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_strasse_1" id="f_delivery_street_1" maxlength="80" size="20" value=""></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_street_2} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_strasse_2" id="f_bill_street_2" maxlength="80" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_street_2} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_strasse_2" id="f_delivery_street_2" maxlength="80" size="20" value=""></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_zip} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_plz" id="f_bill_zip" maxlength="40" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_zip} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_plz" id="f_delivery_zip" maxlength="40" size="20" value=""></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_city} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_ort" id="f_bill_city" maxlength="40" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_city} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_ort" id="f_delivery_city" maxlength="40" size="20" value=""></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_bill_country} </td> <td style="white-space:nowrap;"><input type="text" name="edit_rech_land" id="f_bill_country" maxlength="40" size="20" value=""></td> <td style="white-space:nowrap;"> {t_delivery_city} </td> <td style="white-space:nowrap;"><input type="text" name="edit_lief_land" id="f_delivery_country" maxlength="40" size="20" value=""></td> </tr> <tr> <td colspan="4" style="height:5px; background-color:#FF5555;"> </td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_telephone_1} </td> <td style="white-space:nowrap;"><input type="text" name="edit_telefon_1" id="f_telephone_1" maxlength="80" size="20" value="" /></td> <td style="white-space:nowrap;"> {t_telephone_2} </td> <td style="white-space:nowrap;"><input type="text" name="edit_telefon_2" id="f_telephone_2" maxlength="80" size="20" value="" /></td> </tr> <tr style="background-color:#FF5555;"> <td style="white-space:nowrap;"> {t_telefax} </td> <td style="white-space:nowrap;"><input type="text" name="edit_telefax" id="f_telefax" maxlength="80" size="20" value="" /></td> <td style="white-space:nowrap;"> {t_buyer_tax_id} </td> <td style="white-space:nowrap;"><input type="text" name="edit_kaeufer_ust_id" id="f_buyer_tax_id" maxlength="256" size="20" value="" id="f_buyer_tax_id" /></td> </tr> </table> </div> </div> </div> Mein Javascript: Code:
function kundendatenClicked(){
if (document.getElementById("kundendaten_checkbox").checked == false){
document.getElementById("kundendaten_hide").style.visibility = "hidden";
document.getElementById("kundendaten").style.height = "50px";
} else {
document.getElementById("kundendaten_hide").style.visibility = "visible";
document.getElementById("kundendaten").style.height = "350px";
}
}
Im IE geht der Layer nicht auf 50px sondern ist von Anfang an groß. Beim klicken in die Checkbox wird der andere Layer dann auch eingeblendet und wieder ausgeblendet. Jedoch funktioniert dann auch nicht das "kleiner werden". 
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Fußzeile unter Tabelle, bzw. Layer positionieren | Dylan | CSS | 13 | 11.10.2007 16:44 |
| zentrierte horiz. Positionierung mehrerer Layer in Zelle... | kolle | CSS | 2 | 22.03.2006 15:59 |
| Div Layer inneinander | Tommyfg | CSS | 2 | 31.12.2005 09:59 |
| Div Layer in Div Layer füllt diesen nicht aus (in FF) | Daniel12 | CSS | 2 | 14.08.2005 22:05 |
| Layer ausrichten mit float oder margin oder position:absolut | heinz | CSS | 11 | 27.05.2004 02:46 |
Linear-Darstellung
