Řešení blikajícího pozadí v MSIE

Nedávno jsem narazil na weblogu Radka Hulána na článek „Jak na blikající logo (background-image) v MSIE” a co čert nechtěl, nedlouho po jeho přečtení jsem narazil na stejný problém při tvorbě jednoho webu. Jak jsem se ve zmiňovaném článku dočetl, problém způsobuje cachování v Internet Exploreru. Bohužel ale řešení pomocí změny nastavení serveru pro mne bylo nemožné, tudíž jsem začal hledat způsob jak to celé obejít čistě pomocí XHTML a CSS.

Můj původní kód vypadal následovně :

<div id='main'>
		<h1><a href='/' title='titulek'>titulek</a></h1>
		<a href='/' title='titulek'><span id='head'>&nbsp;</span></a>
	<div id='content'>				
	</div>
	<div id='foot'>
	</div>
</div>

a k tomu CSS :

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	font-family: sans-serif;
	color: #000;
	background-color : #fff;
	font-size: 0.8em;
}

h1 {
	display: none;
}

#main {
	position : relative;
	width: 775px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

#head {
	margin: 0px;
	padding: 0px;
	width: 775px;
	height: 210px;
	background: url('head.jpg') 0 0 no-repeat #fff;
	display : block;
	cursor : pointer;
}

Příklad blikajícího pozadí v IE

Výše uvedený CSS zápis stačilo upravit následovně :

#main {
	position : relative;
	width: 775px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background: url('head.jpg') 0 0 no-repeat #fff;
}

#head {
	margin: 0px;
	padding: 0px;
	width: 775px;
	height: 210px;
	/* background: url('head.jpg') 0 0 no-repeat #fff; */
	display : block;
	cursor : pointer;
}

Příklad řešení blikajícího pozadí v IE.

Toť vše. Teď už si ani neblikne. Pokud potřebujete mít ve vnějším prvku (v mém případě #main) definováno jiné pozadí, není problém mezi #main a #head vnořit ještě jeden prvek např. #head_bg, který by nesl pozadí potřebné v hlavičce.

---

---

---

---

---