DevProTalk

DevProTalk (http://www.devprotalk.com/index.php)
-   (X)HTML, JavaScript, DHTML, XML, CSS (http://www.devprotalk.com/forumdisplay.php?f=8)
-   -   Uslovni CSS (http://www.devprotalk.com/showthread.php?t=61)

bluesman 14. 06. 2005. 18:57

Uslovni CSS
 
Verovatni svi koristite različite CSS kodove u zavisnosti od browsera, ovaj hack jednostavno radi:

HTML kôd:

#main {
        text-align: left;
        width:490px;
        <!-- width:485px; --> /* samo za IE */
        }

ali na ovo se zgroze "čistunci koda" pošto nije validno. Alternativa je upotreba posebnih .css fajlova za svaki browser, međutim često je u pitanju razlika u par redova, a mnoštvo fajlova otežava održavanje.

Kako rešavate taj problem?

Možda da objasnim bolje: baš sada me nervira IE pošto radim layout strane koja ima 2 polovina, leva treba da bude 510px a desna 490px. Prostim sabiranjem dobijemo širinu od 1000px. U FF radi sve ok, međutim IE spusti desnu stranu ispod ?!?!? ako stavim da je širina 490px pa moram da je smanjim na 485px i onda je ok. Gde nestane 5px nemam pojma.

HTML kôd:


#nav {
        text-align: left;
        width:510px;
        background: #ffffff;
        float:left;
        }

#main {
        text-align: left;
        margin-left:510px;
        width:490px;
    <!-- width:485px; --> /* IE ****s up stuff */
        }

Jedino ovako radi u oba browsera. Kada sklonim ovaj "hack" - onda ne radi u IE.

Dragan Babić 14. 06. 2005. 19:38

ovo vidi samo IE
Kôd:

*html #tvojelement{
width:vrednost za ie;
}

to stavis ispod regularnog koda

EDIT:

sto se tice drugog pitanja, probaj npr. da resizujes stranicu, kladim se da ce se pojebati jos vise, pogotovu kada je rec o procentima.
naime uvek ti treba malo veca "rupa" izm elemenata da bi se sve lepo uklopilo u vecini slucajeva.

moj savet - izbegavaj takav pixel precision, vrlo malo layouta stvarno funkcionise s tim (citaj three column layout - the grail ). gledaj da to bude malo opustenije. ;)

Br@nkoR 14. 06. 2005. 23:48

Nisam testirao ali ovo je samo pretpostavka.
Da li si siguran da se radi o 5px?
Prema kodu koji si postavio moja pretpostavka je da se ovde radi o 3px bug-u u IE, a ne o 5px kako je napisano.
Probaj da dodaš ovo na kraj CSS koda:
Kôd:

* html #nav {
margin-right: -3px;
}
* html #main {
margin-left: 0;
}

Ukoliko je to to. Za više informacija potraži na Google-u "three pixel bug".

Pozdrav.

Goran Aničić 15. 06. 2005. 00:49

Citat:

Alternativa je upotreba posebnih .css fajlova za svaki browser, međutim često je u pitanju razlika u par redova, a mnoštvo fajlova otežava održavanje.
U potpunosti se slažem sa ovim pristupom. Za sada ne možemo naterati "proizvođače" browsera da usaglase sopstvene produkte sa pozitivnom praksom i standardima.

noviKorisnik 15. 06. 2005. 01:05

Citat:

Originalno napisao bluesman
Alternativa je upotreba posebnih .css fajlova za svaki browser, međutim često je u pitanju razlika u par redova, a mnoštvo fajlova otežava održavanje.

Ako je zaista razlika u par redova, sve zajedničke definicije mogu da se izvuku u Common Css, dok Specific Css-ovi mogu da sadrže samo razlike.

Ilija Studen 15. 06. 2005. 01:13

Upravo radim jedan ne baš preterano naivan CSS layout i sve je u jednom fajlu, i za IE i za ostalu đecu. Jednostavan isečak iz fajla:

Kôd:

#search {
  position: absolute;
  left: 573px;
  height: 99px;
  width: 192px;
  background: #A7C3F3;
}

* html #search {
  left: 568px;
}

To je manje više to. U prvoj definiciji napravim da radi u standard complient browserima (Firefox + Opera su test browseri), a u drugoj korigujem vrednosti da se pravilno prikazuju u IE.

Ne koristim odvajanje u više fajlova (jedan common, drugi za IE ili slična varijanta) jer mi je nepregledno, a i zna da bude prilično pipavo ako se koristi neko napredno nasleđivanje... Korekcije su prilično male pa hackovi ne zatrpavaju glavni CSS fajl.

Kamo sreće da nismo prisiljeni na ovakva dovijanja :(

nixa 15. 06. 2005. 01:33

uskoro uskoro .. IE 7 :P

cicika 15. 06. 2005. 19:28

Pozdrav svima!

Ne živim od ovoga i ne bavim se time aktivno, ali s vremena na vreme kad poželim da promenim izgled svoje web stranice na Galeb-u CSS prilagodim za IE ovako:

Kôd:

div#navigacija {...
                margin: auto auto auto 480px !important;
                margin: -300px auto auto 480px; ... }

IE ne zna šta je !important pa prodje kroz to i učita sledeću vrednost za isti element, dok se FF zasutavi na tome i svaku sledeću izmenu, u ovom slučaju, margine za dati deo strane ignoriše.

Takodje, još jednu zanimljivu stvar sam primetila u to malo zezanja sa CSSom, možda je to vama odavno poznato. Ukoliko se u samom startu pravljenja/dizajniranja web strane u html-u definiše doctype (ja uvek koristim XHTML 1.0 Strict) IE pravilnije renderuje stranu i CSS i odstupanja su mnogo manja nego u slučaju da se definiše HTML 4.01 ili da se doctype potpuno izostavi.

Ilija Studen 16. 06. 2005. 00:50

Citat:

Takodje, još jednu zanimljivu stvar sam primetila u to malo zezanja sa CSSom, možda je to vama odavno poznato. Ukoliko se u samom startu pravljenja/dizajniranja web strane u html-u definiše doctype (ja uvek koristim XHTML 1.0 Strict) IE pravilnije renderuje stranu i CSS i odstupanja su mnogo manja nego u slučaju da se definiše HTML 4.01 ili da se doctype potpuno izostavi.
Koliko je meni poznato, IE ima standard complient mod, a kad je stranica u tom modu IE 6 nema problema sa računanjem širine i visine boxa (box model bug). Ovo bi trebalo proveriti jer se sećam da sam nešto čitao o tome, ali nisam 100% siguran.

xippi 16. 06. 2005. 06:18

one file fits all ;)
za razlike u browserima uvek koristim holy hack. nekako mi deluje kao najelegantnije resenje, pogotovu u slucaju gadjanja minimalne visine elemenata

#div { min-height: 50px; }
*html #div { height: 50px; }

^skroz kul

inace odavno sam se pomirio sa cinjenicom da vecina komplikovanih layouta ne moze da prodje kroz validator zbog tone ie hackova


Vreme je GMT +2. Trenutno vreme je 18:16.

Powered by vBulletin® Verzija 3.6.8
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Copyright © DevProTalk. All Rights Reserved.

Mišljenja, saveti, izjave, ponude ili druge informacije ili sadržaji nastali na Sajtu su vlasništvo onoga ko ih je kreirao, a ne DevProTalk.com, tako da ne morate da se oslanjate na njih.
Autori poruka su jedini odgovorni za ovakve sadržaje. DevProTalk.com ne garantuje tačnost, kompletnost ili upotrebnu vrednost informacija, stavova, saveta ili datih izjava. Ne postoje uslovi pod kojima bi mi bili odgovorni za štetu ili gubitak koji je posledica bilo čijeg oslanjanja na nepouzdane informacije, ili bilo kakve informacije nastale kroz komunikaciju između registrovanih članova.
Web sajt može sadržavati linkove na druge web sajtove na Internetu ili neke druge sadržaje. Ne kontrolišemo niti podržavamo te druge web sajtove, niti smo pregledali bilo kakve sadržaje na takvim sajtovima. Mi nećemo biti odgovorni za legalnost, tačnost ili prikladnost bilo kog sadržaja, oglasa, proizvoda, usluga ili informacije lociranim na ili distribuiranih kroz druge web sajtove, niti za bilo kakvu štetu nastalu kao posledica takvih informacija. DevProTalk.com drži i čuva druga prava vlasništva na web sajtu. Web sajt sadrže materijale zaštićene copyright-om, zaštitne znakove i druge informacije o pravu vlasništva ili softver. Članovi mogu poslatu informacije zaštićene pravima vlasništva njihovih nosilaca i ona ostaju zaštićena bez obzira da li su oni koji prenose te informacije to naveli ili ne. Osim informacija koje su u javnom vlasništvu ili za koje dobijete dozvolu, nemate pravo da kopirate, modifikujete ili na bilo koji način menjate, objavljujete, prenosite, distribuirate, izvršavate, prikazujete ili prodajte bilo koju informaciju zaštićenu pravima vlasništva. Slanjem informacija ili sadržaja na bilo koji deo DevProTalk.com, Vi automatski dozvoljavate i predstavljate garanciju da imate pravo da dozvolite DevProTalk.com ili članovima DevProTalk.com bespovratnu, kontinualnu, neograničenu, globalnu dozvolu da koriste, kopiraju, izvršavaju, prikazuju i distribuiraju takve informacije i sadržaje i da iz takvih sadžaja koriste bilo koji deo u bilo koje svrhe, kao i pravo i dozvolu da koriste gore navedene sadržaje. Svi zaštitni znakovi (trademarks), logotipi, oznake usluga, firme ili imena proizvoda koji se pominju na ovom web sajtu su vlasništvo kojim raspolažu njihovi vlasnici.