Stejný L.okraj u INPUT vOpeře a vIE [ex/em model]

Stejný L.okraj u INPUT vOpeře a vIE [ex/em model]

Věrný člen

20. 10. 2007 #1

[podtrzene]OMLOUVÁM SE, PROBLÉM LEŽÍ MIMO POUŽITÝ JS, TEDY CSS/XHTML/IEbugy.....už se stalo (....SMAZAT).[/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 a v IE má jeho levá hrana jinou vzdálenost od (levé) hrany FORMu než je tomu v Opeře.
<[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>