CSS-i probleem IE ja Firefoxi erinevus

Postitus Postitas **spott** » 12.03.2009, 12:10

Jaman siin ühe CSS-i probleemiga. Tuttaval vaja kodulehel kuvada logo ilusti vasakul (http://kaksvarvi.ee/wp-content/themes/k ... s/logo.png)
ja jaluses siis tekst: 2009 Kaks Värvi All Rights Reserved.

Opera ja Firefox ja teised Linuxi brauserid näitavad asja kõik õigesti.

Kuid selgus, et IE6 näitab täielike aiateibaid.

Jalust kuvatakse kuskil üleval ja logo on hoopis täiesti keskel.

Eile õhtust saati jamanud ja tulemuseks on nokk kinni saba lahti olukord. IE näitab enam vähem - kõik teised täitsa metsas ja vastupidi.

Kas keegi oskab aidata ja öelda, kuidas CSS-i korda saaksin?

Leht siis siin: http://kaksvarvi.ee

Tänud nõuannete eest

illukas · Postitus Postitas **illukas** » 12.03.2009, 12:35

Kui on vaja sellist kindlat paigutust siis mina teeks asja üldse tabelite ja css-iga- siis ei ole css-ist tulenevad kõikkumised nii suured

Postitus Postitas **imre** » 12.03.2009, 13:04

Sellise lihtsa kujunduse jaoks on sul see leht kuidagi väga segamini koodi osas + css fail samuti.
Aga kui tahad seda nii jätta, siis tee 2 css faili.
Üks nö normaalne ja teine siis IE jaoks kohandatuna.

Lehe koodi siis midagi sellist:

Kood: Vali kõik

<link rel='stylesheet' type='text/css' href='normaalne.css' />
<!--[if IE]><style type="text/css">@import "ebanormaalne.css";</style><![endif]-->

Tundub, et vaja ka fontide osas midagi ette võtta. Lorem Ipsum kluidagi väga kribu IE all.
Ise kasutaksin illuka pakutud varianti ja teeksin nullist selle uuesti.

Postitus Postitas **spott** » 12.03.2009, 13:16

Võibolla teengi täiesti nullist uue CSS-i.

Lihtsalt kogu leht oli alguses tavaline WordPressi valmis kujundus. Kuid siis tuli järjest soove ja muudatusi jne sisse - et sellest ka see segapuder juba seal.

Postitus Postitas **sander85** » 12.03.2009, 14:01

ohjah, proovisin ka, sain isegi peaaegu normi, aga see footer ei allu millelegi normaalsele..

ühesõnaga pole ma üle pika aja s*****t css'i oma silmaga näinud, rääkimata html'i ülesehitusest..

IE8 suutis seda isegi kuidagi kuvada, aga fondi määrangud on ka muidugi täielik crap..

üks stiil ajab teise kirjutamist taga, isegi firebugiga on raske träkkida, et mis kust rakendub, rääkimata tühjadest div'idest, millele ulmelisi stiile külge poogitud..

nii html kui css vajab nullist tegemist.. ja IE6 ei ole brauser, kui see ei kuva, siis kurat sellega..

zeratul · Postitus Postitas **zeratul** » 12.03.2009, 14:42

Siin teemas oleks minul paslik sõna võtta.
Soovitan alustada sellest, et proovi leht valideeruvaks teha. Hetkel on seal liiga palju/vähe div-sulgemistääge, mis terve mõistuse seisukohast tähendab seda, et seda lehte ei tohiks ükski brauser korralikult näidata, kuna struktuur on katki.
Mis puutub tabelite soovitustesse, siis see oleks tehniliselt 5 aastat arengus tagasiminek. Ja need IF IE jms asjad unustage kohe ära. Kui on valideeruv ja loogiliselt õigesti kirjutatud HTML, siis sellist asja ei lähe MITTE KUNAGI vaja. IE-l küll on mõned bugid, aga kõik need bugid saab palju delikaatsemalt ära lahendada, kui topeltkoodiga.

zeratul · Postitus Postitas **zeratul** » 12.03.2009, 14:44

Juhin tähelepanu ka faktile, et hetkel eeldab see leht laiekraani olemasolu. Kui kasutada näiteks 1024x768 reso, siis on leht pooleldi loetamatu, kuna tume tekst jookseb tumedale pildile selga.

Postitus Postitas **spott** » 12.03.2009, 14:53

zeratul kirjutas:Juhin tähelepanu ka faktile, et hetkel eeldab see leht laiekraani olemasolu. Kui kasutada näiteks 1024x768 reso, siis on leht pooleldi loetamatu, kuna tume tekst jookseb tumedale pildile selga.

see oli tellija soov - see teksti ja pildi kattumine osaliselt.

zeratul · Postitus Postitas **zeratul** » 12.03.2009, 16:18

No sel juhul võib öelda, et vähe laiema ekraaniga kasutajad (~60%) näevad seda valesti.

Postitus Postitas **sander85** » 12.03.2009, 16:35

zeratul kirjutas:Siin teemas oleks minul paslik sõna võtta.
Soovitan alustada sellest, et proovi leht valideeruvaks teha. Hetkel on seal liiga palju/vähe div-sulgemistääge, mis terve mõistuse seisukohast tähendab seda, et seda lehte ei tohiks ükski brauser korralikult näidata, kuna struktuur on katki.
Mis puutub tabelite soovitustesse, siis see oleks tehniliselt 5 aastat arengus tagasiminek. Ja need IF IE jms asjad unustage kohe ära. Kui on valideeruv ja loogiliselt õigesti kirjutatud HTML, siis sellist asja ei lähe MITTE KUNAGI vaja. IE-l küll on mõned bugid, aga kõik need bugid saab palju delikaatsemalt ära lahendada, kui topeltkoodiga.

tabelite vältimise osas vähemalt sellise lehe puhul olen ma täiesti nõus, seal ei ole neid küll vaja..

IF IE on aga asi, mis aegajalt laseb mõne asja paremini lahendada kui üritada pool päeva end lolliks mõeldes mingit kõigile brauseritele sobivat stiili kirjutada.. peamine stiil peaks olema standarditele vastav, millele siis head'i sees saab vajadusel if ie-ga paar parandust sisse viia.. ehk on IE8 puhul neid parandusi juba vähem vaja..

Huck · Postitus Postitas **Huck** » 12.03.2009, 19:36

Nagu õeldud- sorts on jama- palju alustamata/sulgemata dive.
Esialgu proovi html käima saada korralikult.

Kood: Vali kõik

<body>

<div id="header">
</div><!-- header-->
<div id="tagline">
</div> <!--tagline -->

<hr />
	<div id="navigation">
		<div id="navbar"><!-- puudu ul ja /ul -->
			<ul>
				<li> </li>
			</ul>
		</div><!--navbar-->
		<div id="page">
		</div><!-- page lõpp. kas see peabki siin lõppema? -->

		<div id="content" class="narrowcolumn">
			<div class="post" id="post-3">
			<h2>Firmast</h2>
				<div class="entry">
					Sisutekst
				</div><!--entry-->
			</div><!-- post-->
		</div><!--content-->
		<div id="sidebar">
		<!-- siin oli suur jama-->
		</div><!--sidebar-->
	</div> <!-- Page (lõppes juba varem ära) s.o hoopis navigation lõppp-->
</div> <!-- wrapper - sellist ei algagi? -->
<div id="footer">
        <p>&copy; 2009 Kaks Värvi All Rights Reserved.</p>
</div> <!-- Footer -->

</div> <!-- outer- sellist ei algagi?  -->
</body>

morb · Postitus Postitas **morb** » 12.03.2009, 20:13

Võtaks ka pisut eeltoodud teemal sõna. Vahemärkusena: tääg? Silt...
Kui kujunduslikult on põhjendatud tabelite kasutamine, siis tuleb kasutada tabeleid, ajas tagasimineku jutt on religioosse maiguga. Samuti tundub, et praegusel ajal on levinud komme kodulehe kujundus miskis graafilises redaktoris valmis joonistada ning see siis seejärel lasta HTML-iks teisendada, tekib hunnik stiilisodi, millest osa on ebavajalik ja sagedasti tekivad probleemid erinevate brauserite esitustel.
Lisan veel seda, et kodulehe tellijat reeglina ei huvita lehe valideerumine vaid see, et erinevad brauserid näitaks kodulehte sarnasena. Kodulehtede statistikaid jälginuna pean nentima, et paraku on veel suur osa arvutikasutajaid, kes kasutavad IE 6-t (eriti väljaspoolt eestit tulnud külastuste puhul) ja tellijale ei meeldi võimalus, et need potentsiaalsed kliendid ei näe tellija kodulehte korralikult.

Postitus Postitas **sander85** » 12.03.2009, 20:33

morb kirjutas:Võtaks ka pisut eeltoodud teemal sõna. Vahemärkusena: tääg? Silt...
Kui kujunduslikult on põhjendatud tabelite kasutamine, siis tuleb kasutada tabeleid, ajas tagasimineku jutt on religioosse maiguga. Samuti tundub, et praegusel ajal on levinud komme kodulehe kujundus miskis graafilises redaktoris valmis joonistada ning see siis seejärel lasta HTML-iks teisendada, tekib hunnik stiilisodi, millest osa on ebavajalik ja sagedasti tekivad probleemid erinevate brauserite esitustel.
Lisan veel seda, et kodulehe tellijat reeglina ei huvita lehe valideerumine vaid see, et erinevad brauserid näitaks kodulehte sarnasena. Kodulehtede statistikaid jälginuna pean nentima, et paraku on veel suur osa arvutikasutajaid, kes kasutavad IE 6-t (eriti väljaspoolt eestit tulnud külastuste puhul) ja tellijale ei meeldi võimalus, et need potentsiaalsed kliendid ei näe tellija kodulehte korralikult.

see ongi suhtumise juures väär, et selliseid kasutajaid hellitatakse.. panna kiri üles, et kui on IE6, siis süüdistagu oma süsadminni ja asi vask, mingi ikaldund brauser ei saa jäädagi veebiarengut pidurdama.. guugel ja paljud teised suuremad tegijad vaikselt tõrjuvad seda brauserit juba ammu turult välja, aga on neid tublisi tegijaid, kes ikka pressivad oma krdi IE6-e tuge..

jälgin ka päris mitmete saitide statistikat ja üldiselt võib öelda, et tänasel päeval kasutatakse IE6-te juba vähem kui Firefoxi..

tõesti pead reaalseks korraga kolme IE-d toetada?

ja tabelite kasutamise taunimine ei ole midagi religioosset, tabelid on lihtsalt väga ebamugav viis midagi teha ja mõttetu html'i suuruse punnitaja, rääkimata sellest, et raskendab tõsiselt loetavust.. kui oskad css'i piisavalt, siis ei ole mingi probleem oma leht kokku panna stiilide abil, jah, eks IE6 paneb siinkohal valusalt näkku eksole...

õigustatuks jääb tabel muidugi näiteks hinnakirjade puhul ja sellistes kohtades..

Postitus Postitas **spott** » 12.03.2009, 21:14

Firebug on tegelikult suht mugav asi. Katsun midagi sellest välja nikerdada

illukas · Postitus Postitas **illukas** » 12.03.2009, 22:24

sander85 kirjutas:tõesti pead reaalseks korraga kolme IE-d toetada?

mis seal imelikku on?

täiesti valideeruv ja näitab praktiliselt iga browseriga samamoodi ja pole seal midagi palju keerulisemat või lihtsamat. Tabelid on lihtsad ja neid toetavad ka igivanad browserid. Ja ei näe mina mingit tagasiminekut kui kasutatakse töötavat lahendust

Kusjuures IE3-ga näitab peaaegu samamoodi, kujunduselemendid osad puudu, kuid lehe üldine paigutus korras ja asjad on vähemalt omadel kohtadel

illukas · Postitus Postitas **illukas** » 13.03.2009, 00:24

sirvisin kiiruga nati ringi
suurimad eesti lehed kasutavad tabeleid
orkut.com- vähemalt avaleht
google.com- pisike tabel, väga lihtsalt lahendatav css-iga

Ma ei saa aru mida te neist tabelitest niiväga kardate?

ingmar · Postitus Postitas **ingmar** » 13.03.2009, 00:32

Need "tõsised" tegijad ütlevad, et tabelitega ei saa midagi teha

. No tegelt CSS lehekülge on lihtsam muuta, kui midagi vaja ümber tõsta. Pmst lektor ütles, et võrdluseks nagu linux ja windows. CSS - saab teha võimsalt ja väga head asja, aga peab vaeva nägema, tabel - nagu windows lihtne ja toimib.

wk · Postitus Postitas wk » 13.03.2009, 01:33

illukas kirjutas:mis seal imelikku on?
näiteks; http://kalmetu.vil.ee/

täiesti valideeruv ja näitab praktiliselt iga browseriga samamoodi ja pole seal midagi palju keerulisemat või lihtsamat. Tabelid on lihtsad ja neid toetavad ka igivanad browserid. Ja ei näe mina mingit tagasiminekut kui kasutatakse töötavat lahendust

Tabelid on hädalahendus esteetika ja funktsionaalsuse viimisel sinna, kuhu seda ette ei olnud nähtud. Tabelid on umbes sama mõistlik lahendus kui tühikutega teksti kujundamine. Need olid omal ajal hädatarvilikud parema puudusel, aga nende aeg kujunduse tugisambana sai ümber juba nii ammu, et oleks mõistlik sellele HTMLi elemendile anda tagasi tema õige funktsioon.

Sinu näidatud lihtsa lehe saab katta nii lihtsa CSSiga, et ei kujuta ette sirvijat, mis selle näitamisel hätta jääks. Mis on asja boonus: kui mingi vana sirvija ei näita ka täpselt nii nagu kujundaja ette nägi, saab kasutaja ikka kõigele ligi, kuna html on sisuliselt õigesti struktureeritud. Lisaboonus: sisu on lihtsasti hallatav teiste meediate jaoks (printer, pimedate kiri, kõnesüntesaatorid, pihuarvutid). Lisalisaboonus: kujunduse vahetamine või kohendamine on sisust rohkem lahutatud, seega jätkusuutlikum.

E: Ingmar, väga hää võrdlus. Üks on laisk ja toimib-kah lähenemine, teine süstemaatiline ja standardeid austav. Kes see lektor oli, kui küsida tohib?

CSSi osas veel nii palju, et natuke lisalugemist võib aidata paljusid asju paremini mõista. Ma küll teadsin juba väga ammu, milleks CSS loodud on, aga laiemalt avas mul silmad HTML Utopia: Designing Without Tables Using CSS, säält saab raamatu ka vabalt allalaadida, vähemalt algajale eriti olulised 4-5 peatükki sai 1. väljaande ajal tirida.

Postitus Postitas **sander85** » 13.03.2009, 08:24

illukas kirjutas:
sander85 kirjutas:tõesti pead reaalseks korraga kolme IE-d toetada?
mis seal imelikku on?
näiteks; http://kalmetu.vil.ee/

täiesti valideeruv ja näitab praktiliselt iga browseriga samamoodi ja pole seal midagi palju keerulisemat või lihtsamat. Tabelid on lihtsad ja neid toetavad ka igivanad browserid. Ja ei näe mina mingit tagasiminekut kui kasutatakse töötavat lahendust

Kusjuures IE3-ga näitab peaaegu samamoodi, kujunduselemendid osad puudu, kuid lehe üldine paigutus korras ja asjad on vähemalt omadel kohtadel

loomulikult kuvab seda ka vanem IE, sest olgem ausad, see on ju aastast 1999 lehekülg ka, vähemalt raudpolt sinna ajastusse..

kui veel natuke lehe sortsu kaeda, siis nii mõneski kohas leidub <br><br> jne.. <br>'i kutsutakse tänapäeval laisa mehe lõiguks.. korralikus sortsus on lõigud ikka eraldatud elemendiga <p>

mis stiilide juures veel hea on, on printimise stiili lisamise võimalus, kui määrad lehe printimisele, siis võib sealt täiesti vabalt eemaldada enamuse sisust täpselt selle sama html'iga vt näiteks http://www.revalhotels.com/en/Special-o ... -and-saver ja selle printimise eelvaadet.. tabelitega ei tee seda väga lihtsalt järgi

Huck · Postitus Postitas **Huck** » 13.03.2009, 09:32

See tabelid vs. css disain on igivana lõputu vaidlus. Sellist 2-3 veerulist ning header-body-footer lehte on css'iga imelihtne ning kiire normaalselt käima saada.
Spotti näites oli ilmselt kurja juureks lihtsalt rikkis html- muidugi kui need katkised elemendid tabelisse suruda siis need oleksid ettenähtud kohas aga see on jõu meetod:) Sama lihtne oleks ka korra kood üle vaadata ning näpuvead ära parandada- tegin esialgsed märkused oma eelmisse postitusse.

Võib vist arvata, et olen ka css disaini pooldaja

Mõned lingid ka minupoolt:
http://css.triin.net/ - eestis valideeruvad veebilehed. Vahest leiab mõne hea nüansi või disainiidee.
http://math.ut.ee/~martin11/ - üks viisakas css'i peal põhinev leht, mille koodi ja stiililehte uurides sain ise alustades palju abi.
http://css.maxdesign.com.au/listamatic/ - listidega mängimine css'iga
http://en.wikipedia.org/wiki/Internet_E ... _model_bug - see vist ongi probleem miks IE'ga peab väikest hack'i kasutama.