Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 09.01.2009, 11:35
Benutzerbild von theTJ
theTJ theTJ ist offline
layout just without table
neuer user
Thread-Ersteller
 
Registriert seit: 09.01.2009
Ort: Augsburg
Beiträge: 5
theTJ befindet sich auf einem aufstrebenden Ast
Frage text-input rechtsbündig - IE versteckt letztes Zeichen

moin,

ich hab sein ner Weile das Problem, das ich in einem Formular für die Änderung von Preisen und %-Werten Eingabefelder mit "text-align: right" habe.

Ich hab mal recherchiert, aber es muss sich wohl aus einer Wecheselwirkung mit anderen CSS-Eigenschaften her aus so bilden, das im IE, bei einem leeren Feld den Cursor ganz rechts nicht anzeigt und das letzte Zechen in der Textbox (zum teil) verschwindet.


der Screenshot zeigt die betroffenen Felder im IE6

das zugehörige CSS:
Code:
html, body, p, h1, h2, h3, h4, h5, h6, span, a, div
{
	padding:	0px;
	margin:	0px;
}

html body div#adminbox,
html body div#adminnav
{
	height:	100%;
	font-size:	10px;
	line-height:	14px;
}
/* ADMIN */
div#adminnav
{
	width:	330px;
	float:		left;
	margin-top:	155px;
	display: 	block;
	text-align:	right;
	margin-right:20px;
}
div#adminbox
{
	min-width:	600px;
	margin-top:	155px;
	padding-top:5px;
	padding-left:5px;
	display:	block;
	float:		left;
	width:	768px;
}
/* Tabelle mit Daten */
table#data
{
	width:	100%;
	margin-bottom:	2em;
}

table#data th
{
	border-bottom:	1px black dotted;
	text-align:	left;
}

table#data a:link,
table#data a:visited
{
	color: #C50000;
}
table#data td
{
	padding: 2px;
}

table#data td input.netto
{
	background-color: transparent;
	border: none;
}

table#data td input,
table#data td select
{
	width:	100%;
	color:	#000000;
}

img.img_button
{
	cursor: pointer;
}

td.R, td.L, td.F 
{
	text-align:	left;
	cursor:	default;
}
/* Eingabefelder */
td.R input, td.L input, td.F input,
tr.R td input, tr.L td input, tr.F td input
{
	text-align:	right;
	font-size:		0.9em;
}

td.R { background-color: #33C533; }
td.L { background-color: #C53333; }
td.F { background-color: #FFC533; }
(nicht betroffene [weder elternelemente der betroffenen inputs nocht ähnliche] Selektoren weggelassen)

HTML-Code:
<table id="data" border="0">
	<colgroup>
		<col style="width:50px;" />
		<col style="overflow:hidden;" />
		<col style="width: 15px;" />		
		<col style="width: 70px;" />
		<col style="width: 15px;" />
		<col style="width: 70px;" />
		<col style="width: 15px;" />
		<col style="width: 70px;" />
		<col style="width: 15px;" />
		<col style="width: 30px;" />
		<col style="width: 15px;" />
		<col style="width: 30px;" />
		<col style="width: 15px;" />
		<col style="width: 43px;" />
		<col style="width: 15px;" /> 
		<col style="width: 37px;" />
		<col style="width: 15px;" />
	</colgroup>
	<tr>
		<th title="Angebot-ID">ID</th>

		<th>Titel</th>
		<th title="Typ">&nbsp;</th>
		<th colspan="2">Preis (Brutto)</th>
		<th colspan="2">Preis (Netto)</th>
		<th colspan="2">EK-Preis</th>
		<th colspan="2" title="Provision">Prov.</th>
		<th colspan="2" title="Bankspesen">Bank</th>
		<th colspan="2" title="Umsatzsteuer">IVA</th>
		<th title="Leistungscode">LC</th>
		<th>&nbsp;</th>
	</tr>
	<tr>
		<td>1860<input type="hidden" value="339" /></td>

		<td>
			Corso base di parapendio<input type="hidden" value="Corso base di parapendio" />
		</td>
		<td class="R" title="Redaktionelle Version">R</td>
		
		<td class="R">
			<input type="text" maxlength="8" value="110,00" />
			<input type="hidden" value="110.00" />
		</td>

		<td class="R">&euro;</td>
		<td class="R">
			<input type="text" class="netto" value="91,67" readonly="readonly" />
			<input type="hidden" value="91.6666666667" />
		</td>
		<td class="R">&euro;</td>					
		<td class="R">
			<input type="text" maxlength="8" value="4,00" />
			<input type="hidden" value="4.00" />

		</td>
		<td class="R">&euro;</td>					
		<td class="R">
			<input  type="text" maxlength="5" value="11,00" />
			<input type="hidden" value="11.00" />
		</td>
		<td class="R">%</td>					
		<td class="R">
			<input type="text" maxlength="5" value="1,20" />
			<input type="hidden" value="1.20" />
		</td>
		<td class="R">%</td>					
		<td class="R">
			<select><option value=" ">&nbsp;</option><option value="0">10</option><option value="1" selected="selected">20</option></select>						<input type="hidden" value="1" name="hd_r_us[1860]" id="hd_r_us_1860" />
		</td>
		<td class="R">%</td>					
		<td class="R">

			<select><option value=" ">&nbsp;</option><option value="G" selected="selected">G</option><option value="L">L</option><option value="S">S</option></select>						<input type="hidden" value="G" name="hd_r_lc[1860]" id="hd_r_lc_1860" />
		</td>
		<td><input type="image"	src="../img/icon_speichern.gif" onclick="f_save('1860')" alt="save" class="img_button savebutton" tabindex="020" /></td>	
	</tr>

	<tr>
		<td>&nbsp;</td>
		<td>

			<a href="[...]">
				Corso base di parapendio						</a>
		</td>
		<td class="L" title="Live!">L</td>
		<td class="L">
			<input type="text" maxlength="8" value="120,00" />
			<input type="hidden" value="120.00" />
		</td>

		<td class="L">&euro;</td>
		
		
		<td class="L">
			<!--<img src="../img/aktuallisieren.gif" alt="akt" class="aktualisieren" title="Nettopreis aktuallisieren" onclick="aktNetto(1860,'L')" />-->
			<input type="text" class="netto" value="109,09" readonly="readonly" />
			<input type="hidden" value="109.090909091" />
		</td>
		<td class="L">&euro;</td>
		
		<td class="L">
			<input type="text" maxlength="8" value="400,00" />
			<input type="hidden" value="400.00" />
		</td>
		<td class="L">&euro;</td>
		<td class="L">
			<input type="text" maxlength="5" value="11,00" />
			<input type="hidden" value="11.00" />
		</td>
		<td class="L">%</td>

		<td class="L">
			<input type="text" maxlength="5" value="1,20"  />
			<input type="hidden" value="1.20" />
		</td>
		<td class="L">%</td>
		<td class="L">
			<select><option value=" ">&nbsp;</option><option value="0" selected="selected">10</option><option value="1">20</option></select>						<input type="hidden" value="0" name="hd_l_us[1860]" id="hd_l_us_1860" />

		</td>
		<td class="L">%</td>
		<td class="L">
			<select><option value=" ">&nbsp;</option><option value="G">G</option><option value="L" selected="selected">L</option><option value="S">S</option></select>						<input type="hidden" value="L" name="hd_l_lc[1860]" id="hd_l_lc_1860" />
		</td>
		<td>&nbsp;</td>	
	</tr>
</table>
(IDs, NAMEs, TABINDEX und js-eventhandler aus übersichtlichkeitsgründen herausgenommen.)

Das der "allgemeine" oder Basis-Reset Schuld ist (also *{margin:0; padding:0}) ist inzwischen ausgeschlossen, da mir beim durchforsten dieses Forums die idee kam.

greetz

theTJ
Angehängte Grafiken
Dateityp: jpg rb-text-cut.jpg (13,7 KB, 7x aufgerufen)

Geändert von theTJ (09.01.2009 um 11:39 Uhr) Grund: CSS-Code erklärung
Mit Zitat antworten
Sponsored Links