compatibilità dei bordi...

**trust** · 25-07-2006, 08:37

Ciao raga;

Ho un piccolo problema di compatibilità con bordi:

ES:

css:

codice:

<style type="text/css">
html,body{margin: 0;padding:0; background-color:#ffffff;font-family: arial,sans-serif;font-size: 12px; text-align: left;}

div#content{width:500px; height:auto; text-align:center}

div#marsup{width:500px; height:26px; position:relative; background-image:url(marginsup.gif)}

div#areatesto{position:relative; width:498px; height:360px; border-left:1px solid #0073E6; border-right:1px solid #0073E6}

div#marinf{width:500px; height:15px; position:relative; background-image:url(margininf.gif)}
</style>

html:

codice:

<body>
<div id="content">

  <div id="marsup"></div>

  <div id="areatesto">...testo...</div>

  <div id="marinf"></div>


</div>
</body>

In pratica i l'ampiezza "1px(sinistro) + 1px(destro)" dei bordi vengono calcolati esternamente o internamente a secondo del
browser utilizzato...

Esempio con "firefox" i bordi vengono calcolati internamente, mentre invece con "explorer" esternamente...

Esiste un modo per rendere compatibile queste misure con i vari browser?

Grazie mille

**Mich_** · 25-07-2006, 09:30

Se puoi evita di usare padding, e fai tutto con i margin.
Altrimenti puoi servire a IE un CSS di correzione solo per lui, mediante i commenti condizionali:

oppure:

**trust** · 25-07-2006, 10:09

Ho fatto così: "ma non cambia nulla"

codice:

<!--[if IE]>
<style type="text/css">
html,body{margin: 0;padding:0; background-color:#ffffff;font-family: verdana;font-size: 12px; text-align: left;}
div#content{width:500px; height:auto; text-align:center}
div#marsup{width:491px; height:20px; position:relative; background-image:url(marginsup.gif);text-align:right; padding-right:8px; padding-top:4px; font-size:11px; font-weight:bold;}
div#areatesto{position:relative; width:490px; height:360px; border-left:1px solid #0073E6; border-right:1px solid #0073E6;padding:4px;}
div#marinf{width:500px; height:15px; position:relative; background-image:url(margininf.gif)}
div#testo{text-align:left}
</style>
<![endif]-->




<style type="text/css">
html,body{margin: 0;padding:0; background-color:#ffffff;font-family: verdana;font-size: 12px; text-align: left;}
div#content{width:500px; height:auto; text-align:center}
div#marsup{width:500px; height:24px; position:relative; background-image:url(marginsup.gif);text-align:right; padding-right:8px; padding-top:4px; font-size:11px; font-weight:bold;}
div#areatesto{position:relative; width:492px; height:360px; border-left:1px solid #0073E6; border-right:1px solid #0073E6;padding:4px;}
div#marinf{width:500px; height:15px; position:relative; background-image:url(margininf.gif)}
div#testo{text-align:left}
</style>

Forse sbaglio qualcosa? :master:

Grazie mille

**Mich_** · 25-07-2006, 10:17

Forse hai invertito l'ordine.
Nel tuo caso il CSS standard sovrascrive quello per IE.

Tra l'altro nel CSS per IE non occorre che riscrivi tutto: bastano le cose che sono diverse.

**trust** · 25-07-2006, 10:33

Hai ragione tu!!!

Cmq ecco il corretto:

codice:

<style type="text/css">
html,body{margin: 0;padding:0; background-color:#ffffff;font-family: verdana;font-size: 12px; text-align: left;}
div#content{width:500px; height:auto; text-align:center}
div#marsup{width:491px; height:20px; position:relative; background-image:url(marginsup.gif);text-align:right; padding-right:8px; padding-top:4px; font-size:11px; font-weight:bold;}
div#areatesto{position:relative; width:489px; height:360px; border-left:1px solid #0073E6; border-right:1px solid #0073E6;padding:4px;}
div#marinf{width:500px; height:15px; position:relative; background-image:url(margininf.gif)}
div#testo{text-align:left}
</style>

<!--[if IE]>
<style type="text/css">
div#marsup{width:500px; height:24px; position:relative; background-image:url(marginsup.gif);text-align:right; padding-right:8px; padding-top:4px; font-size:11px; font-weight:bold;}
div#areatesto{position:relative; width:500px; height:360px; border-left:1px solid #0073E6; border-right:1px solid #0073E6;padding:4px;}
</style>
<![endif]-->

Grazie Mille Mich_

**Mich_** · 25-07-2006, 11:02

C'e` ancora troppa roba. Potrebbe bastare:

codice:

<!--[if IE]>
<style type="text/css">
div#marsup{
  width:500px;
  height:24px; 
}
div#areatesto{
  width:500px;
  height:360px;
}
</style>
<![endif]-->

Discussione: compatibilità dei bordi...

Strumenti discussione

Ricerca discussione

Visualizza

compatibilità dei bordi...

Permessi di invio