css mozilla vs crhrome vs ostali

[zecaff]

Prije svega lijep pozdrav, moje ime je Jasmin, volim Joomla-u, koristim ju sigurno 5+ godina, i izuzetno mi je drago vidjeti ovako aktivan domaći komjuniti.

Moje pitanje tj problem mozda nije direktno u vezi sa Joomla CMS-om, ali obzirom da mi se javlja prilikom izrade web stranica u Joomli mislim da ovdje mogu postaviti isto. Mene zanima na koji način se kontroliše css za različite web preglednike. Recimo da sam savršeno uštimao css/dizajn/layout za mozzillu, kada istu stranicu pogledam u kromu, vidim da chrome i mozilla nemaju iste standarde, te npr.. u chromeu  mi bježe neki divovi, negjde ima više prostora između div-ova , neka slika ima veći margin... itd... tako da me zanima na koji način vi riješavate ovakve probleme, te kako da "naredim" u .css fileu da koristi određeni css ukoliko je u pitanju mozilla, a ako je chrome da koristi drugi css. i sl.
Nadam se da me razumijete, hvala unaprijed.
Srdačan pozdrav

[Dario]

Ja bi prije reko da negdje poprilično griješiš s CSS-om. Meni se takve stvari u pravilu ne događaju, samo moraž znati kakve quirk-ove koji browser ima pa ih zaobilaziš već u startu. Ono što bi te još moglo mučit su defaultna pravila određenih browsera, tak da ako ti se to često događa probaj prvo učitat neki od CSS Reset-ova.

Ako imaš kakav konkretan primjer gdje ti se to događa, daj mi link pa ti možda mogu nešto više reći.

Što se tiče specifičnih css-ova za određene browsere, to će ti bii najbolje da proguglaš primjerice "Firefox specific css" pa ćeš naći kako se radi. Uglavnom ja nikad nisam koristio specifične CSS-ove, uz izuzetak naravno Internet explorer, a i to je čak rijetkost budući da sam jako dugo u web-u i već kod kodiranja izbjegavam stvari za koje znam da će mu radit probleme.

[zecaff]

Toga se i bojim, velike su šanse da griješim prilikom izrade layout-a za neke stvari. Razlog tome jeste mozda i sama joomla zbog koje sam postao mrskorod te sam preskočio neke školske stvari kao što su html/css :)

U pitanju je sljedeći kod:

Kod [Odaberi] Expand

<style type="text/css">
#promocontainer {
padding-top:3px;
}
#promo {-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
-moz-box-sizing: border-box;
border-bottom: 1px dashed #CFCFCF;
height: 53px;
padding: 5px 5px 5px 0;
width: 240px;
}
#promoslika {border-radius: 2px;
box-shadow: 0 0 2px #BCBABA inset;
color: #BCBABA;
float: left;
font-size: 12px;
font-weight: bold;
height: 30px;
line-height: 16px;
margin-left: 2px;
margin-right: 19px;
overflow: hidden;
padding: 6px;
text-align: center;
width: 60px;
   }
#promonaslov {
color: #333333;
float: left;
font-size: 107%;
font-weight: normal;
margin:3px 30px 0 0;
text-transform: uppercase;}
#promotext {
color: #BCBABA;
font-size: 10px;
line-height: normal;}
</style>


<div id="promocontainer">


<div id="promo">
<div id="promoslika">VAŠ RADIO</div>
<div id="promonaslov">Slot 1</div>
<div id="promotext">Promovišite Vaš radio.</div>
</div>

<div id="promo">
<div id="promoslika">VAŠ RADIO</div>
<div id="promonaslov">Slot 2</div>
<div id="promotext">Promovišite Vaš radio.</div>
</div>

<div id="promo">
<div id="promoslika">VAŠ RADIO</div>
<div id="promonaslov">Slot 3</div>
<div id="promotext">Promovišite Vaš radio.</div>
</div>

<div id="promo">
<div id="promoslika">VAŠ RADIO</div>
<div id="promonaslov">Slot 4</div>
<div id="promotext">Promovišite Vaš radio.</div>
</div>

<div id="promo">
<div id="promoslika">VAŠ RADIO</div>
<div id="promonaslov">Slot 5</div>
<div id="promotext">Promovišite Vaš radio.</div>
</div>

</div>




Ukoliko ovako na prvu mozete vidjeti gdje griješim bio bih zahvalan, svakako moram proguglati i naučiti ove osnovne stvari.
Lijep pozdrav

[Dario]

Prvo mi nije jasno zašto prefiksiraš primjerice boju bordera? -moz- prefix se odnosi samo na mozillu, znači chrome, opera i ostali nemaju pojma što je property koji počinje sa "-moz-"... Također border color none ne postoji... Ako već mora postojati border, ali se nesmije vidjeti onda mu staviš "transparent" iako sam to možda koristio 2-3 puta do sad... Uglavnom evo moja verzija tvog css-a..

Kod [Odaberi] Expand




#promocontainer {
    padding-top: 3px
}
#promo {
    border: 1px dashed transparent; /* Ako baš mora bit border, neka bude proziran */
    border: 0; /* Prvo setiramo sve bordere na nulu, znači nema bordera */
    border-bottom: 1px dashed #CFCFCF; /* i onda postavljamo samo property donjeg bordera */
    height: 53px;
    padding: 5px 5px 5px 0; /* Ako želiš da ti kod radi u internet exporeru, ni u ludilu koristiti padding i width/height na istom elementu. */
    width: 240px;  /* Ako trebaš i width i padding onda daj ovom div-u width, a unutar njega napravi još jedan div i njemu daj samo padding */
}
#promoslika {
    border-radius: 2px; /* border radius neće raditi bez prefixa na starijim browserima pa ih je potrebno prefiksirati, vidi dva slijedeća redka */
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 0 0 2px #BCBABA inset; /* Isto vrijedi i za box-shadow */
    -webkit-box-shadow: 0 0 2px #BCBABA inset;
    -moz-box-shadow: 0 0 2px #BCBABA inset;
    color: #BCBABA;
    float: left;
    font-size: 12px;
    font-weight: bold;
    width: 60px;
    height: 30px; /* opet kombinaciaj visine/širine s padding-om */
    padding: 6px;
    line-height: 16px;
    margin-left: 2px;
    margin-right: 19px;
    overflow: hidden;
    text-align: center;
}
#promonaslov {
    color: #333333; /* Može i skraćena verzija za boje u ovom slučaju - #333. Kad imaš samo tri znamenke svaka se dupla, pa je tako primjerice boja #123 u biti #112233 */
    float: left;
    font-size: 107%;
    font-weight: normal;
    margin: 3px 30px 0 0;
    text-transform: uppercase;
}
#promotext {
    color: #BCBABA;
    font-size: 10px;
    line-height: normal;
}


Eto to je to ukratko :)

[zecaff]

Prefixiram iz razloga što nemam pojma šta radim izgleda. Pomogao si mi puno, i već sam shvatio neke velike greške koje sam radio, u biti sve same osnove css-a , kao i html/a. Tek vidim koliko ne znam, ali bitno je da imam zelju ogromnu i uzivam u tome.  Cesto znam koristiti mod_customhtml  modul u joomli, za neke  css/js bannere , uredim ih pomocu firebug-a u mozilli da fantasticno izgledaju , a onda pogledam u chrome-u i razocaram se :D, međutim evo vec sam uspio ovo da prilagodim i za chrome iz tvoju pomoć . Zahvaljujem, dok nadjem vremena , pokušat ću razmijeniti svoja iskustva sa zajednicom .

Lijep pozdrav

[Dario]

Ja inače uvijek pišem najprije sve bez prefixa i onda kad sam gotov s projektom, jednostavno pronađem kroz kod i dodam prefixe na property-je za koje znam da moraju ići, a to su ti border-radius, box-shadow i transition koje skoro pa uvijek koristim. Zna se dogodit da mi treba background-size koje treba još za FireFox dodat prefixe dok ostali kuže situaciju i to je manje više to. Na kraju radim iz razloga što se često znam igrat sa bojama i pozicioniranjem sjena pa onda nema smisla se igrate s 3-5 redaka već samo sa jednim - naravno do dok ne postigneš željene rezultate :)