Tabelle wandert in Safari

Diskutiere mit über: Tabelle wandert in Safari im Web Page Design Forum

  1. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    Hi liebe MacUser *g*
    steh grad vor einem sehr interessanten Problem.
    Habe mit HTML, ein wenig JS (umstaendlicher gehts wahrscheinlich nicht mehr)und ein wenig css an einer Seite gebastelt.

    Problem: Ich habe eine aufklappbare Textbox, realisiert ueber javascript, indem der entsprechende Texteil sichtbar gemacht wird. funktioniert auch soweit.. aber sobald ich die Textbox zu und wieder aufklappe, wandert der Tabellen Inhalt in die naechste Spalte und immer eine Spalte weiter mit jedem aufklappen. An einer anderen Stelle steht der Text in der 2ten Spalte der Tabelle und es gibt keine Probleme.
    Habe versucht eine Tablle einzubetten, bringt aber nichts dann wandert die gesammte Tabelle eine Spalte weiter.
    Ach ja auf PC mit IE funktioniert alles wunderbar. Hatte jemand mal ein aehnliches Problem?

    Hier das Codefragment + Js (nicht lachen, bin designer kein programmierer *gg*)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Aboriginal Alice demo</title>
    <link href="text.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/JavaScript" language="JavaScript1.2">
    <!--
    var teaser1 = false;
    var teaser2 = false;
    var teaser3 = false;
    
    var text1 = false;
    var text2 = false;
    var text3 = false;
    
    function hidden() 
    { 
            if (teaser1)
            {
                    document.getElementById('ghost').style.display = 'none';
                    teaser1 = false;
    				
            }
            else
            {
                    document.getElementById('ghost').style.display = 'block';
                    teaser1 = true;
    				
            }
    } 
    
    function hide() 
    { 
            if (teaser2)
            {
                    document.getElementById('box').style.display = 'none';
                    teaser2 = false;
    				
            }
            else
            {
                    document.getElementById('box').style.display = 'block';
                    teaser2 = true;
    				
            }
    } 
    
    function hidden2() 
    { 
            if (teaser3)
            {
                    document.getElementById('ghost2').style.display = 'none';
                    teaser3 = false;
    				
            }
            else
            {
                    document.getElementById('ghost2').style.display = 'block';
                    teaser3 = true;
    				
            }
    } 
    
    function hidden3() 
    { 
            if (text1)
            {
                    document.getElementById('ghost3').style.display = 'none';
                    text1 = false;
    				
            }
            else
            {
                    document.getElementById('ghost3').style.display = 'block';
                    text1 = true;
    				
            }
    } 
    
    function hidden4() 
    { 
            if (text2)
            {
                    document.getElementById('ghost4').style.display = 'none';
                    text2 = false;
    				
            }
            else
            {
                    document.getElementById('ghost4').style.display = 'block';
                    text2 = true;
    				
            }
    } 
    
    
    function hidden5() 
    { 
            if (text3)
            {
                    document.getElementById('ghost5').style.display = 'none';
                    text3 = false;
    				
            }
            else
            {
                    document.getElementById('ghost5').style.display = 'block';
                    text3 = true;
    				
            }
    } 
    
    
    
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    
    <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
    
    	 <table width="980" bgcolor="#532721" align="left" cellpadding="0" cellspacing="0">
    	  	<tr>
    			<td colspan="2" height="20">&nbsp; </td>
    		</tr>
    	  	<tr>
    		  <td colspan="2" height="336"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="980" height="336" title="aboriginal alice flash navigation">
                <param name="movie" value="flash navi/alice_navi.swf" />
                <param name="quality" value="high" />
                <embed src="flash navi/alice_navi.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="980" height="336"></embed>
    	      </object></td>
    		</tr>
    	  	<tr>
    			<td colspan="2" height="60"><img src="" alt="titel" width="268" height="52" /></td>
    	   </tr>
      	  <tr>
    		<td width="280" valign="top">
    			<table width="280" border="0" cellpadding="0" cellspacing="0">
    				<tr>
    					<td width="280" align="center"><img src='pics/alice_mediabox.jpg' alt="mediabox"/>
    					&nbsp;</td>
    				</tr>
    				<tr><td>&nbsp;</td></tr>
    				<tr>
    					<td align="center">
    						<table width="270" cellpadding="0" cellspacing="0">
    							<tr>
    								<td background="pics/teaser/teaser_back_1.png">
    								<img src="pics/teaser/teaser_art1.png" /></td>
    							</tr>
    							<tr>
    							  <td style="display : none" id="ghost" background="pics/teaser/teaser_back2.png" 
    							  name="box">
    							  <img src="pics/teaser/teaser_art2.png" /></td>
    							</tr>
    							<tr>
    							  <td background="pics/teaser/teaser_back3.png" align="right">
    							  <a href="#box1" onClick="hidden()"><img src="pics/arrow_up.png" /></a></td>
    							</tr>
    						</table>
    					</td>
    				</tr>
    				<tr height="20">
    					<td align="center">	<table width="270" cellpadding="0" cellspacing="0">
    							<tr>
    								<td background="pics/teaser/teaser_back_1.png">
    								<img src="pics/teaser/teaser_didge1.png" /></td>
    							</tr>
    							<tr>
    								<td style="display : none" id="box" background="pics/teaser/teaser_back2.png" 	
    								name=box2>
    								<img src="pics/teaser/teaser_didge2.png" /></td>
    							</tr>
    							<tr>
    								<td background="pics/teaser/teaser_back3.png" align="right">
    								<a href="#box2" onClick="hide()"><img src="pics/arrow_up.png" /></a>
    								</td>
    							</tr>
    						</table></td>
    				</tr>
    				<tr>
    					<td align="center">	<table width="270" cellpadding="0" cellspacing="0">
    							<tr>
    								<td background="pics/teaser/teaser_back_1.png">
    								<img src="pics/teaser/teaser_dream1.png" /></td>
    							</tr>
    							<tr>
    								<td style="display : none" id="ghost2" background="pics/teaser/teaser_back2.png"
    								name="box3"><img src="pics/teaser/teaser_dream2.png" />
    								</td>
    							</tr>
    							<tr>
    							  <td background="pics/teaser/teaser_back3.png" align="right">
    							  <a href="#box3" onClick="hidden2()"><img src="pics/arrow_up.png" /></a></td>
    							</tr>
    							<tr>
    							  <td>&nbsp;</td>
    					  </tr>
    					</table></td>
    				</tr>
    				<tr>
    					<td align="center">&nbsp;</td>
    				</tr>
    				
    				
    			</table>
    		</td>
    		<td width="700" valign="top">
    			<table width="700" border="0" valign="top">
    				<tr>
    				  <td width="480">
    						<table width="480" border="0" cellpadding="0" cellspacing="0">
    							<tr>
    								<td colspan="2"><img src="pics/text_line.png" alt="text-line" width="480" height="10" /></td>
    							</tr>
    							<tr >
    								<td width="340" valign="top">
    									<p class="headline">HISTORY OF OUR SOUTHERN ARRERNTE 	
    									FAMILY <br />/ COMMUNITY GROUP </p>
    							    	<p align="justify" class="content_text" >text regulaer bleibt stehen </p>								</td>
    								<td width="140" align="right" valign="top">
    									<p><img src="pics/alice_pic_text1.jpg" alt="pic_text1" /></p>								</td>
    							</tr>
    							
    							<tr>
    								<td style="display : none" id="ghost3" name="t1">
    								<p align="justify" class="content_text" >The Arrernte speaking people were
    									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
    									territory stretched about 110 kilometres to both West and East and was about
    									330 kilometres in extent  from North an ernte were divided into six sub groups,
    									each with its particular territory. These sub-groups were further divided into
    									small family or kin groups, all bound by the very rigid system of authority
    									governed by intermarriage and movements over another group Estate .
    									Their territory stretched about 110 kilometres to both West and East and was 	
    									about 330 kilometres in extent  from North an ernte were divided into six sub 		
    									groups, each with its particular territory. These sub-groups were further 
    									divided into small family or kin groups, all bound by the very rigid system of 
    									authority governed by intermarriage and movements over another group Estate . 
    									</p></td>
    								
    							</tr>
    							<tr>
    								<td align="right">
    									<a href="#t1" onClick="hidden3()"><img src="pics/arrow_down.png" width="25" height="19" /></a>							</td>
    								<td>&nbsp;</td>
    							</tr>
    						</table>
    					 
    
    den Rest des Cods hab ich mal gecuttet, da es hier den Rahmen der verfuegbaren Zeichen gesprengt haette.. Ja es sind alles tags etc geschlosse.. *gg*

    Schon mal danke fuers Gruebel:o)
     
  2. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    ach ja der Text in der untersten Tabelle ist das Problem *gg*
     
  3. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Nette Probleme hast Du um die Uhrzeit :)

    Bei JS-Problemen ist der Firefox bzw. dessen JavaScript Console immer gut zu gebrauchen. Diese sagt folgendes:

    mehrmals Schreibfehler bei "d isplay" & kein Leerzeichen hinter dem Punkt

    hide, hidden und hidden1-3 not defined

    Also die Fehler mal bereinigen und wenn's immer noch nich geht:
    Nen Link auf die Seite wär hilfreicher. Bekomm das Skript bei mir garnicht zum Laufen.

    Übrigens müssen in XHTML alle JS-events klein geschrieben werden (onclick).
     
    Zuletzt bearbeitet: 11.10.2005
  4. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    hi Jakob,
    sitz hier grad in ner Agentur in Sydney wo ich mein Praxissemester absolviere.. bei uns is es jetzt vormittags um 11 *gg*

    Wuerd dir gern nen link schicken das ganze is aber noch net online is grad nur ne demoversion...
    was soll denn falsch geschrieben sein bei display? und hinter welchem punkt fehlt ein leerzeichen? hab ich irgenwo punkte???

    Hab leider gar keine Ahnung von JavaScript (wie du siehst) und mir meine Funktionen zusammengedoktort..
    Aber es funktioniert einwandfrei im IE, das oeffnen und schliessen funktioniert auch bei Safari und Firefox ohne weiteres. Mir verschiebt es nur den Inhalt der Tabelle, die eingeblendet wird, immer eine Spalte weiter.

    hab gerade alles auf diese Tabelle+ inhalt reduziert(kein css, keine imgs etc nur die tabellen fuer den Seitenaufbau) und alles funktioniert ohne probleme nichts verschiebt sich..

    dann duerfte es doch nicht am JS liegen, oder?

    hier der reduzierte code:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Aboriginal Alice demo</title>
    <link href="text.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/JavaScript" language="JavaScript1.2">
    <!--
    var text1 = false;
    
    function hidden3() 
    { 
            if (text1)
            {
                    document.getElementById('ghost3').style.display = 'none';
                    text1 = false;
    				
            }
            else
            {
                    document.getElementById('ghost3').style.display = 'block';
                    text1 = true;
    				
            }
    }
    //-->
    </script>
    </head>
    <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">
    
    
    	 <table width="980" bgcolor="#532721" align="left" cellpadding="0" cellspacing="0" border="1">
    	  	<tr>
    			<td colspan="2" height="20">&nbsp; </td>
    		</tr>
    	  	<tr>
    		  <td colspan="2" height="336">flash navi</td>
    		</tr>
    	  	<tr>
    			<td colspan="2" height="60">img</td>
    	   </tr>
      	  <tr>
    		<td width="280" valign="top">
    			<table width="280" border="0" cellpadding="0" cellspacing="0" border="1">
    				<tr><td width="280" align="center">img</td></tr>
    				<tr><td>&nbsp;</td></tr>
    				<tr><td align="center">img</td></tr>
    				<tr height="20"><td>img</td></tr>
    				<tr><td align="center">img</td></tr>
    				<tr><td align="center">&nbsp;</td></tr>
    			</table>
    		</td>
    		<td width="700" valign="top">
    			<table width="700" border="1" valign="top">
    				<tr>
    				  <td width="480">
    						<table width="480" border="0" cellpadding="0" cellspacing="0">
    							<tr>
    								<td colspan="2"><img src="pics/text_line.png" alt="text-line" width="480" height="10" /></td>
    							</tr>
    							<tr >
    								<td width="340" valign="top">
    									<p class="headline">HISTORY OF OUR SOUTHERN ARRERNTE 	
    									FAMILY <br />/ COMMUNITY GROUP </p>
    							    	<p align="justify" class="content_text" >The Arrernte speaking people were
    									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
    									territory stretched about 110 kilometres to both West and East and was about
    									330 kilometres in extent  from North an ernte were divided into six sub groups,
    									each with its particular territory. These sub-groups were further divided into
    									small family or kin groups, all bound by the very rigid system of authority
    									governed by intermarriage and movements over another group Estate . </p>								</td>
    								<td width="140" align="right" valign="top">
    									<p><img src="pics/alice_pic_text1.jpg" alt="pic_text1" /></p>								</td>
    							</tr>
    							
    							<tr>
    								<td style="display : none" id="ghost3" name="t1">
    								<p align="justify" class="content_text" >The Arrernte speaking people were
    									those who occupied most of the choice regions in the Mac Donnell Ranges. Their
    									territory stretched about 110 kilometres to both West and East and was about
    									330 kilometres in extent  from North an ernte were divided into six sub groups,
    									each with its particular territory. These sub-groups were further divided into
    									small family or kin groups, all bound by the very rigid system of authority
    									governed by intermarriage and movements over another group Estate .
    									Their territory stretched about 110 kilometres to both West and East and was 	
    									about 330 kilometres in extent  from North an ernte were divided into six sub 		
    									groups, each with its particular territory. These sub-groups were further 
    									divided into small family or kin groups, all bound by the very rigid system of 
    									authority governed by intermarriage and movements over another group Estate . 
    									</p></td>
    								
    							</tr>
    							<tr>
    								<td align="right">
    									<a href="#t1" onClick="hidden3()"><img src="pics/arrow_down.png" width="25" height="19" /></a>							</td>
    								<td>&nbsp;</td>
    							</tr>
    						</table>
    					 
    				  <td width="200" valign="top">navigation</td>
    				</tr>
    				<tr>
    					<td width="480">texbox2</td>
    					<td width="200" valign="top">img</td>
    				</tr>
    				<tr>
    					<td width="480">textbox3</td>
    					<td width="200" valign="top">2navi</td>
    				</tr>
    			</table>
    		
    		</td>
    	  </tr>
    	   <tr>
    			<td>&nbsp;</td>
    			<td>&nbsp;</td>
    	   </tr>
    	   <tr>
    			<td>&nbsp;</td>
    			<td align="center">img</td>
    	   </tr>
    	  <tr>
    			<td>&nbsp;</td>
    			<td align="right"><a href="#Beispiel">this is a footer link</a></td>
    	   </tr>
    </table>
     </body>
    </html>
    
     
  5. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    beim click auf das img unter dem text klappt die box auf bzw zu
     
  6. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    habe gerade festgestellt dass das Problem bei Firefox weiter besteht.. :(
    irgendeine Idee wo das Problem liegen koennte??
    *langsamabersicheramverzweifelnbin*
     
  7. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Wie gesagt, lad's doch einfach hoch (Seite ist jetzt unter dem Link), es will sich doch keiner durch den Quelltext kämpfen. So sieht auch jeder, dass es ganz normal funktioniert. Es rutscht keine Zeile runter. Achte mal auf den Scrollbalken und guck Dir die Seite an. Die Seite erweitert und verkürzt sich einfach durch Deinen Mechanismus. Nichts komisch.

    Der Vorteil bei ner online verfügbaren Seite ist auch, dass Du gleich nachsehen kannst, was sonst noch zu erledigen ist.
     
    Zuletzt bearbeitet: 11.10.2005
  8. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Übrigens musst Du nicht für jede Textbox eine neue Funktion schreiben. Nimm nur eine, die nennst Du meinetwegen hide und in die Klammer gibst Du den Namen der Box:
    Code:
     function hide(box) 
    { 
    if (document.getElementById('box').style.display = 'none'){
    document.getElementById('box').style.display = 'block';
    }
    else {
    document.getElementById('box').style.display = 'none';
    }
    }
    
    Musst Du wahrscheinlich noch bisschen anpassen. Das rufst Du denn z.B. mit hide('teaser2') oder hide('teaser3') auf.

    Ich sehe gerade, der haut da ja nur im Forum hier diese komischen Abstände bei display rein… komisch.
     
    Zuletzt bearbeitet: 11.10.2005
  9. sas3003

    sas3003 Thread Starter MacUser Mitglied

    Beiträge:
    10
    Zustimmungen:
    0
    Registriert seit:
    11.10.2005
    hi jakob,
    danke fuer deine schnelle antwort, hochladen is schoen und gut, hab aber keine domain auf die ich momentan was hochladen koennte.. jedenfalls hab ich immernoch das problem dass die Tabelle beim mehrfachen oeffnen der Textbox wandert.. (hier in der reduzierten version im firefox, in der original version im Safari)

    es soll moeglich sein die textboxen, bzw teaserboxen unabhaengig voneinander zu oeffnen und zu schliessen, reicht da dann auch eine funktion? hatte anfangs nur eine funktion und es hat nicht funktioniert..

    bei deinem beispiel hide(box), woher weiss js, dass ich mit zb. hide(teaser) auf diese funktion zugeifen will? muss ich ich das irgendwie speziell deklarieren? (oder was auch immer?)

    (das verkuerzen und verlaengern der Seite war ja Sinn der uebung *gg*)

    merci
     
  10. Jakob

    Jakob MacUser Mitglied

    Beiträge:
    1.067
    Zustimmungen:
    21
    Registriert seit:
    05.01.2004
    Ah! Jetzt hab ich auch zum ersten Mal gesehen, was Du meinst. Es wandert, wenn man es auf- und zumacht und das dann wiederholt!

    Da würde ich einfach dem <p>-Block die ID geben, nicht der td, ist eh ne schlechte Idee ner td display:none zuzuweisen.

    Zu Deiner Frage: Weil's in der Klammer steht. Probier mal:
    Code:
    function display(Text){
    alert(Text);
    }
    und im Quelltext dann:
    Code:
    <a onclick="display('hierschreibstduwasrein')">Klick</a>
     
Die Seite wird geladen...
Ähnliche Themen - Tabelle wandert Safari Forum Datum
Safari bindet Google-Kalender nicht ein Web Page Design 05.10.2016
Interaktive Tabelle Web Page Design 20.07.2015
Webseiten Editieren mit Safari Web Page Design 09.10.2014
Website braucht ewig unter Firefox - Safari/IE unauffällig Web Page Design 11.12.2011
Safari Cache leeren beim Reload Web Page Design 22.08.2011

Diese Seite empfehlen

Benutzerdefinierte Suche