Problema width tra ie7 chrome

**Games** · 07-02-2011, 17:42

Ciao a tutti,

ho un div container che è largo 967px che scorre dentro due immagini che si ripetono verticalmente larghe 19px.
Il problema è che su IE vedo il div container 2px più largo.

codice:

body,html,table,form
 {
  margin : 0;
  padding: 0;
 }

body
{
 font-family: arial,sans-serif;
 font-size: 76%;
}

div#left
 {
  background: url(sx.jpg) repeat-y left;
 }

div#right
 {
  background: url(dx.jpg) repeat-y right;
 }

div#container
{
 position:relative;
 width: 967px;
 margin: 0 19px 0 19px;
 border-style: solid;
 border-width: 1px;
}

div#header
 {
  font-size: 10px;
  color: #AF7BD7;
  font-weight: bold;
 }

div#navigation
{
 float:left;
 width: 200px;
 margin-top: 10px;
}

div#content
{
 margin-left:200px;
 padding: 1em;
}

div#footer
 {  
  clear: both;
 }

Index.html

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Butterfly Bjoux Beta 1.0</title>
<style>
 @import url(style.css);
</style>
</head>
<body>
 <div id="left">
 <div id="right">
 <div id="container">
  <div id="header">
  </div> 
  <div id="navigation">
  </div> 
   <div id="content">
    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


    a


   </div> 
  </div> 
  </div>  
  </div>  
</body>
</html>

Se elimino il doctype invece mi funziona correttamente.
Cosa può essere?

**NonCeLaFaccio+** · 07-02-2011, 17:58

Ciao,
i due pixel in più credo che siano quelli dei bordi, devo aver letto da qualche parte che la width è quella netta, cioè lo spazio effettivamente utilizzabile all'interno del div quindi se vuoi che la larghezza, compresi i bordi da 1px, sia di 967 devi indicare una width di 965.

**Games** · 07-02-2011, 18:10

Originariamente inviato da NonCeLaFaccio+
Ciao,
i due pixel in più credo che siano quelli dei bordi, devo aver letto da qualche parte che la width è quella netta, cioè lo spazio effettivamente utilizzabile all'interno del div quindi se vuoi che la larghezza, compresi i bordi da 1px, sia di 967 devi indicare una width di 965.

Ho provato a mettere 965px
Il problema è che così su IE7 lo vedo correttamente mentre su chrome lo vedo 2px più piccolo.

Se invece elimino il DOCTYPE lo vedo correttamente in tutti e 2 i browser.

**Games** · 07-02-2011, 18:15

Allego 2 immagini:

**NonCeLaFaccio+** · 07-02-2011, 18:47

Lo guarderò più tardi da casa dove ho anche chrome comunque il doctype ci vuole, su questo credo che sia poco da fare.

**Games** · 07-02-2011, 19:00

Originariamente inviato da NonCeLaFaccio+
Lo guarderò più tardi da casa dove ho anche chrome comunque il doctype ci vuole, su questo credo che sia poco da fare.

Ok grazie 1000.
In ogni caso stavo pensando di fare un css apposta per IE7, sicuramente così risolverei il mio problema.

**NonCeLaFaccio+** · 07-02-2011, 23:09

Ciao,
mi sembra che il problema si risolva aggiungendo una div a larghezza fissa che racchiuda tutte le altre, tanto la larghezza fissa è quella che cerchi, no? I 1005 li ho calcolati come 965+1+1+19+19

codice:

div#main
{
 margin: 0px auto;
 width: 1005px;
 background-color: yellow;
 }

....

div#container
{
 position:relative;
 width: 965px;
 margin: 0 19px 0 19px;
 border-style: solid;
 border-width: 1px;
}

....

<body>
 <div id="main">
 <div id="left">

.....

  </div>  
  </div>  
</body>

Senza questa div invece si finisce nei layout liquidi/elastici/fluidi sui quali non so dirti molto perché non ho mai approfondito ma grosso modo sono layout che si adattano alla finestra e quindi non assicurano risultati esattamente identici perché basta che, ad esempio, il bordo della finestra del browser abbia dimensioni diverse per cambiare il risultato.

margin: 0px auto; serve a centrare la div main nello schermo.

Vedi un po' se può andar bene, se no qui trovi una validissima guida:

http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

Ciao

**Games** · 07-02-2011, 23:11

Originariamente inviato da NonCeLaFaccio+
Ciao,
mi sembra che il problema si risolva aggiungendo una div a larghezza fissa che racchiuda tutte le altre, tanto la larghezza fissa è quella che cerchi, no? I 1005 li ho calcolati come 965+1+1+19+19

codice:

div#main
{
 margin: 0px auto;
 width: 1005px;
 background-color: yellow;
 }

....

div#container
{
 position:relative;
 width: 965px;
 margin: 0 19px 0 19px;
 border-style: solid;
 border-width: 1px;
}

....

<body>
 <div id="main">
 <div id="left">

.....

  </div>  
  </div>  
</body>

Senza questa div invece si finisce nei layout liquidi/elastici/fluidi sui quali non so dirti molto perché non ho mai approfondito ma grosso modo sono layout che si adattano alla finestra e quindi non assicurano risultati esattamente identici perché basta che, ad esempio, il bordo della finestra del browser abbia dimensioni diverse per cambiare il risultato.

margin: 0px auto; serve a centrare la div main nello schermo.

Vedi un po' se può andar bene, se no qui trovi una validissima guida:

http://css.html.it/guide/leggi/3/gui...iti-con-i-css/

Ciao

Thanks, faccio delle prove

Discussione: Problema width tra ie7 chrome

Strumenti discussione

Ricerca discussione

Visualizza

Problema width tra ie7 chrome

Permessi di invio