În IE6, dacă se folosesc imagini la background-ul unui link, acestea „flicker-e” (care ar fi traducerea?) în cazul unui event mouse-over. Asta deoarece se pare că IE nu prea ştie să facă un cache la respectivele imagini. Sau dacă îl face, îl face foarte prost (cam ca orice altceva face IE6 )

Din fericire, pentru asta există un fix javascript foarte simplu:

1
2
3

try {
  document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

Din păcate merge doar pe IE6 SP1. Din fericire, majoritatea îl au

Via.

Aşa cum am spuneam aici, puneam la cale o bară de navigare asemănătoare cu asta cu diferenţa că cea din urmă are şi un efect drăguţ.

Trebuie să precizez întâi de toate dezavantajele acestei metode (da, există nişte dezavantaje):

• Fiecare link necesită o imagine. Asta înseamnă că în momentul în care vrei să schimbi textul trebuie să modifici imaginea. Dacă este pentru un site ce nu-şi schimbă prea des link-urile, nu este o problemă serioasă;
• Cod suplimentar. La fel ca şi prima bară de navigare de altfel. În locul unui span se poate folosi orice element inline: em, strong, etc.

Codul este asemănător cu cel anterior, cu diferenţa că fiecare link are o clasă:

1
2
3
4
5
6

<ul id="fadeMenu">
    <li><a href="#" class="m1"><span>Home</span></a></li>
    <li><a href="#" class="m2"><span>About</span></a></li>
    <li><a href="#" class="m3"><span>Faq</span></a></li>
    <li><a href="#" class="m4"><span>Contact</span></a></li>
</ul>

Citeste mai departe

Astăzi sunt mai darnic decât de obicei în ceea ce priveşte CSS-ul. După ce mai devreme am scris un mic tutorial, m-am apucat de lucru. Şi când testam un formular în Safari am observat că resize-ul de la un textarea este un pic inestetic. La fel şi când un element de formular are focus, capătă un mic glow albăstrui. E cool, dar uneori nu dă bine în design.

Pentru a scoate acel glow, se adaugă în css:

1

input,textarea {outline:none}

Pentru redimensionarea textarea, rezolvarea este stupid de simplă:

1

textarea {resize:none}

Nu-i aşa că e simplu?

Am observat că sunt destul de mulţi programatori în devenire ce nu ştiu (sau întâmpină greutăţi) să facă o bară de navigare cu fundal diferit la hover. Este o metodă ce o folosesc foarte des, fără să am probleme în diferite browsere.

PASUL I

Meniul propriu zis este realizat folosind o listă neordonată:

1
2
3
4
5
6

<ul id="slidingDemo">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Faq</span></a></li>
	<li><a href="#"><span>Contact</span></a></li>
</ul>

Primul pas este aşezarea orizontală a listei:

1
2
3
4
5

#slidingDemo li{
	list-style:none;
	float:left;
	margin:0 10px;
}

Întrucât IE6 tratează un pic diferit float-urile şi marginile, adăugăm şi

1

* html #slidingDemo li {display:inline}

Este un hack ce este interpretat doar de IE6, neafectând funcţionarea în browserele adevărate.

PASUL II

Imaginea de fundal trebuie să fie mai lată decât textul şi este necesar să aibe două „stări” (normal şi hover), după care purcedem la stilizarea link-urilor.

1
2
3
4
5
6
7
8
9

#slidingDemo li a{
	display:block;
	background:url(buton.gif) no-repeat left top;
	height:26px;
	padding-left:10px;
	color:#fff;
	font:700 .88em/26px Arial, Helvetica, sans-serif;
	text-decoration:none;
}

Citeste mai departe

http://reference.sitepoint.com/

Foarte frumos documentat şi cu siguranţă foarte util pentru începători. Enjoy!