✔ Zeile zu breit - warum?

Coopar · 1. Juni 2006

Moin,

ich hab ein problem mit einer aus XML und XSL erstellten HTML-Datei!
Und zwar lege ich eine eigentlich unsichtbare Tabelle an mit drei Spalten und n Zeilen!
Das muss meines Erachtens (siehe Screenshot) an der 2.Spalte liegen. Aber wieso?
Im IE wird es einfach falsch angezeigt! Im firefox sieht alels gut aus!

Nun die XML-Datei:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="Uebung.xsl" type="text/xsl" ?>
<!DOCTYPE Uebung SYSTEM "Uebung.dtd">

<Uebung>
	<Ueberschrift>DSL - Übung</Ueberschrift>
	<Aufgabenstellung>
		<Aufgabentext>Finde das Teil, das die TeilNr. 56 hat!</Aufgabentext>
		<Tabelle Name = "Teil">
			<Zeile Art="headline">
				<Spalte><Inhalt>TeilNr</Inhalt></Spalte>
				<Spalte><Inhalt>Bezeichnung</Inhalt></Spalte>
				<Spalte><Inhalt>Material</Inhalt></Spalte>
				<Spalte><Inhalt>Gewicht</Inhalt></Spalte>
			</Zeile>
			<Zeile Art="values">
				<Spalte><Inhalt>23</Inhalt></Spalte>
				<Spalte><Inhalt>Schraube</Inhalt></Spalte>
				<Spalte><Inhalt>Niro</Inhalt></Spalte>
				<Spalte><Inhalt>3</Inhalt></Spalte>
			</Zeile>
			<Zeile Art="values">
				<Spalte><Inhalt>56</Inhalt></Spalte>
				<Spalte><Inhalt>Mutter</Inhalt></Spalte>
				<Spalte><Inhalt>Niro</Inhalt></Spalte>
				<Spalte><Inhalt>1</Inhalt></Spalte>
			</Zeile>
			<Zeile Art="values">
				<Spalte><Inhalt>17</Inhalt></Spalte>
				<Spalte><Inhalt>Bolzen</Inhalt></Spalte>
				<Spalte><Inhalt>Verzinkt</Inhalt></Spalte>
				<Spalte><Inhalt>17</Inhalt></Spalte>
			</Zeile>
			<Zeile Art="values">
				<Spalte><Inhalt>88</Inhalt></Spalte>
				<Spalte><Inhalt>Achse</Inhalt></Spalte>
				<Spalte><Inhalt>Alu</Inhalt></Spalte>
				<Spalte><Inhalt>5</Inhalt></Spalte>
			</Zeile>
			<Zeile Art="values">
				<Spalte><Inhalt>12</Inhalt></Spalte>
				<Spalte><Inhalt>Lager</Inhalt></Spalte>
				<Spalte><Inhalt>Alu</Inhalt></Spalte>
				<Spalte><Inhalt>8</Inhalt></Spalte>
			</Zeile>
		</Tabelle>
	</Aufgabenstellung>
	<Java>
		<Scriptbox>SELECT Bezeichnung FROM Teil WHERE TeilNr = 56 </Scriptbox>
		<Auswahlfelder>
			<Auswahlbox Box="SQL">
				<Auswahl><Auswahloption>SELECT </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>FROM </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>WHERE </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>LIKE </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>OR </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>AND </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>ORDER BY </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>ASC </Auswahloption></Auswahl>				
				<Auswahl><Auswahloption>DESC </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>COUNT( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>DISTINCT </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>MAX( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>MIN( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>SUM( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>AVG( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>( </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>) </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>AS </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>RIGHT JOIN </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>LEFT JOIN </Auswahloption></Auswahl>				
				<Auswahl><Auswahloption>INNER JOIN </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>USING </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>ON </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>EXISTS </Auswahloption></Auswahl>				
				<Auswahl><Auswahloption>NOT </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>UNION </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>INTERSECT </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>MINUS </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>IS </Auswahloption></Auswahl>
			</Auswahlbox>
			<Auswahlbox Box="Vergleiche">
				<Auswahl><Auswahloption>= </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>&lt; </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>&gt; </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>&lt;= </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>&gt;= </Auswahloption></Auswahl>
				<Auswahl><Auswahloption>NOT </Auswahloption></Auswahl>
			</Auswahlbox>
			<Auswahlbox Box="Tabellen">
				<Auswahl><Auswahloption>Teil </Auswahloption></Auswahl>
			</Auswahlbox>
		</Auswahlfelder>
	</Java>
</Uebung>

...die XSL-Datei:

Code:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<?xml-stylesheet href="CSS/Uebung.css" type="text/css"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
	<xsl:template match="/">
		<html>
			<head>
				<script type="text/javascript">
					
						function pruefen()
							{
							if(document.Box.Scriptbox.value == document.Loesung.Loesung.value)
								{
								alert("Die Lösung ist richtig!");
								return true;
								}
							else
								{
								alert("Die Lösung ist leider falsch!");
								return false;
								}
							}
										
						function rueckgaengig()
							{
							var laenge = document.Box.Scriptbox.value.length;
							var string = document.Box.Scriptbox.value;
							for (var i = laenge - 2; i >= 0;  i=i-1)
								{
									if(string.charAt(i) != " ")
										{
									   string = string.substring(0, i);
									   }
									else
										{
										/*string = string.substring(0, i+1);*/
										i = -1;
										}
								
								}
							document.Box.Scriptbox.value = string;
							return true;
							
							}
				</script>
			</head>
			<body>
			<div align="center">
				<xsl:for-each select="Uebung">
							<h1><xsl:value-of select="Ueberschrift"/></h1><br/><br/>
								Aufgabenstellung: <br/>
								Folgende Tabelle ist gegeben:<br/>
									<xsl:value-of select="Aufgabenstellung/Tabelle/@Name" />
									<table border="2">
										<xsl:for-each select="Aufgabenstellung/Tabelle/Zeile">
											<tr>
												<xsl:for-each select="Spalte">
													<td><xsl:value-of select="Inhalt" /></td>
												</xsl:for-each>
											</tr>
										</xsl:for-each>
									</table>								
								<xsl:value-of select="Aufgabenstellung/Aufgabentext" /><br/><br/>
								<form action=" " method="post" name="Loesung">
									<input type="hidden" name="Loesung">
										<xsl:attribute name="value"><xsl:value-of select="Java/Scriptbox" /></xsl:attribute>
									</input>									
								</form>	
								<table>
									<tr>
										<td>
											<form action=" " method="post" name="Box">
											<textarea rows="10" cols="30" name="Scriptbox" readonly="readonly"/>
											<br/>
											</form>
										</td>
										<td>
											<table border="2">
												<xsl:for-each select="Java/Auswahlfelder/Auswahlbox">
													<tr>										
														<td><xsl:value-of select="@Box" />:</td>
															<td><form action=" " method="post">
																	<xsl:attribute name="name">
																		<xsl:value-of select="@Box"/>
																	</xsl:attribute>
																	<select  size="1">
																		<xsl:attribute name="name">
																			<xsl:value-of select="@Box"/>
																		</xsl:attribute>
																		<xsl:for-each select="Auswahl">
																			<option>
																				<xsl:attribute name="value">
																					<xsl:value-of select="Auswahloption"/>
																				</xsl:attribute>
																				<xsl:value-of select="Auswahloption"/>
																			</option>
																		</xsl:for-each>
																	</select>
																</form>
															</td>															
															<td>
															<input type="button" value="Einfügen"> 
																<xsl:attribute name="onclick">
																	<xsl:value-of select="concat('document.Box.Scriptbox.value =',
																	 ' document.Box.Scriptbox.value.concat(document.',
																	 @Box,
																	'.',
																	@Box,
																	'.value)')" />
																</xsl:attribute>
																</input>
															</td>
														</tr>
												</xsl:for-each>
												<xsl:for-each select="Aufgabenstellung/Tabelle">
													<tr>
														<td><xsl:value-of select="@Name" />:</td>
														<td>
															<form action=" " method="post">
																<xsl:attribute name="name">
																	<xsl:value-of select="@Name" />
																</xsl:attribute>
																	<select size="1">
																		<xsl:attribute name="name">
																			<xsl:value-of select="@Name" />
																		</xsl:attribute>
																		<option value="*">*</option>
																		<xsl:for-each select="Zeile">
																			<xsl:if test="@Art='headline'">
																				<xsl:for-each select="Spalte">
																					<option>
																						<xsl:attribute name="value">
																							<xsl:value-of select="Inhalt" />																			
																						</xsl:attribute>
																						<xsl:value-of select="Inhalt" />																			
																					</option>
																				</xsl:for-each>
																			</xsl:if>
																		</xsl:for-each>	
																	</select>								
															</form>														
														</td>
														<td>
															<input type="button" value="Einfügen" >
															<xsl:attribute name="onclick">
																	<xsl:value-of select="concat('document.Box.Scriptbox.value =',
																	 ' document.Box.Scriptbox.value.concat(document.',
																	 @Name,
																	'.',
																	@Name,
																	'.value).concat(&quot; &quot;)')" />
																</xsl:attribute>
															</input>													
														</td>
													</tr>
												</xsl:for-each>
														<tr>
															<td>
																Attribute:					
															</td>
															<td>
																<form action=" " method="post" name="Attribute">
																	<select size="1" name="Attribute">
																		<xsl:for-each select="Aufgabenstellung/Tabelle/Zeile">
																			<xsl:if test="@Art='values'">
																				<xsl:for-each select="Spalte">
																					<option>
																						<xsl:attribute name="value">
																							<xsl:value-of select="Inhalt" />																			
																						</xsl:attribute>
																						<xsl:value-of select="Inhalt" />																			
																					</option>
																				</xsl:for-each>
																			</xsl:if>
																		</xsl:for-each>	
																	</select>								
																</form>														
															</td>
															<td>
															<input type="button" value="Einfügen" onclick="document.Box.Scriptbox.value = 
																														document.Box.Scriptbox.value.concat(document.Attribute.Attribute.value).concat(' ')" />
															</td>
														</tr>
														<tr>
															<td>
																Rückgängig:
															</td>
															<td><br/>
															</td>
															<td>	
																<input type="button" value="Rückgangig" onclick="rueckgaengig()" />
															</td>
														</tr>
														<tr>
															<td>
																Löschen:
															</td>
															<td><br/>
															</td>
															<td>	
																<input type="button" value="Löschen" onclick="document.Box.Scriptbox.value = ''" />
															</td>
														</tr>
											</table>
										</td>
									</tr>
								</table>
						</xsl:for-each>				
				<input type="button" value="Überprüfen" onclick="pruefen()"/>				
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

...und die geenerierte HTML-Datei (laut Altova XMLSpy):

Code:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script type="text/javascript">
					
						function pruefen()
							{
							if(document.Box.Scriptbox.value == document.Loesung.Loesung.value)
								{
								alert("Die LÃ¶sung ist richtig!");
								return true;
								}
							else
								{
								alert("Die LÃ¶sung ist leider falsch!");
								return false;
								}
							}
										
						function rueckgaengig()
							{
							var laenge = document.Box.Scriptbox.value.length;
							var string = document.Box.Scriptbox.value;
							for (var i = laenge - 2; i >= 0;  i=i-1)
								{
									if(string.charAt(i) != " ")
										{
									   string = string.substring(0, i);
									   }
									else
										{
										/*string = string.substring(0, i+1);*/
										i = -1;
										}
								
								}
							document.Box.Scriptbox.value = string;
							return true;
							
							}
				</script>
	</head>
	<body>
		<div align="center">
			<h1>DSL - Ãœbung</h1><br><br>
								Aufgabenstellung: <br>
								Folgende Tabelle ist gegeben:<br>Teil<table border="2">
				<tr>
					<td>TeilNr</td>
					<td>Bezeichnung</td>
					<td>Material</td>
					<td>Gewicht</td>
				</tr>
				<tr>
					<td>23</td>
					<td>Schraube</td>
					<td>Niro</td>
					<td>3</td>
				</tr>
				<tr>
					<td>56</td>
					<td>Mutter</td>
					<td>Niro</td>
					<td>1</td>
				</tr>
				<tr>
					<td>17</td>
					<td>Bolzen</td>
					<td>Verzinkt</td>
					<td>17</td>
				</tr>
				<tr>
					<td>88</td>
					<td>Achse</td>
					<td>Alu</td>
					<td>5</td>
				</tr>
				<tr>
					<td>12</td>
					<td>Lager</td>
					<td>Alu</td>
					<td>8</td>
				</tr>
			</table>Finde das Teil, das die TeilNr. 56 hat!<br><br><form action=" " method="post" name="Loesung"><input type="hidden" name="Loesung" value="SELECT Bezeichnung FROM Teil WHERE TeilNr = 56 "></form>
			<table>
				<tr>
					<td>
						<form action=" " method="post" name="Box"><textarea rows="10" cols="30" name="Scriptbox" readonly></textarea><br></form>
					</td>
					<td>
						<table border="2">
							<tr>
								<td>SQL:</td>
								<td>
									<form action=" " method="post" name="SQL"><select size="1" name="SQL"><option value="SELECT ">SELECT </option>
											<option value="FROM ">FROM </option>
											<option value="WHERE ">WHERE </option>
											<option value="LIKE ">LIKE </option>
											<option value="OR ">OR </option>
											<option value="AND ">AND </option>
											<option value="ORDER BY ">ORDER BY </option>
											<option value="ASC ">ASC </option>
											<option value="DESC ">DESC </option>
											<option value="COUNT( ">COUNT( </option>
											<option value="DISTINCT ">DISTINCT </option>
											<option value="MAX( ">MAX( </option>
											<option value="MIN( ">MIN( </option>
											<option value="SUM( ">SUM( </option>
											<option value="AVG( ">AVG( </option>
											<option value="( ">( </option>
											<option value=") ">) </option>
											<option value="AS ">AS </option>
											<option value="RIGHT JOIN ">RIGHT JOIN </option>
											<option value="LEFT JOIN ">LEFT JOIN </option>
											<option value="INNER JOIN ">INNER JOIN </option>
											<option value="USING ">USING </option>
											<option value="ON ">ON </option>
											<option value="EXISTS ">EXISTS </option>
											<option value="NOT ">NOT </option>
											<option value="UNION ">UNION </option>
											<option value="INTERSECT ">INTERSECT </option>
											<option value="MINUS ">MINUS </option>
											<option value="IS ">IS </option>
										</select></form>
								</td>
								<td><input type="button" value="EinfÃ¼gen" onclick="document.Box.Scriptbox.value = document.Box.Scriptbox.value.concat(document.SQL.SQL.value)"></td>
							</tr>
							<tr>
								<td>Vergleiche:</td>
								<td>
									<form action=" " method="post" name="Vergleiche"><select size="1" name="Vergleiche"><option value="= ">= </option>
											<option value="&lt; ">&lt; </option>
											<option value="&gt; ">&gt; </option>
											<option value="&lt;= ">&lt;= </option>
											<option value="&gt;= ">&gt;= </option>
											<option value="NOT ">NOT </option>
										</select></form>
								</td>
								<td><input type="button" value="EinfÃ¼gen" onclick="document.Box.Scriptbox.value = document.Box.Scriptbox.value.concat(document.Vergleiche.Vergleiche.value)"></td>
							</tr>
							<tr>
								<td>Tabellen:</td>
								<td>
									<form action=" " method="post" name="Tabellen"><select size="1" name="Tabellen"><option value="Teil ">Teil </option>
										</select></form>
								</td>
								<td><input type="button" value="EinfÃ¼gen" onclick="document.Box.Scriptbox.value = document.Box.Scriptbox.value.concat(document.Tabellen.Tabellen.value)"></td>
							</tr>
							<tr>
								<td>Teil:</td>
								<td>
									<form action=" " method="post" name="Teil"><select size="1" name="Teil"><option value="*">*</option>
											<option value="TeilNr">TeilNr</option>
											<option value="Bezeichnung">Bezeichnung</option>
											<option value="Material">Material</option>
											<option value="Gewicht">Gewicht</option>
										</select></form>
								</td>
								<td><input type="button" value="EinfÃ¼gen" onclick="document.Box.Scriptbox.value = document.Box.Scriptbox.value.concat(document.Teil.Teil.value).concat(&quot; &quot;)"></td>
							</tr>
							<tr>
								<td>
																Attribute:					
															</td>
								<td>
									<form action=" " method="post" name="Attribute"><select size="1" name="Attribute"><option value="23">23</option>
											<option value="Schraube">Schraube</option>
											<option value="Niro">Niro</option>
											<option value="3">3</option>
											<option value="56">56</option>
											<option value="Mutter">Mutter</option>
											<option value="Niro">Niro</option>
											<option value="1">1</option>
											<option value="17">17</option>
											<option value="Bolzen">Bolzen</option>
											<option value="Verzinkt">Verzinkt</option>
											<option value="17">17</option>
											<option value="88">88</option>
											<option value="Achse">Achse</option>
											<option value="Alu">Alu</option>
											<option value="5">5</option>
											<option value="12">12</option>
											<option value="Lager">Lager</option>
											<option value="Alu">Alu</option>
											<option value="8">8</option>
										</select></form>
								</td>
								<td><input type="button" value="EinfÃ¼gen" onclick="document.Box.Scriptbox.value =                                document.Box.Scriptbox.value.concat(document.Attribute.Attribute.value).concat(' ')"></td>
							</tr>
							<tr>
								<td>
																RÃ¼ckgÃ¤ngig:
															</td>
								<td><br></td>
								<td><input type="button" value="RÃ¼ckgangig" onclick="rueckgaengig()"></td>
							</tr>
							<tr>
								<td>
																LÃ¶schen:
															</td>
								<td><br></td>
								<td><input type="button" value="LÃ¶schen" onclick="document.Box.Scriptbox.value = ''"></td>
							</tr>
						</table>
					</td>
				</tr>
			</table><input type="button" value="ÃœberprÃ¼fen" onclick="pruefen()"></div>
	</body>
</html>

Screenshot (IE):
http://www.room21.de/IE2.jpg

Screenshot (FF):
http://www.room21.de/FF2.jpg

Vielen dank schon mal für die Hilfe!

Sven Mintel · 2. Juni 2006

Also wenn du mit "breit" ..."hoch" meinen solltest:

Das wird bei mir im FF genauso wie im IE gezeigt.
Grund: <form> ist ein Blockelement, welche einen Absatz erzeugen...daher der Freiraum nach den <select>'s...diese befinden sich ja jeweils innerhalb eines Formulars.

Abhilfe:

Code:

<style type="text/css">
<!--
form{display:inline}
-->
</style>

✔ Zeile zu breit - warum?

Coopar

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge