Rozdílný levý okraj u INPUTu vOpeře a vIE [ex/em model] – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Rozdílný levý okraj u INPUTu vOpeře a vIE [ex/em model] – CSS – Fórum – Programujte.comRozdílný levý okraj u INPUTu vOpeře a vIE [ex/em model] – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Petroff0
Věrný člen
20. 10. 2007   #1
-
0
-

<[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: ...–
Reklama
Reklama
Petroff0
Věrný člen
20. 10. 2007   #2
-
0
-

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: ...–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 13 hostů

Podobná vlákna

KTO SA NUDI ? A VIE POMOCT PASCAL ? — založil ja nevjem uz

Rozdílný čas serveru — založil BlackJack

Rozdilny typ db a tabulky — založil tribalcz

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032016 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý