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 ). 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]

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]

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.