Witam,

Dlaczego pole tekstowe ostylowane tak:

input.poletekstowe {
font-size: 11px;
color: #666;
background-color: #CCC;
width: 150px;
padding-top: 0px;
padding-right: 5px;
padding-left: 5px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
margin: 0px;
padding-bottom: 0px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
line-height: 100%;
}

ma wysokość 13 pikseli a nie 11? Po drugie dlaczego to pole umieszczone w
formularzu posiada kilkupikselowy margines górny? Element inline
umieszczony obok jest wyraźnie wyżej niż pole.

do góry

On Fri, 01 Apr 2011 16:34:53 +0200, Marek wrote:

> Witam,
>
> Dlaczego pole tekstowe ostylowane tak:
>
> input.poletekstowe {
> font-size: 11px;
> color: #666;
> background-color: #CCC;
> width: 150px;
> padding-top: 0px;
> padding-right: 5px;
> padding-left: 5px;
> border-top-style: none;
> border-right-style: none;
> border-bottom-style: none;
> border-left-style: none;
> margin: 0px;
> padding-bottom: 0px;
> border-top-width: 0px;
> border-right-width: 0px;
> border-bottom-width: 0px;
> border-left-width: 0px;
> line-height: 100%;
> }
>
> ma wysokość 13 pikseli a nie 11?

zgaduje: bo font-size sie liczy od dolnej krawedzi duzej litery I do jej
gornej krawedzi i pole dodaje na dole 2 piksele na koncowki takich liter
jak 'j, g, y'? zgadlem? :)




--
pozdrawiam, |<onrad

do góry

On 2011-04-01 16:34, Marek wrote:
> Witam,
>
> Dlaczego pole tekstowe ostylowane tak:
>
> input.poletekstowe {
> font-size: 11px;
[8<]
> line-height: 100%;
> }
>
> ma wysokość 13 pikseli a nie 11?

A dlaczego miałby mieć 11?

> Po drugie dlaczego to pole umieszczone w
> formularzu posiada kilkupikselowy margines górny? Element inline
> umieszczony obok jest wyraźnie wyżej niż pole.

http://www.w3.org/TR/CSS21/visudet.html#propdef-vert
ical-align


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

> zgaduje: bo font-size sie liczy od dolnej krawedzi duzej litery I do jej
> gornej krawedzi i pole dodaje na dole 2 piksele na koncowki takich liter
> jak 'j, g, y'? zgadlem? :)

Tego nie wiem czy zgadłeś :-)
Pytanie jest czemu po 1 pikselu a nie po 2 lub 10? Czy jest to gdzieś
określone? Wydawało mi się, że jeśli font ma mieć 11px to ze wszystkim. Jak
zatem zapanować nad wysokością pola skoro wysokość fontu jes "losowa" ?

Jeśli już bawimy się w zgadywanki, to skąd górny margines? :-)

do góry

Dnia Fri, 01 Apr 2011 18:57:22 +0200, Paweł Piskorz napisał(a):

>
> A dlaczego miałby mieć 11?

Bo go ładnie proszę font-size: 11px; :)

> http://www.w3.org/TR/CSS21/visudet.html#propdef-vert
ical-align

No tak, wiedziałem, że o czymś podstawowym zapomniałem :)
Dzięki.

do góry

On Fri, 01 Apr 2011 23:01:44 +0200, Marek wrote:

> Jak zatem zapanować nad wysokością pola

dajac mu height?

> skoro wysokość fontu jes
> "losowa" ?

nie jest losowa. wg w3 font-size wyraza rozmiar 'em squere'. a czym on
jest, poczytaj http://www.emdpi.com/emsquare.html




--
pozdrawiam, |<onrad

do góry

Dnia Fri, 1 Apr 2011 22:06:48 +0000 (UTC), Konrad Karpieszuk napisał(a):

> On Fri, 01 Apr 2011 23:01:44 +0200, Marek wrote:
>
>> Jak zatem zapanować nad wysokością pola
>
> dajac mu height?

Może źle się wyraziłem, miałem na myśli paddingi na dole i u góry. W tej
chwili radzę sobie tak, że nadaję padding górny a dolny zostawiam w
spokoju. Nadaję height i patrzę co wyjdzie. Wszystko metodą prób i błędów.
Oczywiście nie jest to pilotowanie samolotu więc możemy sobie na takie
postępowanie pozwolić. Jednakże fajnie byłoby w chwili projektowania CSS
wiedzieć gdzie dokładnie font w polu tekstowym wypadnie i jaka będzie
przestrzeń nad i pod.

> nie jest losowa. wg w3 font-size wyraza rozmiar 'em squere'. a czym on
> jest, poczytaj http://www.emdpi.com/emsquare.html

Fajny artykuł. Wyczytałem w nim, że font bazuje na matrycy 2048x2048. 1em
oznacza obszar zajęty przez całą tą matrycę czyli jeśli znak zajmuje jej
pół, to i na ekranie będzie ona 2x mniejsza niż taka, która zajmuje całą
przestrzeń. Ok, to jest oczywiste. Jednakże nie ma tam słowa o tym co
oznacza wielkość fontu wyrażona w pikselach a nie w em czy w punktach. Moim
zdaniem powinno być tak, że jeśli font ma ustawione 12px to tyle zajmie na
wysokość przestrzeń zarezerwowana na wyświetlenie znaku i ani piksela
więcej ani mniej. Jeśli znak zajmuje połowę matrycy, to będzie miał 6px
wysokości ale wysokość tego obszaru nadal 12px. Jednakże życie pokazało, że
tak nie jest. A więc jak jest?

do góry

On 2011-04-01 23:06, Marek wrote:
> Dnia Fri, 01 Apr 2011 18:57:22 +0200, Paweł Piskorz napisał(a):
>
>>
>> A dlaczego miałby mieć 11?
>
> Bo go ładnie proszę font-size: 11px; :)

Prosisz fonta o rozmiar, a nie inputa o wysokość.


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

Dnia Sun, 03 Apr 2011 11:31:11 +0200, Paweł Piskorz napisał(a):

> On 2011-04-01 23:06, Marek wrote:
>> Dnia Fri, 01 Apr 2011 18:57:22 +0200, Paweł Piskorz napisał(a):
>>
>>>
>>> A dlaczego miałby mieć 11?
>>
>> Bo go ładnie proszę font-size: 11px; :)
>
> Prosisz fonta o rozmiar, a nie inputa o wysokość.

Ok, wobec tego aby nie mieć tego typu wątpliwości czy to input czy font
narzucają jakąś nadmiarową wysokość zrobiłem następujący test:

<span style="font-size:12px; background-color:#090">test ŃĆy</span>

Następnie wykonałem screenshota i pomierzyłem wysokość fonta. Wyszło 14px.
Zarówno font jak i tło mają po 14 px. Co ciekawe pod IE9 jak i FF4 akcenty
od polskich liter wychodzą ponad tło. Tymczasem pod literą y jest 1 piksel
przerwy. Czyli tak jakby tło było przesunięte o 1 px w dół względem tekstu.
Jak więc teraz uzasadnić, że font ma 14 px wysokości i to, ze wychodzi poza
obszar span'a?

do góry

On 2011-04-03 16:08, Marek wrote:
> Ok, wobec tego aby nie mieć tego typu wątpliwości czy to input czy font
> narzucają jakąś nadmiarową wysokość zrobiłem następujący test:
>
> <span style="font-size:12px; background-color:#090">test ŃĆy</span>
>
> Następnie wykonałem screenshota i pomierzyłem wysokość fonta. Wyszło 14px.
> Zarówno font jak i tło mają po 14 px.

Ustawiasz nie to co trzeba i nie wiesz co mierzysz, co chcesz w ten
sposób osiągnąć?

> Jak więc teraz uzasadnić, że font ma 14 px wysokości

No właśnie, uzasadnij że font ma 14px wysokości.

> i to, ze wychodzi poza obszar span'a?

Nikt mu tego nie zabronił :)


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry