webForumDet fria alternativet

höjd i cell skiljer sig mellan firefox och IE

HTML & CSS

4 svar · 397 visningar · startad av Addeladde

Medlem sedan jan. 20013 406 inlägg
Frågan#1
<table width="526" border="0" cellspacing="0" cellpadding="0">
     <form method="post" name="registrera" action="?action=SKICKA" onSubmit="return submitForm()">
     <tr>
       <td style="width:270px;"><input name="namn" type="text" class="inputField255" id="namn" tabindex="1"></td>
       <td><input name="telefon" type="text" class="inputField255" id="telefon" tabindex="6"></td>
     </tr>
     <tr>
       <td colspan="2" style="height: 18px;"><img src="bilder/spacer.gif" alt="" width="1" height="1"></td>
      </tr>
     <tr>
       <td style="width:270px;"><input name="personnummer" tabindex="2" type="text" class="inputField255" id="personnummer" onkeyup="tabPersnr();"></td>
       <td><input name="mobiltelefon" type="text" class="inputField255" id="mobiltelefon" tabindex="7"></td>
     </tr>
     <tr>
       <td colspan="2" style="height: 17px;"><img src="bilder/spacer.gif" alt="" width="1" height="1"></td>
      </tr>
     <tr>
       <td style="width:270px;"><input name="gatuadress" tabindex="3" type="text" class="inputField255" id="gatuadress"></td>
       <td><input name="epost" type="text" class="inputField255" id="epost" tabindex="8"></td>
     </tr>
     <tr>
       <td style="width:269px; height: 18px;"><img src="bilder/spacer.gif" alt="" width="1" height="1"></td>
       <td rowspan="2" align="right" valign="bottom"><div id="kryssruta"><img src="bilder/spacer.gif" alt=" " width="16" height="15" onClick="if(document.getElementById('villkor').value=='1'){this.src='bilder/spacer.gif'; document.getElementById('villkor').value='0'} else {this.src='bilder/kryss.gif'; document.getElementById('villkor').value='1'}"></div>
       <div id="villkortext">&nbsp;</div><div id="knappContainer"><input type="image" name="imageField" src="bilder/skicka.gif" tabindex="9"></div></td>
     </tr>
     <tr>
       <td style="width:269px;">
         <input name="postnummer" type="text" class="inputField85" id="postnummer" tabindex="4">
         <input name="postort" type="text" class="inputField163" id="postort" tabindex="5">
       </td>
      </tr>
			<input type="hidden" id="villkor" name="villkor" value="0">
			</form>
   </table>

Varför skiljer sig höjden?

Medlem sedan juli 20013 378 inlägg
#2

Hmm.... §e

Felahanteringen i webbläsarna reagerar lite olika när det gäller just den där felaktiga kodkombinationen... §e

Hursomhelst En <form> får inte ligga "mellan raderna" sådär i en tabell, så där kanske du har en första orsak ;)...

Utöver det - Vad kör du med för <!DOCTYPE ? (höjdfördelning mellan tabellrader hanteras lite olika i Standards mode och Quirks mode)
Har du någon CSS kopplad till sidan som kan tänkas påverka t.ex. typsnittsstorlekar?

... finns säkert fler frågor... Har du möjlighet att lägga upp *hela* koden (eller länka till den) ?

Medlem sedan jan. 20013 406 inlägg
#3

Fixat!

Gjorde om det utan tabeller

Medlem sedan mars 20041 505 inlägg
#4

Posta gärna din färdiga kod, om du vill :)

Medlem sedan jan. 20013 406 inlägg
#5
<div id="container">
   <form method="post" name="registrera" action="?action=SKICKA" onSubmit="return submitForm()" id="formContainer">
     <input name="namn" type="text"  id="namn" tabindex="1">
     <input name="telefon" type="text"  id="telefon" tabindex="6">
     <input name="personnummer" tabindex="2" type="text"  id="personnummer" onkeyup="tabPersnr();">
     <input name="mobiltelefon" type="text"  id="mobiltelefon" tabindex="7">
     <input name="gatuadress" tabindex="3" type="text"  id="gatuadress">
     <input name="epost" type="text" id="epost" tabindex="8">
     <input name="postnummer" type="text" id="postnummer" tabindex="4">
     <input name="postort" type="text" id="postort" tabindex="5">
		 <div id="kryssruta" onClick="if(document.getElementById('villkor').value=='1'){document.getElementById('kryssbild').src='bilder/spacer.gif'; document.getElementById('villkor').value='0'} else {document.getElementById('kryssbild').src='bilder/kryss.gif'; document.getElementById('villkor').value='1'}"><img src="bilder/spacer.gif" alt=" " style="width:16px; height: 15px;" id="kryssbild"></div>
     <div id="villkortext" onClick="modalDialogShow('avtal.html',600,570);"></div>
     <input type="image" name="imageField" src="bilder/skicka.gif" tabindex="9" id="knapp">
     <input type="hidden" id="villkor" name="villkor" value="0">
   </form>
</div>

css

/* CSS Document */
body{
  margin: 0px; /* hälften av höjden */

}
#container { 
	background-image:url(bilder/bak.jpg);
	background-repeat:no-repeat;
	width:586px;
	height: 552px;
	left: 50%;
	margin-left: -293px; /* hälften av bredden  för centrering*/
	margin-top: 40px;
	position: absolute;
}

#formContainer { 
  width:525px;
	height: 200px;
	padding-left: 31px;
	padding-top: 379px;
}

#tack { 
	background-image:url(bilder/tack.jpg);
	background-repeat:no-repeat;
	width:586px;
	height: 552px;
	left: 50%;
	margin-left: -293px; /* hälften av bredden  för centrering*/
	margin-top: 40px;
	position: absolute;
}

#formContainer input{
  background-color: #000000;
	border: 1px solid #333333;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#999999;
}

form #namn{
	height: 16px;
	width: 255px;
	float: left;
}

form #telefon{
	height: 16px;
	width: 255px;
	float: right;
}

form #personnummer{
	clear: both;
	height: 16px;
	width: 255px;
	float: left;
	margin-top: 18px;
}

form #mobiltelefon{
	height: 16px;
	width: 255px;
	float: right;
	margin-top: 18px;
}

form #gatuadress{
	clear: both;
	height: 16px;
	width: 255px;
	float: left;
	margin-top: 18px;
}

form #epost{
	height: 16px;
	width: 255px;
	float: right;
	margin-top: 18px;
}

form #postnummer{
	clear: both;
	height: 16px;
	width: 85px;
	float: left;
	margin-top: 18px;
}

form #postort{
	height: 16px;
	width: 163px;
	float: left;
	margin-top: 18px;
	margin-left: 5px;
	margin-right: 11px;
}

#knapp{
  float: right;
	margin-top: 10px;
	border:0;
}

#villkortext{
  margin-top: 18px;
	float: left;
  width: 102px;
	height: 20px;
	cursor: pointer;
}

#kryssruta{
  margin-top: 18px;
	float: left;
  width: 18px;
	height: 17px;
	cursor: pointer;
	padding-top: 3px;
	padding-left: 2px;
	margin-right: 4px;
}

td{ line-height: 0; }
267 ms totalt · 4 externa anrop · v20260731065814-full.a51de22e
127 ms — deklarationer (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)
117 ms — ändringar (db)