ahojte...
ako docielim aby bol input typu text v kazdom prehliadaci rovnako velky ???
V Opere , FF a Safari je v pohode tak ako zadam do height...
ale v IE je vzdy o nieco "tensi" :(
ide mi len o tu velkost height, ostatne ako poziciu v dive viem nastavit.
Dakujem za Vasu pomoc... uz newiem fakt co s tym spravit...
Fórum › CSS
Velkost INPUTu

pouzil som:
height: 18px !important;
height /**/ : 24px;
padding: 2px 0px 2px 0px;
je to spravne ? vyzera ze to ide... len ten zapis... brrrrrrr..
heh len teraz som zistil ze IE ma uplne na haku padding u INPUTu... vobec ho neriesi :(
newiete ci ten hack funguje aj s width, este som to neskusal, bo som v robote.. :)
Alebo nepoznate nejaky lepsi sposob (bol by som rad :) ako som hore uviedol...??... :smile12:
neda sa nastavit line-height?mohlo by to pomoct...
sir_arthur napsal:
neda sa nastavit line-height?mohlo by to pomoct...
prepac ze otravujem... skus mi trochu viac priblizit ten line-height... teraz som v praci nemam moznost to skusit... aspon taku ukazku... ktora by bola funkcna v IE a v normalnych prehliadacoch
dakujem
Tak narychlo som napisal ako si to predstavujem:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd"
xml:lang="en" >
<head>
<title>TPD</title>
<STYLE type="text/css">
#hlavny {
border: 1px #ff8080 solid;
width: 900px;
height: 500px;
}
#okienko {
border: 1px #000000 solid;
width: 898px;
height: 40px;
}
#prvyinput {
border: 1px #22aa54 solid;
width: 340px;
height: 38px;
float: left;
}
#druhyinput {
border: 1px #22aa54 solid;
width: 520px;
height: 38px;
float: right;
text-align: right;
}
.prvy {
font-family: Arial;
font-size: 16px;
font-weight: bold;
width: 150px;
height: 18px;
padding: 2px 0px 2px 20px;
}
.druhy {
font-family: Arial;
font-size: 16px;
font-weight: bold;
width: 150px;
height: 18px;
padding: 2px 0px 2px 20px;
}
.treti {
font-family: Arial;
font-size: 16px;
font-weight: bold;
width: 150px;
height: 18px;
padding: 2px 0px 2px 20px;
}
</STYLE>
</head>
<body>
<div id="hlavny">
<div id="okienko">
<div id="prvyinput">
Zadaj text: <input type="text" class="prvy"> <input type="submit">
</div>
<div id="druhyinput">
Zadaj 2 texty: <input type="text" class="druhy"> <input type="text" class="treti"> <input type="submit">
</div>
</div>
</div>
</body>
</html>
Potreboval by som aby tie inputy boli presne vertikalne v strede divu kde sa nachadzaju, a aby aj text v inputoch bol presne v strede.(a aby boli aj rovnako velke a siroke) v KAZDOM prehliadaci... IE, FF, Opera a Safari.
Hlavne ta sirka a vyska, lebo to nastavenie toho aby boli inputy v strede viem urobit aj pomocou top, left, position....
Uz sa s tym babrem asi 2 dni a newiem co dalej.
Dakujem Vam za pomoc....
Fugess prosim uved konkretny priklad, lebo trochu newiem co myslis, a ako to urobit :(...
dakujem
nastyluj si input dle libosti ve FF podle toho jak se ti to nejvic libi .. potom to skus v Opere a Safari - tam by mel byt vysledek stejny (podle mych skusenosti)
potom se psychicky priprav na testovani v IE ...
predpokladam ze mas moznost svuj vysledek ozkouset v IE 7 - tam by to nemelo byt prehnane pokazene, ale i kdyby bylo tak pouzijes tento podmineny komentar ciste pro IE 7
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="styles/styles_IE.css" media="screen" />
<![endif]-->
(obsah parametru pro cestu a typ media zalezi na tobe - tohle je jen pro demonstrativni ucel)
jeste par ukazek jak funguje podmineny komentar:
<!--[if IE]><![endif]--> - to co ma napsane uvnitr pouzije pro vsechny IE
<!--[if IE 6]><![endif]--> - to same, akorat plati pouze pro IE 6
<!--[if IE 7]><![endif]--> - to same pro ie 7
<!--[if lte IE 6]><![endif]--> - to co je uvnitr pouzije pro IE 6 a vsechny starsi
<!--[if gte IE 6]><![endif]--> - to co je uvnitr pouzije pro IE 6 a vsechny novejsi
to by z nazorneho prikladu mohlo stacit...
no a pak jeste prijde nejvetsi sranda - testovani v IE 6 ... jakmile nalinkujes podminenym komentarem styl napriklad pro IE 6 tak uz jen ve sablone stylu k tomu urcene upravis dotycne selektory se soubory deklaraci podle toho jak to IEsvestce a tobe vyhovuje...
ps: znate tyto stranky ? http://www.stopie.com/ :smile1:
no ja neviem, ja som skusal input nastavit vysku a mam rovnaku aj v ff aj v ie6 tusim.ak chces ale zarovnat text v inpute na stred vertikalne:
<html>
<head>
<style>
input{width:100px;height:50px}
</style>
</head>
<body>
<input type="text" />
</body>
</html>
no ja planujem pouzit iba width height padding, background a border, cize to je asi len zakladne stylovanie :) nie?? :D
a na toto co vravite... ani newiem co toje....co to znamena tie znaky :(
height: 18px !important;
height /**/ : 24px;
padding: 2px 0px 2px 0px;
??
to je jenom blbe zapsany komentar..
s tim stylovanim to uvidis sam co ti to udela .. ja jsem pro input text pouzivat podminene komentare nemusel .. ale pro input button, select s option, a pro obalove celky form s fieldset to bylo vetsinou nutne ..
tak som sa rozhodol ze budem mat dva CSS-ka, jeden pre normalne prehliadace, druhe pre jeden trhly IE
mozem to urobit takto: ?
<!--[if !IE]>
<link rel="stylesheet" type="text/css" href="styl_pre_normalneprehliadace.css" media="screen" />
<![endif]-->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styl_pre_IE.css" media="screen" />
<![endif]-->
alebo existuje aj alternativa , nieco ako if else ??? ze ak nie je IE tak nacitaj prvy styl, ak je tak druhy styl ??
diki za trpezlivost :)
pro normalni prohlizece pouzijes standardni zapis, tj:
<link rel="stylesheet" type="text/css" href="styl_pre_normalneprehliadace.css" media="screen" />
a pro IE pouzijes tohle:
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="styl_pre_IE.css" media="screen" />
<![endif]-->
tj: vsechny prohlizece prectou prvni zapis, a IEcka prectou prvni a pak kdyz uvidi podmineny komentar pro sebe tak jej take prectou ...
tzn. nastylujes neco a pro IEcka ty styly zvlast upravis - v tom je ten figl :smile1:
jinak nezapomen dodrzet kaskadu (poradi) linku .. tzn: prvni musi byt centralni a pod nim styly pro IEcka ..
priklad takoveho pouziti:
link - reset styly
link - centralni styly
link - styly pro IE 7 (poradi pro verze jsou nedulezite)
link - styly pro IE 6
atd.
.
.
.
nebo i napriklad:
link - global styles - a v nem importy - reset styly a pod nema centralni styly
link - styly pro IE
atd.
.
.
.
jj chapem ta, ale stale ma hloda jedna vec:
nebude to zbytocne tahat v pripade uzivatela IE naviac data, neni lepsie ked sa priamo stiahne CSS pre konkretny prehliadac.??..
nene takhle to je prave dobre reseni .. nastylujes stranky tak jak chces aby vypadaly a pak uz jen pro IEcka ty styly doladis .. stylovat dvakrat tu samou sablonu s odchylkama by bylo zbytecne .. jde o ten ucel ze IEcka uvidi zakladni styl stranek a pak uvidi sablonu ktera opravuje nejasnosti
aha.... ok... tak ja si necham poradit, dakujem za fakt profesionalne rady..
este raz diki

Přidej příspěvek
Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku
×Vložení zdrojáku
×Vložení obrázku
×Vložení videa
































Uživatelé prohlížející si toto vlákno
Podobná vlákna
Kombinace inputů — založil Caterpillar
Sečtění dvou inputů — založil tommassino
Validace inputu a divu — založil Nazghul-CZ
Pridanie inputu na 2x zo selectom — založil zelenac1
Vložení inputů do anchoru — založil JMM
Moderátoři diskuze