Problem z layout'em.

[fingoth]

Przygotowuję dla siebie layout. Grafika i układ są już gotowe.
Pozostaje tylko tekst.
Wszystko wygląda dobrze w FF, Operze i KHTML.
Problem pojawia się w czasie oglądanie strony w IE.
Otóż między div logo a resztą powstaje 2-3px odległości, widac wtedy szare tło.
Poprzez liczne próby wykryłem, ze w IE mimo, że wysokość obrazka wynosi 100px
i deklaracji css przy div#logo jest height:100px; div ma wysokość 102px.
Mogę co prada zrobić białe tło dla div# logo, ale wtedy nie pasuje mi to do
linii w stopce.
Bardzo proszę o pomoc.
Stronę umieściłem na serwerze www.kobi.ovh.org
Znając mnie gdzieś coś przegapiłem, a rozwiązanie jest bardzo proste.

[gdotb]

Strzala,

jak mnie cos nie dziala pod IE, to produkuje cracki, ktore sa odczytywane tylko
przez te przegladarke i ignorowane przez reszte normalnych. Te 'cracki' nie
dzialaja bodajze na starych wersjach, no ale coz, wszystkim przeciez nie dogodzisz.

Wracajac do twojego pytania - zmodyfikuj klase div#logo dla IE dodajac * html
przed nazwa i zmien wartosc 'height' na 98px

div#logo
{
height:100px;
}

* html div#logo
{
height:98px;
}

Powinno zadzialac :)
Pozdrowienia,
Gee

[fingoth]

Ja jakiś pechowy jestem ;) Ten hack nie zadziałał.
Ale i tak dzięki.

[tommy_from_cracow]

Hej,

Nie wiem czy to pomoze ale:

w <img okresl width i height,

div#log{
padding: 0;
}
div#logo img{
margin: 0;
padding: 0;
border: 0;
display: block; <---

[fingoth]

Wielkie dzięki. Twoje rozwiązanie > div#logo img{
> margin: 0;
> padding: 0;
> border: 0;
> display: block pomogło :)
Pech chciał, że testowałem te rozwiązania, ale każde osobno, a tu należało
wykorzystać wysztkie. Coraz bardziem wiem dlaczego nie znoszę IE, a kocham FF ;)

[gdotb]

Amen, Brother.

PS. Dziwne, ze hack nie zadzialal. w moich projektach zawsze dziala :)))
Pozdrawiam,
Gee

[zsa-zsa]

Nie wiem, czy takie rozwiazanie by cie zadowolilo, ale dziala:

obrazek nie wstawiony do div 'logo' ale umieszczony jako jej tlo i teraz:

albo

obrazek 'wyciagniety' o 2piksele na dole (dodatkowy bialy pasek), czyli wys. na
102px

albo

wys. obrazka bez zmian, ale zmniejszona wartosc line-height dla div logo (np.
0.5 em).

zmiana line-height pomaga w przypadku wielu problemow z pionowym dopasowaniem
elementow.

Przy okazji - musisz chyba cos zrobic z gornymi zaokragleniami. roznice w tle
nie wygladaja zbyt dobrze (bo chyba nie jest to efekt zamierzony?)

pozdr.
zsa-zsa

[fingoth]

Dzięki, też to próbowałem, ale wtedy nie ma informacji tekstowej w razie braku
obrazka.
Co do zaokrągleń, wiem, obrazek png ma kanał alpha i IE sobie z tym nie radzi.
wszystkie obrazki mam już przerobione tak aby ie wyświetlało je poprawnie.
Został tylko ten jeden. I tu jest problem, jak zmienię go na gif to zaokrąglenia
są bardzo poszarpane. Z kolei nie mogę dać szarego tła, ponieważ w body jest
umieszczony obrazek z gradientem. Muszę coś wykombinować.

Pozdrawiam Fin.

[zsa-zsa]

przeczytalam pietro wyzej, ze skorzystales z porady tommy'ego. Zerowanie trojki
margin+padding+border to pierwszy krok w przypadku tego typu klopotow i myslam,
ze to przetestowales w pierwszej kolejnosci :). Mialam kiedys podobny problem, w
ktorym zerowanie m+p+b nie pomoglo (!), ale pomogl trick, ktory podalam.

> wtedy nie ma informacji tekstowej w razie braku obrazka.

mozna wstawic tekst w odp. kolorze ;-P

Problem zaokraglen rozwiazalabym w nastepujacy sposob:

zapisz obrazek w formacie gif definiujac jako przezroczysty kolor szary, ten
najbardziej zblizony w tym miejscu do koloru tla.
paleta 256 kolorow powinna wystarczyc w przypadku tej grafiki, nawet pomimo
gradientu. jesli nie, podziel obrazek na dwa kawalki, trudno.

poniewaz lubie format png i nie chce rezygnowac z jego mozliwosci, czesto
przygotowuje dwa zestawy grafiki - jeden z png dla 'normalnych' przegladarek i
drugi zubozony specjalnie dla ie.

[fingoth]

> mozna wstawic tekst w odp. kolorze ;-P
Można, można, tylko wtedy layout mi się rozjeżdza, a ja sobie ubzdurałem, że to
tak ma wyglądać ;P

> przeczytalam pietro wyzej, ze skorzystales z porady tommy'ego. Zerowanie trojki
> margin+padding+border to pierwszy krok w przypadku tego typu klopotow i myslam,
> ze to przetestowales w pierwszej kolejnosci :)
Testowałem i to nawet w różnych kombinacjach, ale co mnie zaskoczyło, to to, że
samo div#logo img {display:block;} bez zerowania trójki pomaga.

Mialam kiedys podobny problem,
> w
> ktorym zerowanie m+p+b nie pomoglo (!), ale pomogl trick, ktory podalam.
Za poradą tommy'iego spróbuj dodać to div#logo img {display:block;}. Mnie
pomogło i to nawet bez zerowania.

[zsa-zsa]

> Za poradą tommy'iego spróbuj dodać to div#logo img {display:block;}. Mnie
> pomogło i to nawet bez zerowania.

eee tam. strona zyje, wyglada dobrze juz nie bede w niej grzebala :).
zreszta starawa jest.

aha. np. tu: www.lipsum.com/ masz generator wypelniacza Lorem Ipsum. Moze
na przyszlosc sie przyda. Projekt zawsze lepiej wyglada z bardziej naturalnie
wygladajacym tekstem.

[gdotb]

> poniewaz lubie format png i nie chce rezygnowac z jego mozliwosci, czesto
> przygotowuje dwa zestawy grafiki - jeden z png dla 'normalnych' przegladarek i
> drugi zubozony specjalnie dla ie.

ha ha ha,
tez tak musze zaczac robic :))

[tommy_from_cracow]

Hej,
Ciesze sie ze sie udalo.
a tu link jak rozwiazac problem z png:
homepage.ntlworld.com/bobosola/
Gify nie sa takie zle. Nie wiem jakiego programu uzywasz ale pokombinuj z antialiasingiem i moze zaokraglenia nie beda zle wygladaly

Pozdrawiam!

[fingoth]

Inkscape do tworzenia grafiki i Gimp do retuszu lub zmiany formatu.
Polecam te programy, szczególnie www.inkscape.org
Będę walczyć teraz z tym obrazkiem, wcześniej męczyłem sie z wyświetlaniem w IE ;)