Uslovni CSS

[bluesman]

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


#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.



#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ć]

ovo vidi samo IE
*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 (http://glish.com/css/7.asp) ). gledaj da to bude malo opustenije. ;)

[Br@nkoR]

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:

* 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ć]

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]

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]

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:

#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]

uskoro uskoro .. IE 7 :P

[cicika]

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:

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]

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]

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

[Ilija Studen]

Uglavnom može da prođe, samo je pitanje da li si na pravi način napisao CSS za određeni layout. Ja o sada nisam imao problema sa validatorom, a i ne vidim da bi trebalo da ih bude... Ne znam za ostale, ali CSS mi se čini kao takav da je tu jako teško pogrešiti, bar što se validnosti CSSa tiče.

[xippi]

uglavnom je vrlo sirok pojam ;)

u layoutu koji upravo radim imam liniju
div#wrapper {
max-width:995px;
min-width:760px;
width:expression(document.body.clientWidth > 995? "995px": "auto");
margin-left: auto;
margin-right: auto;
text-align: left; }

ovo je kompromis koji sam odlucio da napravim, prljav css zbog ie-a. kada moram da biram uvek se odlucujem za lepo markapovan xhtml, dok css moze da ceka bolji support browsera