Witam, mam taki kod css:
.input{
width: 80%;
height: 22px;
border-style: solid;
border-width: 1px;
border-color: #777C31;
background-image: url("Pictures/Graphic/InputBG.png");
padding: 3px 0px 0px 5px;
}
aplikowany jest on elementom input o typie 'text'. I teraz efekt jest taki, że na kilku podstronach inputy mają odpowiednią wysokość czyli 22px, natomiast na jednej podstronie mają 27px... [???] O co może chodzić, że sztywna wartość się zmienia?
wywal kropke z przed input'a albo sprawdź czy wszedzie nadałes odpowiednią klase dla odpowiednich kontrolek
no to może raczej pokaż style z tej jednej podstrony ...
Kropka ma być, bo to nie do tagu input ma się odnosić, tylko do klasy. Klasa jest nadana obiektowi, widać na nim obrazek tła, itd, ale ten rozmiar... Zauważyłem, że jakiej wielkości w px bym nie dał, na tej stronie zawsze input jest odrobinę wyższy, niż jest ustalone.
//Dopisane
Adamo, jeśli o to chodzi, to na tej podstronie nie ma żadnych dodatkowych styli, wszędzie ten sam z pliku css.
hm, nie można raczej tak stwierdzić przez co to, ale przeanalizuj dokładnie linijka po linijce kod, czasem się coś wstawi i potem o tym zapomni, np wysokość może popsuć inna czcionka, spróbuj ją na stałe ustalić dla tej klasy, poza tym powiedz czy to się dzieje na jednej czy wszystkich przeglądarkach, a najlepiej podaj link do tej strony
masz ustawiony padding wiec nic dziwnego ze jest odrobine wyzszy niz jest to ustalone
daj padding na 0 lub odejmij wartość z paddinga od wysokości i po kłopocie
Padding nie ma tu raczej nic do rzeczy. Przy identycznym stylu na jednej podstronie input jest o 4px większy niż na innych. Ustawiłem czcionkę na 5px w inpucie, i to też niczego nie zmienia. Zjawisko zaobserwowane w firefoxie, na IE czegoś takiego nie ma.
Oto kody, które wstawiają pole tekstowe:
$form.='<input type="text" name="Name" value="'.$cur['Name'].'" class="input"><br>'; // tu jest większe
$content2.='Nazwa:<br><input type="text" name="Name" value="'.$rec['Name'].'" class="input"><br>'; // tu jest normalne
a mozesz pokazać kod wynikowy wysyłany do browsera?
<input type="text" name="Name" value="" class="input"> // źle
<input type="text" name="Name" class="input"> //dobrze
jak widać, różnicy wielkiej nie ma :P. Czy istnieje jakiś czynnik, który może mieć wpływ na wysokość wyrażoną w px?
:| nie chodziło mi po przepisanie kodu bez znaczników php tylko o pokazanie tego co znajduje sie na wyjściu tzn taki fragment kodu html zwrócony przez skrypt php który zawiera w sobie te znaczniki plus jakiś fragment kodu leżącego przy tym kodzie (np rodzice dla powyższych obiektów itp)
Źle:
<td style="background-image: url('../Pictures/Graphic/TableBG.png');" class="cont">
<form action="menuconstr.php" method="POST">
Kategoria: <select name="CatID" pnchange="FileName.disabled=!(CatID.selectedIndex==0);">...</select><br>
<input type="text" name="Name" value="" class="input"><br>
Plik: <input type="text" name="FileName" value="" class="input"><br>
<input type="hidden" name="action" value="add">
<input type="submit" value="Dodaj" class="button">
</form>
</td>
Dobrze:
<td style="background-image: url('../Pictures/Graphic/TableBG.png');" class="cont">
<form action="cattree.php" method="POST">
<input type="hidden" name="action" value="addsubcat">
<input type="hidden" name="ParentID" value="0">
Nazwa:<br>
<input type="text" name="Name" class="input">
<input type="submit" value="Dodaj" class="button">
</form>
</td>
Style:
.cont{
padding: 15px 5px 15px 5px;
}
td{
padding: 0 0 0 0;
vertical-align: top;
}
.input{
width: 80%;
height: 22px;
font-size: 5px;
border-style: solid;
border-width: 1px;
border-color: #777C31;
background-image: url("Pictures/Graphic/InputBG.png");
#padding: 3px 0px 0px 5px;
}
dwie rzeczy przychodzą mi do głowy:
thenkles napisał(a)
Zjawisko zaobserwowane w firefoxie, na IE czegoś takiego nie ma.
to moze daj styl:
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
Box-sizing pomogło, dzięki [browar]