[css] width su IE (malefico!)

**Trinità76** · 28-06-2006, 10:18

Salve,
ho un problemino:

ho elaborato un foglio di stile fatto in questo modo:

codice:

body, table, div, td { font-size : 12px; font-family : Arial, Helvetica, sans-serif; font-weight : normal; color: #333; background : inherit; }
body { background : #EEE; margin : 0; padding : 0; text-align : center; }
#container { border : 0; width : 724px; padding : 0; margin-top : 0; margin-bottom : 0; margin-right : auto; margin-left : auto; color : inherit; background : inherit; }

div.boxmodel { padding-top : 3px; padding-bottom : 3px; }
div#menu-area { border-width : 4px; border-style : solid; border-color : #CFF; width : 662px; /*works only on mozilla like*/ height : 186px; color : inherit; background: #3CF url('img/top.jpg') no-repeat; /*float : left;*/ }
/*div#menu-area { border-width : 4px; border-style : solid; border-color : #CFF; width : 662px; voice-family : "\"}\""; voice-family :inherit; width : 654px; height : 186px; color : inherit; background: #3CF url('img/top.jpg') no-repeat; }*/

Nell'html poi ho:

codice:

<div id="container">
<div class="boxmodel">
<div id="menu-area">
</div>
</div>
</div>

In pratica ho un immagine 662x186 che si chiama top.jpg che andrebbe centrata nello schermo. La centratura avviene correttamente tramite body e #container.
Poi gli altri due div dovrebbero fare il resto. Su Mozilla/Firefox, tutto ok. Su IE6 la foto viene tagliata un po' prima dal bordo.
Ho provato con l'hack per IE5 (vedi commento) ma non cambia nulla... ho provato con float:left ma non cambia nulla... su Mozilla/Firefox sempre ok, su IE sempre male...
come posso fare?

**Trinità76** · 28-06-2006, 10:25

provate ad esempio con l'immagine in allegato (per comodità ho messo una png con del testo)

**Trinità76** · 28-06-2006, 12:14

Ecco il risultato nei due browser:
sopra Firefox, sotto IE.
Come si può vedere IE mi "mangia" qualche pixel dal lato destro. Inoltre mi sembra che tutto il box è leggermente spostato verso destra rispetto a Firefox... :master:

**Trinità76** · 28-06-2006, 12:52

trovato la soluzione qui
http://ask.metafilter.com/mefi/23320

**panta1978** · 28-06-2006, 13:03

Originariamente inviato da Trinità76
trovato la soluzione qui
http://ask.metafilter.com/mefi/23320

La soluzione che hai trovato è corretta (almeno credo). Tuttavia mi sembra più elegante (ed a prova di Internet Explorer 7 prossimo venturo) una soluzione basata sui commenti condizionali; se fai una ricerca su questo forum trovi svariati miriagrammi di informazioni.

**Trinità76** · 28-06-2006, 13:08

Originariamente inviato da panta1978
La soluzione che hai trovato è corretta (almeno credo). Tuttavia mi sembra più elegante (ed a prova di Internet Explorer 7 prossimo venturo) una soluzione basata sui commenti condizionali; se fai una ricerca su questo forum trovi svariati miriagrammi di informazioni.

Grazie per il reply innanzitutto.
Per commenti condizionali intendi qualcosa del genere?

codice:

<link rel="stylesheet" href="css.css" type="text/css" media="screen" >
<!--[if lte IE 6]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Non li conoscevo e non li avevo mai usati... però siccome il codice in questione andrà adoperato principalmente per un mailing di una newsletter, devo fare una cosa valida un po' per tutte le casistiche. So che è impossibile però in ogni caso devo usare necessariamente un codice unico.

**panta1978** · 28-06-2006, 13:48

Originariamente inviato da Trinità76
devo usare necessariamente un codice unico.

Puoi fare così?

codice:

<head>
<style type="text/css">
Codice CSS per tutti i browsers
</style>
<!--[if lte IE 6]>
<style type="text/css">
Codice CSS per Internet Explorer
</style>
<![endif]-->
....

In generale, fra l'inizio e la fine di un commento condizionale puoi scriverci qualunque cosa, al limite anche nel body, qualora questo avesse un senso.

Discussione: [css] width su IE (malefico!)

Strumenti discussione

Ricerca discussione

Visualizza

[css] width su IE (malefico!)

Permessi di invio