• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Firefox packtextsd tabelle nicht ins div

N

nieselfriem

Mitglied
Hallo!

Ich erstelle eine relativ komplexes Formular. Ist auch alles soweit ok. Jedoch wird die im Quelltext unten stehende Tabelle im Firefox nicht an der richtigen Position dargestellt. Statt im div "rightdown" ist sie komplett außerhalb des gesamten Formulars zu sehen. Im Grunde genommen rechts daneben. Im Opera, ja und sogar im heiß geliebten IE 9 wird es richtig dargestellt

HTML: 
<?xml version="1.0" ?>
<!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=utf-8" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<title>New Web Project</title>
	</head>
	<body>
		<h1>New Web Project Page</h1>
		<form action="test.php" method="post">
			<div id="wrapper">
				<div id="head">
					<input type="button" name="newAn"/>
					<input type="button" name="newAn"/>
					<input type="button" name="newAn"/>
				</div>
				<div id="left">
					<fieldset>
						<legend>
							Schnellauswahl
						</legend>
						<select>
							<option value="volvo">Volvo</option>
							<option value="saab">Saab</option>
							<option value="mercedes">Mercedes</option>
							<option value="audi">Audi</option>
						</select>
					</fieldset>
				</div>
				<div id ="right">
					<div id="rightup">
						<div id="quickdatasleft">
							<fieldset>
								<legend></legend>
								<table border="0">
									<tr>
										<td>Kundenummer:</td><td>
										<input class="formspaces" type="text" name="knr" size="8"/>
										<input type="checkbox" name="anrede"/>
										Herr
										<input type="checkbox" name="anrede"/>
										Frau</td>
									</tr>
									<tr>
										<td>Name:</td><td>
										<input class="formspaces" type="text" name="anname"/>
										</td>
									</tr>
									<tr>
										<td>Vorname:</td><td>
										<input class="formspaces" type="text" name="anvorname"/>
										</td>
									</tr>
									<tr>
										<td> Geburtsdatum:</td><td>
										<input class="formspaces" type="text" name="gebDat" size="10"/>
										Alter
										<input class="formspaces" type="text" name="anname" size="2"/>
										</td>
									</tr>
									<tr>
										<td>Stra&szlig;e/Hausnr.:</td><td>
										<input class="formspaces" type="text" name="adresse"/>
										</td>
									</tr>
									<tr>
										<td>PLZ/Ort:</td><td>
										<input class="formspaces" type="text" name="plz" size="5"/>
										<input class="formspaces" type="text" name="ort" size="11"/>
										</td>
									</tr>
									<tr>
										<td> F&uuml;hrerschein: </td><td>
										<input class="formspaces" type="text" name="anname"/>
										</td>
									</tr>
									<tr>
										<td> Auto: </td><td>
										<input type="checkbox" name="auto"/>
										</td>
									</tr>
									<tr>
										<td> Arbeitsort: </td><td>
										<input class="formspaces" type="text" name="arbeitsort"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
						<div id="quickdatasright">
							<fieldset>
								<legend></legend>
								<table>
									<tr>
										<td>Vermittlungssvertrag: </td><td>
										<input class="formspaces" type="checkbox" name="vermittlunsv" />
										<input type="text" name="prov" size="5"/>
										</td>
									</tr>
									<tr>
										<td>Aufgenommen von: </td><td>
										<input class="formspaces" type="text" name="aufgenommenV" />
										</td>
									</tr>
									<tr>
										<td>Aufgenommen am: </td><td>
										<input class="formspaces" type="text" name="aufgenommenAm"/>
										</td>
									</tr>
									<tr>
										<td>Verdienst: </td><td><textarea class="formspaces" cols="9" rows="6"></textarea></td>
									</tr>
									<tr>
										<td>Arbeitslos seit: </td><td>
										<input class="formspaces" type="text" name="arbeitslos"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
						<div id="quickdatascenter">
							<fieldset>
								<legend></legend>
								<table border="0">
									<tr>
										<td>in Arbeit:</td><td>
										<input class="formspaces" type="text" name="inarbeit"/>
										</td>
									</tr>
									<tr>
										<td>Note Arbeit: </td><td>
										<input class="formspaces" type="text" name="notearbeit"/>
										</td>
									</tr>
									<tr>
										<td>Note pers&ouml;nlich: </td><td>
										<input class="formspaces" type="text" name="notepers"/>
										</td>
									</tr>
									<tr>
										<td>Familiestand: </td><td>
										<input class="formspaces" type="text" name="familienstand"/>
										</td>
									</tr>
									<tr>
										<td>Gutschein: </td><td>
										<input type="checkbox" />
										</td>
									</tr>
									<tr>
										<td>Gutschein g&uuml;ltig:</td><td>
										<input class="formspaces" type="text" name="gutschguelt"/>
										</td>
									</tr>
									<tr>
										<td>Ablage: </td><td>
										<input class="formspaces" type="text" name="ablage"/>
										</td>
									</tr>
									<tr>
										<td>Prim&auml;rkontak: </td><td>
										<input class="formspaces" type="text" name="primkon"/>
										</td>
									</tr>
								</table>
							</fieldset>
						</div>
					</div>
					<div id="rightdown">
						<div><ul id="simple-navi">
							<li>
								<a href="x">Berufe</a>
							</li>
							<li>
								<a href="x">Vermittlungsversuche</a>
							</li>
							<li>
								<a href="x">Kontakt</a>
							</li>
							<li>
								<a href="x">Weiterbildung/Berufserfahrung</a>
							</li>
							<li>
								<a href="x">Bemerkungen</a>
							</li>
							<li>
								<a href="x">Historie</a>
							</li>
							<li>
								<a href="x">wichtige Bemerkungen</a>
							</li>
							<li>
								<a href="x">Dokumente</a>
							</li>
						</ul>
						</div> 
						
						<table width="300" cellpadding="0" cellspacing="0" border="1">
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
								<tr><td>dsdf</td><td>dsfdsf</td></tr>
						</table>
					</div>
				</div>
			</div>
		</form>
	</body>
</html>

und das dazu gehörige css
Code: 
#wrapper {
	
	width: 1200px;
	height: 620px;
	background-color: red;
	border-style:solid;
 
}

#left {
	float: left;
	background-color: green;
	width: 20%;
	height: 100%
}

#right {
	background-color: blue;
	height: 100%;
	width:80%;
	float:right;
}

#rightup {
	width: 100%;
	height: 305px;
	margin-bottom: 10px;
	background-color: yellow;
	
}

#rightdown {
	width: 100%;
	height: 305px;
	//margin-top: 10px;
	background-color: red;
	
}
#quickdatasleft {
	float: left;
	width: 33%;
	height: 100%
	background-color: green;
	/*border-style: solid;*/
	/*border-width:thin;*/
	
}

#quickdatasright {
	float: right;
	width: 33%;
	/*border-style: solid;*/
	/*border-width:thin;*/
	
}

#quickdatascenter {
/*border-style: solid;*/
	/*border-width:thin;*/
}

#tablechoice {
	height: 20px;
	background-color: blue;
    border-style: solid;
	border-width:thin;
}


ul#simple-navi {
  list-style-type: none;
  width: 960px;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0 0 0;
   background-color: #333;
}  

ul#simple-navi li {
  display: block;
  float:left;
   margin: 0 0 0 3px;
}
 
ul#simple-navi li a {
  display: block;
  padding: 5px 8px;
  color: #fff;
  background-color: #999;
  text-decoration: none;
}

ul#simple-navi li.active a,
ul#simple-navi li a:hover {
  background-color: #fff;
  color: #CC3366;
}
.formspaces {
	margin: 2px;
}
body {
	font-family: "Arial"
}

form {
	font-size: 12px;
	
}

Was läuft da verkehrt?

P.S.: Sorry für die Farben ;). Die sind nur zu Orientierung.

Gruß niesel
 
Werbung:
Was mir auffällt: Die input-Elemente sind unterschiedlich groß. Denen könntest du explizit Style-Eigenschaften (width, height, …) setzen. Möglicherweise löst das schon dein Problem.

CSS kennt außerdem nur die /**/-Kommentare.

Code: 
//margin-top: 10px;

Und hier fehlt ein Semikolon:

Code: 
#quickdatasleft {
	float: left;
	width: 33%;
	height: 100%
	background-color: green;
	/*border-style: solid;*/
	/*border-width:thin;*/

}
 
In der CSS Datei Zeile 73 das Float:left.

Das UL-Element soll ja nicht floaten, nur die LI-Elemente.

P.S. Vergiss nicht nach verwendung von Float, die Float's zu "clearen".

<div style="float:left;">trlol</div>
<div style="float:left;">lolol</div>
<br style="clear:both;"/>

Hier deine CSS Datei mit paar beseitigten Fehlern.

HTML: 
#wrapper {
    
    width: 1200px;
    height: 620px;
    background-color: red;
    border-style:solid;
 
}

#left {
    float: left;
    background-color: green;
    width: 20%;
    height: 100%;
}

#right {
    background-color: blue;
    height: 100%;
    width:80%;
    float:right;
}

#rightup {
    width: 100%;
    height: 305px;
    margin-bottom: 10px;
    background-color: yellow;
    
}

#rightdown {
    width: 100%;
    height: 305px;
    /*margin-top: 10px*/;
    background-color: red;
    
}
#quickdatasleft {
    float: left;
    width: 33%;
    height: 100%;
    background-color: green;
    /*border-style: solid;*/
    /*border-width:thin;*/
    
}

#quickdatasright {
    float: right;
    width: 33%;
    /*border-style: solid;*/
    /*border-width:thin;*/
    
}

#quickdatascenter {
/*border-style: solid;*/
    /*border-width:thin;*/
}

#tablechoice {
    height: 20px;
    background-color: blue;
    border-style: solid;
    border-width:thin;
}


ul#simple-navi {
  list-style-type: none;
  width: 960px;
  float: left;
  font-family: Verdana ,Arial,sans-serif;
  font-size: 10px;
  font-weight: bold;
  margin: 0;
  padding: 5px 0 0 0;
   background-color: #333;
}  

ul#simple-navi li {
  display: block;
  float:left;
   margin: 0 0 0 3px;
}
 
ul#simple-navi li a {
  display: block;
  padding: 5px 8px;
  color: #fff;
  background-color: #999;
  text-decoration: none;
}

ul#simple-navi li.active a,
ul#simple-navi li a:hover {
  background-color: #fff;
  color: #CC3366;
}
.formspaces {
    margin: 2px;
}
body {
    font-family: "Arial"
}

form {
    font-size: 12px;
    
}
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben