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

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

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno
Laser Game Ostrava

Poohlížíte se po nové práci? Specialista na SQL
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: ...–
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, 4 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 © 20032019 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý