Un saluto a tutti, questo è il mio primo post.
Lavoro al mio sito utilizzando Linux e quindi preparo il mio foglio di stile principale per Firefox, utilizzando il PHP
"aggiusto" lo stile adattandolo a IE sfruttando il PHP in questo modo:
<link rel="StyleSheet" href="stile.css" type="text/css" />
<?
if (ereg("MSIE",$HTTP_USER_AGENT)) echo "<link rel=\"StyleSheet\" href=\"stileie.css\" type=\"text/css\" />\n";
?>
Naturalmente inserisco nel foglio di stile scritto per IE solo quei tag che non sono uguali a Firefox, essendo questo foglio di stile successivo a "stile.css" di base vengono prese in considerazione le "modifiche" inserite in "stileie.css".
Fino a ieri vivevo tranquillo e beato, quando poi mi è capitato casualmente di poter testare la pagina con IE7 installato su un portatile con Vista, mi è crollato il mondo sopra. Possibile che la gestione del padding e del margin sia stata modificata radicalmente?
Diciamo che potrei tranquillamente gestire la situazione creando due fogli di stile aggiuntivi dedicati alle due versioni di IE:
<link rel="StyleSheet" href="stile.css" type="text/css" />
<?
if (ereg("MSIE 6",$HTTP_USER_AGENT)) echo "<link rel=\"StyleSheet\" href=\"stileie6.css\" type=\"text/css\" />\n";
if (ereg("MSIE 7",$HTTP_USER_AGENT)) echo "<link rel=\"StyleSheet\" href=\"stileie7.css\" type=\"text/css\" />\n";
?>
(anzi ho già optato per questa soluzione), ma per tutti i tentativi che ho fatto non sono riuscito a capire come gestire la stessa visualizzazione su tutti i browser per il menu (che per comodità riporto di seguito l'esempio).
--HTML--
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it" dir="ltr">
[...]
<body>
<div id="container">
<div id="grafica"></div>
<div id="menu">
<ul>[*]<span>menu1</span>[*]<span>menu2</span>[*]<span>menu3</span>[*]<span>menu4</span>[/list]
</div>
[...]
</div>
</body>
--CSS base--
#menu { width:1000px; height: 32px; background: url(grafica/menu.gif) repeat-x; vertical-align: middle; text-align: left; padding: 0; margin: 0;}
#menu ul { margin: 0; margin-left: 126px; padding: 0; border: none; font-size: 0.9em;}
#menu ul li { display: inline; height: 32px; margin: 0; padding: 0; border: none;}
#menu ul li a { height: 32px; line-height:32px; display: inline; color: #f5f5f5; padding:8px 5px 8px; border: none; margin: 0 1px;}
#menu ul li a:hover { background: url(grafica/menuhover.gif) repeat-x; color: #444;}
#menu ul li a.here, #menu ul li a.here:hover { color: #006; background: url(grafica/menuhere.gif) repeat-x; font-style: italic}
#menu ul li.first { margin-right: 10px;}
#menu ul li.first a:hover { background: url(grafica/menuregistra.gif) repeat-x; color:#006;}
#menu ul li.last { margin-left: 90px;}
#menu ul li.last a:hover { background: url(grafica/menuregistra.gif) repeat-x; color:#006;}
#menu ul li.last2 a:hover { background: url(grafica/menuregistra.gif) repeat-x; color:#006;}
--CSS IE6--
@charset "iso-8859-1";
#menu ul li a { padding: 0px 5px;}
--CSS IE7-- (l'unico che si avvicina un po' al risultato finale)
@charset "iso-8859-1";
#container #menu ul li span { padding: 0px 0px 6px 0px; height: 32em; vertical-align: middle}
#container #menu ul li span a { padding: 1px 5px 22px 5px; margin: 5px 0px 0px 0px;;} */
#container #menu ul li.last span a{ margin-left: 90px; padding: 1px 5px 22px 5px;}
Spero di non aver esagerato...
Grazie a chi vorrà darmi dei chierimenti.
Andrea
Rispondi quotando
