Dziudek's jogger

Jakoś mnie naszła ochota na zabawy z tym skryptem. Chciałem sobie zrobić okrągłe obramowanie zaokrąglonego diva. No i oczywiście nie byłoby sytuacją normalną gdyby wszystko poszło po mojej myśli ;)

Otóż stworzyłem sobie diva i obdarzyłem go pięknym różowym kolorem tła ;) :

<div id="d1">
    Jakiś tekst ;)
</div>

#d1{
    width: 500px;
    background: #E53C6A;
}

Wszystko wyglądało oczywiście ok (no bo jakże inaczej ;) ). Zatem przystąpiłem do drugiego kroku - dodania diva, który miał zawierać właściwą treść (pierwszy div miał być obramowaniem):

<div id="d1">
    <div id="d2">
        Treść
    </div>
</div>

#d1{
    width: 498px;
    background: #E53C6A;
    padding: 1px;
}

#d2{
    width: 488px;
    background: #FFF;
    padding: 5px;
}


Oczywiście nie obyło się bez małych obliczeń paddingów itd... W każdym razie odpalam przeglądarkę i oczywiście na początku euforia (no prawie :P ), którą popsuł mały szczegół widoczny poniżej:

Sorry za ten artystyczny rysunek wprost z Painta, ale nie mam siły odpalać czegoś konkretniejszego do obróbki grafiki o tej porze ;)

Wygląda to tak jakby ten drugi div szkodził na rogi pierwszego, a dokładniej rzecz ujmując - rogi nie są zaokrąglane tam gdzie pierwotnie powinien być drugi div - u mnie padding w pierwszym divie wynosi 1 piksel, zatem zaokrąglane są tylko najbardziej zewnętrzne piksele. Po szybkim obejrzeniu screenów doszedłem do wniosku, że aby w wypadku normalnych zaokrągleń nie było zbędnych pikseli na obramowaniu, jego grubość powinna wynosić 3 piksele - czyli inaczej mówiąc, pierwszy div powinien mieć padding 3 piksele. No cóż, troszkę to zmniejsza przydatność Nifty Corners Cube do tworzenia zaokrąglonych divów z obramowaniem, ale myślę, że przy mniej kontrastowych kolorach ten defekt nie będzie tak widoczny w wypadku małego obramowania... W każdym razie bug jest i to IMHO dość poważny....

I tak ten błąd nie zmartwił mnie tak jak następny - otóż gdy nie ustawiamy wysokości dla diva, to wszystko jest w porządku - elegancko zmienia się wysokość tego elementu dostosowywując się do treści. Problemy zaczęły się gdy chciałem divom nadać wysokość - 200px. Oczywiście potraktowałem rogi opcją fixed-height by znalazły się tam gdzie trzeba, a nie zaraz za tekstem. I wszystko byłoby pięknie gdyby nie to co zobaczyłem:

Szybka analiza wygenerowanego kodu strony i okazuje się, że pod diva z treścią wrzucony jest element b z wysokością równą różnicy wysokości bloku i wysokości bloku tekstu.

Próbowałem zrobić ficzer w kodzie Nifty Corners Cube, który nadawałby temu zbędnemu elementowi id, a później przy zaokrąglaniu rogów bym sobie ten element zwyczajnie ukrywał przez nadanie mu właściwości display="none", ale niestety ukrycie tego elementu spowodowało także zmniejszenie wysokości diva z treścią.

Tak więc na razie w przypadku robienia obramowań dla divów pozostaje chyba tylko robienie ich bez ustalania wysokości i dodatkowo z dostosowywaniem albo kolorów albo grubości obramowania diva.