ďťż

[HTML/PHP/CSS] Pierwsza litera powiększona Problem z przeglądarką IE 6

       

Podstrony


telcocafe

Korzystając z nowszych przeglądarek nie zdawałem sobie sprawy, że strona moża się znacznie różnić w starszych. W Firefoxie oraz Operze nie mam żadnego problemu, również go nie mam w IE 7, jednak jest w IE 6. Może bym to zlekceważył jednak bardzo dużo osób niestety korzysta z tej starszej wersji, a tam moja strona jest w zasadzie nic nie warta, dlatego postanowiłem to naprawić licząc na Waszą pomoc.

Dokładnie w IE 6 cały tytuł strony poprostu znika, jak się zjedzie w dół, a później do góry to się pojawia i zaś znika i tak w kółko :(

Na stronie stworzyłem tytuł gdzie zawsze pierwsza litera całego słowa jest znacznie powiększona.

***************************************************

HTML (W zasadzie mam to w PHP, ale to i tak chyba nie ma różnicy)

<div id="title">Nazwa tytułu</div>

CSS

#content .title {
color: #445044;
font: normal 2em serif;
}

#content .title:first-letter {
display: block;
float: left;
font-size: 2.4em;
margin-top: 4px;

}

html:first-child #content .title:first-letter
{
margin-top: -10px;
}

***************************************************

Bardzo proszę o pomoc co powinienem zmienić aby to funkcjonowało właściwie :)



kurshtml.boo.pl i poczytaj o css
#title:first-letter { color: #445044; font: normal 2em serif; }
http://www.satzansat.../pseudocss.html o bugu na temat firstletter w ie

webmastering to tylko moje ala hobby, więc za szerokiej wiedzy nie posiadam, dlatego w zasadzie dalej nie wiem co mam zrobić bądź poprawić aby było dobrze :pomocy:

IE6 jest uposledzone tak wiec najlepiej:

<div id="title"><span>N</span>azwa tytułu</div> #content .title span { display: block; float: left; font-size: 2.4em; margin-top: 4px; }




IE6 jest uposledzone tak wiec najlepiej:

<div id="title"><span>N</span>azwa tytułu</div> #content .title span { display: block; float: left; font-size: 2.4em; margin-top: 4px; }


To dało tylko iż widoczna jest pierwsza litera, czyli "N", natomiast "azwa tytułu" już niestety nie :(

Tutaj można dokładnie zobaczyć jak to wygląda właściwie na zdjęciu (z IE 7) - obrazek.png

Spoglądałem jak to jest na www.w3.org i tam jest tak zrobione, iż na IE 6 jest wszystko dobrze.

Tylko ja niestety nie potrafię tego odpowiednio połączyć, gdyż nie wiem gdzie jest "błąd", dodatkowo też romiary w css muszą być w miarę dokładne (jak aktualnie) aby łączyły się z "dodatkowym podtytułem" :(

To jest odnośnie "Nazwy tytułu", tak jak w moim pierwszym poście:

HTML

<div id="title">Nazwa tytułu</div>

CSS

#content .title {
color: #445044;
font: normal 2em serif;
}

#content .title:first-letter {
display: block;
float: left;
font-size: 2.4em;
margin-top: 4px;

}

html:first-child #content .title:first-letter
{
margin-top: -10px;
}
Użytkownik win edytował ten post 15 sierpień 2008, 15:48
Czuje się całkowicie oszołomiony, przez te wszystkie przeglądarki i ich aktualizacje można zwariować :ranting2:
Zaaktulizowałem Opere na 9.51 i teraz ta pierwsza litera poszła o kilka centymetrów w dół.
Poprostu żeby w każdej przeglądarce było dobrze to jest to wręcz niewykonalne !
Albo IE 6 zawodzi, albo to Opera w tej wersji bądź nowszej, a zaraz pewnie Firefox coś wymyśli.

Z tego całego amoku wpadłem chyba na jedyne najrozsądniejsze rozwiązanie, czyli z przeglądarki IE 7 (bo tam to najlepiej wygląda) zrobić screneshoty i zamiast jakiś <div id="title"></div> to poprostu <img src=""/> Jedyny minus taki, że tych obrazków będzie z 40 no ale nic sie chyba na to nie poradzi. Jeden taki obrazek to około 2 do 3 kb, można programi pokombinować to się jeszcze obniży o około kilkanaście procent.

Co sądzicie o tym rozwiązaniu ??


Co sądzicie o tym rozwiązaniu ??

Mało eleganckie, ale skuteczne. W każdym razie dla przeciętnego użytkownika różnica będzie niedostrzegalna (może poza tym, że przy stosunkowo powolnym łączu jest troche prawdopodobne, że odstęp czasu pomiędzy załadowaniem tekstu i pierwszego znaku jako znacznik <img> może być dostrzegalny). Jednak ja bym się tym tak nie przejmował. Jeśli chcesz aby to ładnie wyglądało, a przeglądarki uniemożliwiają jednolite interpretowanie danego kodu to nie ma co się rozczulać tylko wykonać to w takiej formie jak opisałeś w poście wyżej. ;)

Tylko pamiętaj o ustawieniu atrybutu alt dla każdego z tych obrazków, wpisując w niego treść tekstu z obrazka.

  • zanotowane.pl
  • doc.pisz.pl
  • pdf.pisz.pl
  • nvm.keep.pl

  • Sitedesign by AltusUmbrae.