Na netu postoji gomila sajtova, sa savetima i resursima za web development (nekako mi ona naša reč razvoj ne zvuči najbolje u ovom kontekstu ), pa reko da i ja pridodam malo tome… baviću se jednom glavoboljom na koju su svi ljudi koji se bave webom naleteli – kako da sajt lepo izgleda i u Internet Exploreru (pogotovo v6). Sad kad pogledam neke stare sajtove na kojima sam radio, mnogo mi je lakše da ponovo napišem CSS umesto da ga prilagođavam da bi nešto lepo izgledalo u IE.

Jednostavno, iako je Firefox (Opera i sl) mnogo bolji browser od ponuđenog MS rešenja, jednostavno morate napraviti sajt da bude lepo prikazan u istom, jer i dalje dobar procenat ljudi koristi dotični browser. Zato ću vam dati par brzih saveta…

1. Izračunavanje witdh i height atributa:

Svi browseri osim IE, ukupnu širinu elementa (ili visinu) računaju po formuli
width + padding + border-width
dok IE od width vrednosti oduzima padding i border. Ima dosta predloženih rešenja, ali po meni najjednostavnije je ovo (za neku klasu bla).

.bla{
/* ova linija će biti pročitana od strane svih broswera */
  width: 400px;
  border: 2px solid black;
  padding: 8px;

/* ova linija neće biti pročitana samo od strane IE-a */
  width/**/:/**/380px;
}

I time smo rešili taj problem, zadnju liniju će pročitati svi osim explorera, i poništiti prvu liniju, dok će explorer srećno raditi sa prvo pročitanom vrednošću.

2. Nestajući tekst i slike u IE6

Ovo je jedan od najčudnijih bagova, nekad se jednostavno desi da nešto od sardžaja nestane. Puf, i nema više. Ali i za to ima leka, samo nesrećnom elementu dodelite position:relative;

3. min-height (min-width)

Ove atribute IE6 ne prepoznaje uopšte, zato koristite ovaj quick-fix:

.bla{
  min-height:500px;
  height:auto !important;
  height:500px;
}

4.PNG alpha providnost

Od gomile skripti na netu za ovaj problem ja sam dugo koristio TwinHelix skriptu. Na tom linku je skripta i kompletno upustvo, mada sada koristim ovu. Za ovu drugu je dovoljno da je ubacite u svoju stranicu, ali jedino ne radi za png slike koje su izabrane kao pozadinske slike (background-image), tako da se držte jpeg i gif što se njih tiče.

EDIT: probajte i ovo rešenje, izgleda najbolje do sada…

5. :hover problem

Ovde možete naći skriptu koja rešava i ovaj problem (to što IE ne primenjuje :hover), samo je ubacite u stranu, i dodajte u css fajl:

body {
  behavior: url("csshover3.htc");
}

ako se ne snađete, na datom linku ima i objašnjenje.

6. Duple margine

Nekad se desi da IE6 dupkira margine, tom elementu dopišite display:inline; i trebalo bi da je problem rešen.

Eto toliko od mene, nisam hteo da se pravim pametan, pošto su ove sve tuđa rešenja, nijedno nisam sam izmislio, već samo da ih skupim na jedno mesto. Iz dva razloga, da možda pomognu nekog, i da ja, ako zapnem i zaboravim nešto od ovoga, mogu biti siguran da sam to negde sačuvao. Ovo su česti problemi, ima ih još sigurno, ali trenutno ne mogu da se setim…

Sve u svemu nadam se da će nekom ovo koristiti, i ako ima još nekih pitanja oko CSS-a, rado ću da pomognem…

Pozdrav!
S