Rozdílný levý okraj u INPUTu vOpeře a vIE [ex/em model]

Rozdílný levý okraj u INPUTu vOpeře a vIE [ex/em model]

Věrný člen

20. 10. 2007 #1

<[podtrzene]HTML[/podtrzene]> .....odstraněno vše co s problémem nesouvisí
<form>
<label>xxxxxx</label><input type='text'><br>
<label>xxxxxx</label><input type='text'><br>
<label>xxxxxx</label><input type='text'><br>
<label>xxxxxx</label><input type='text'><br>
</form>
<[podtrzene]POPIS-FORMÁT[/podtrzene]>
Dal jsem si záležet,abych dosáhl shodného vzhledu v různých prohlížečích+při různém nastavení velikosti písma:
(všude použity jednotky ex/em a stejná velikost písma)
<[podtrzene]POPIS-FORMÁT[/podtrzene]>
a) šířka LABEL = šířka INPUT = 20ex
b) šířka formuláře je nastavena buď jako součet LABEL+INPUT (+marginy) =45ex
nebo při úzkém formátu (prvky jsou pod sebou) =23ex
<[podtrzene]TEST V OPEŘE & IE7[/podtrzene]>
Všechno funguje, rozměry všech prvků shodné, až na jednu věc:
V zúženém formátu - form.narrow { width:23ex } - leží INPUT na samostatném řádku.
Avšak IE zobrazuje [podtrzene]levou hranu INPUTu v jiné vzdálenosti od (levé) hrany FORMu [/podtrzene]než je tomu v Opeře (a zřejmě dalších browserech).
<[podtrzene]PROBLÉM[/podtrzene]>
Nedala by se nějak "vyrobit" jednotná mezera pro všechny browsery? ( přece by měla být 1ex ~ INPUT{leftMargin} )
Nebo mám někde chybu ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html><head><title>width of FORM [ex/em]</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>

<style>

html,body {margin:0;padding:0; font: 100%/1 "Courier New"}



form#calc.wide  { width:45ex }   /* ZDE SE NASTAVUJE */

form#calc.narrow { width:23ex }   /*  ŠÍŘKA FORMuláře */



form#calc { padding: 0.5ex 0; margin: 1ex; border: 1px solid blue; background: #CCC;

}

input {

display:inline;

height: 3ex;

width: 20ex;

margin: 0.25ex 1ex 0.75ex 1ex;

border:1px outset blue;

vertical-align:top;

font: 100%/1 "Courier New";

}

label {

float:left;

display:block;

width: 20ex;

margin: 0.8ex 0 0.2ex 1ex;

}

br,label {clear: both}

</style>

<body>

<script>

/* Podle toho, jakou část obrazovky okno zabírá, nastaví šířku FORM:  */

/* ------------ Reaguje na každou změnu velikosti okna -------------  */

window.onload=window.onresize=function(){document.getElementById('calc').className=(document.body.clientWidth<(screen.availWidth/2))?"narrow":"wide"}



/* function vypocti(){..naplní INPUTy hodnotami....} Vynecháno - nesouvisí s problémem */

 </script>



<form onsubmit="return vypocti()" id="calc">

  <label> isNaN(str)        </label><input type='text' name='test1' readonly><br>

  <label> jeCislo(str)      </label><input type='text' name='test2' readonly><br>

  <label> fnRegExp(str)     </label><input type='text' name='out1' readonly><br>

  <label> eval(str)         </label><input type='text' name='out2' readonly><br>

  <label> Number(str)       </label><input type='text' name='out3' readonly><br>

  <label> parseInt(str)     </label><input type='text' name='out4' readonly><br>

  <label> parseInt(str,10)  </label><input type='text' name='out5' readonly><br>

  <label> parseFloat(str)   </label><input type='text' name='out6' readonly><br>

</form>



</body>

</html>

Nahlásit jako SPAM

IP: ...–

Petroff0

Věrný člen

20. 10. 2007 #2

Aby toho nebylo málo, tak při změně velikosti písma (+ i -) v FF se text v labelu chová divně - při některých hodnotách přeteče ven z labelu.
Nevíte jak to zařídit, aby se velikost textu měnila úměrně velikosti labelu? (volba font-family/size popř. volba jednotek šířky)

Napadlo mě,zda by nešlo využít rys charakteristický pro neproporcionální písmo - při jakémkoli zvětšení jsou všechny znaky stejně široké (i mezera). Pokud bych tedy všechny texty doplnil mezerami na počet 16 = nejdelší text a nastavil labelům width:auto, mělo by to fungovat (je to ovšem krkolomnost až běda).

Nahlásit jako SPAM

IP: ...–