Problema in IE risolto

keratox

Problema in IE risolto

Premetto che in Firefox e in Opera si vedeva bene a qualsiasi risoluzione.
Ma in IE c'erano dei problemi.

I problemi riguardano un layout table-less (xhtml + css) a tre colonne dotato di header e footer (anche se non è di questi di cui ci dobbiamo preoccupare).
Potete vedere qui il risultato: http://www.keratox.net .

Gli errori interessavano la larghezza (width) della colonna centrale.

Poichè le colonne laterali occupavano un buon 20% a testa della pagina, rimaneva centralmente circa 60% di spazio.
Firefox e opera, browser seri, per far si' che la colonna centrale prendesse tutto lo spazio, necessitavano di un width pari al 60% o con il valore 'auto'.
In IE, invece, per una corretta visualizzazione, era necessario settare il width a 100%.

Con i CSS era un bel guaio, perche', a meno di cambiare stile progettuale del layout (magari usando i posizionamenti assoluti invece dei float), non vedevo tante vie di salvezza.

Così si è accesa la lampadina: javascript.

Riconoscendo il browser, potevo cambiare lo stile del div#center (la colonna centrale).


<script type="text/javascript">
function forIE&#40;&#41;&#123;
if&#40;navigator.appName=="Microsoft Internet Explorer"&#41;&#123;
  document.all.center.style.width='100%';
&#125;
&#125;
</script>
....
<body onload="forIE&#40;&#41;;">
....

Il primo script (utilizzando navigator.appName) sembrava andar bene, ma, oh! Vado a vedere con Opera, e si vede male (perche' associa il 100% che dovrebbe essere associato solo in IE).

Ecco la spiegazione (tratta da http://www.quirksmode.org/js/detect.html)

Never use navigator.appName. To hide their true identity, many browsers give this property the values Netscape or MSIE. Any browser detect based on navigator.appName is totally wrong.

Cosi' ho copiato il codice (sempre di quel sito)


var detect = navigator.userAgent.toLowerCase&#40;&#41;;
var OS,browser,version,total,thestring;

if &#40;checkIt&#40;'konqueror'&#41;&#41;
&#123;
	browser = "Konqueror";
	OS = "Linux";
&#125;
else if &#40;checkIt&#40;'safari'&#41;&#41; browser = "Safari"
else if &#40;checkIt&#40;'omniweb'&#41;&#41; browser = "OmniWeb"
else if &#40;checkIt&#40;'opera'&#41;&#41; browser = "Opera"
else if &#40;checkIt&#40;'webtv'&#41;&#41; browser = "WebTV";
else if &#40;checkIt&#40;'icab'&#41;&#41; browser = "iCab"
else if &#40;checkIt&#40;'msie'&#41;&#41; browser = "Internet Explorer"
else if &#40;!checkIt&#40;'compatible'&#41;&#41;
&#123;
	browser = "Netscape Navigator"
	version = detect.charAt&#40;8&#41;;
&#125;
else browser = "An unknown browser";

if &#40;!version&#41; version = detect.charAt&#40;place + thestring.length&#41;;

if &#40;!OS&#41;
&#123;
	if &#40;checkIt&#40;'linux'&#41;&#41; OS = "Linux";
	else if &#40;checkIt&#40;'x11'&#41;&#41; OS = "Unix";
	else if &#40;checkIt&#40;'mac'&#41;&#41; OS = "Mac"
	else if &#40;checkIt&#40;'win'&#41;&#41; OS = "Windows"
	else OS = "an unknown operating system";
&#125;

function checkIt&#40;string&#41;
&#123;
	place = detect.indexOf&#40;string&#41; + 1;
	thestring = string;
	return place;
&#125;

L'ho modificato secondo le mie necessità (levando OS, versione ...).
Cosi


<script type="text/javascript">
<!--
var detect = navigator.userAgent.toLowerCase&#40;&#41;;
var browser,version,total,thestring;

if &#40;checkIt&#40;'konqueror'&#41;&#41;
&#123;
	browser = "Konqueror";
&#125;
else if &#40;checkIt&#40;'safari'&#41;&#41; browser = "Safari"
else if &#40;checkIt&#40;'omniweb'&#41;&#41; browser = "OmniWeb"
else if &#40;checkIt&#40;'opera'&#41;&#41; browser = "Opera"
else if &#40;checkIt&#40;'webtv'&#41;&#41; browser = "WebTV";
else if &#40;checkIt&#40;'icab'&#41;&#41; browser = "iCab"
else if &#40;checkIt&#40;'msie'&#41;&#41; browser = "Internet Explorer"
else if &#40;!checkIt&#40;'compatible'&#41;&#41;
&#123;
	browser = "Netscape Navigator"
&#125;
else browser = "An unknown browser";


function checkIt&#40;string&#41;
&#123;
	place = detect.indexOf&#40;string&#41; + 1;
	thestring = string;
	return place;
&#125;

function check&#40;&#41;&#123;
if&#40;browser=="Internet Explorer"&#41;
  document.all.center.style.width='100%';
&#125;
//-->
</script>

....
<body onload="check">
....

E ora va bene ovunque.

Finalmente.

Andavo avanti nel sito anche senza correggere questo bug, aspettando risposte dai forum (il consiglio di javascript è venuto da un forum inglese).

Ciao

giorgiotave

keratox grazie molte

keratox

di nulla

ciauz