Problemi vari con Explorer

[domi84]

Mi spiace per il titolo generico, ma non sapevo come chiamarlo.
Sto creando un sito per un amico e sto usando tutti programmi Opensource. Per quanto riguarda il Css uso CaScadeS di Kompozer. Ora sto testando il sito con i vari blowser: Firefox, Opera, Chrome, Safari...e ovviamente quello che mi da problemi è IE7 (che non posso ignorare)
Il sito è questo:

http://www.ristoranteblueangel.com/index_ita.html

Sono riuscito a centrare il sito leggendo qualche discussione sul forum. Però ho altri problemi:
1) perchè non si vede lo sfondo?
2) perchè i bottoni del menu risultano tagliati, e non distanziati correttamente?

Riporto i file CSS:
pagina

/* Generated by KompoZer */
html, body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}
#header {
  background-repeat: no-repeat;
  background-color: white;
  background-position: left top;
  height: 272px;
  background-image: url(File/Blue_Angel_up.jpg);
}
#sito {
  margin: 0 auto;
  width: 800px;
  text-align: left;
}
#colonna_sx {
  margin: 0px;
  padding: 0px;
  display: inline;
  float: left;
  background-color: transparent;
  width: 195px;
}
#colonna_dx {
  margin: 0px 5px 0px 0px;
  padding: 50px 0px 0px 50px;
  float: right;
  display: inline;
  background-color: transparent;
  width: 550px;
  font-size: 1.1em;
  line-height: 1.5em;
  font-family: urw chancery l,arial;
}
#colonne {
  margin: 0px;
  padding: 0px;
  overflow: auto;
  background-position: left top;
  background-color: white;
  background-repeat: repeat-y;
  background-image: url(File/sfondo.jpg);
}

e menu:

/* Generated by KompoZer */
#navigation {
  margin: 0px;
  padding: 0px;
  font-variant: normal;
  font-size-adjust: none;
  list-style-type: none;
}
#navigation ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navigation li {
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
}
#navigation li a {
  margin: 0px 0px 0px 20px;
  padding: 6px 0px 0px 28px;
  text-decoration: none;
  color: black;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(File/butt_spe.png);
  display: block;
  height: 38px;
  width: 145px;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
  margin: 0px;
  padding: 6px 0px 0px 28px;
  background-repeat: no-repeat;
  background-image: url(File/butt_att.png);
  background-position: left top;
  display: block;
}

[domi84]

Ho risolto il problema dei bottoni dei menu tagliati, allego in nuovo file css:

/* Generated by KompoZer */
#navigation {
  margin: 0px;
  padding: 0px;
  font-variant: normal;
  font-size-adjust: none;
  list-style-type: none;
}
#navigation ul {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}
#navigation li {
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  font-family: commercialscript bt,URW Chancery L,Beriliem,Arial;
}
#navigation li a {
  margin: 0px 0px 0px 20px;
  padding: 6px 0px 0px 28px;
  text-decoration: none;
  color: black;
  background-repeat: no-repeat;
  background-position: left top;
  background-image: url(File/butt_spe.png);
  display: block;
  height: 38px;
  width: 145px;
}
#navigation li a:hover, #navigation li a:focus, #navigation li a:active {
  margin: 0px;
  padding: 6px 0px 0px 28px;
  background-repeat: no-repeat;
  background-image: url(File/butt_att.png);
  background-position: left top;
  display: block;
}

Non ho risolto il problema dello sfondo. Sembra che il problema sia in questa serie di contenitori:

<div id="colonne">
<div id="colonna_sx">
<div style="text-align: left;" id="navigation">
<ul>[*]<big>Home</big>[*]<big>Menu</big>[*]<big>Menu Turistici</big>[*]<big>Eventi</big>[*]<big>Feste</big>[*]<big>Foto</big>[*]<a href="contatti.html"><big>Info<span
 style="font-style: italic;">&amp;</span>Contatti</big></a>[/list]
</div>
</div>
<div id="colonna_dx">Il
Ristorante Pizzeria
Blue Angel è situato a Pompei, ed è possibile degustare un vasto
assortimento di specialità gastronomiche locali, ma anche la vera pizza
napoletana, ai gusti più svariati, nonchè degli ottimi vini locali e
internazionali.
</div>
</div>

Cioè:

contenitore colonne
                  ---> Colonna dx
                  ---> Colonna sx

Io ho applicato lo sfondo al contenitore colonne...che non viene visualizzato.
Forse non è il modo correto di operare?

[digital00]

Mm quando IE ragiona così non resta che provare e agire sulle piccole cose. Io ovviamente su ie non ho firebug quindi è un casino aiutarti.
Così alla cieca mi verrebbe da dirti: dai una width specifica a #colonne, ricordandoti che la larghezza dev'essere maggiore della somma delle larghezze e dei margini orizzontali delle due colonne interne..
Se non funziona questo proviamo qualcos'altro..

[domi84]

Grazie!
Ho aggirato il problema tagliando lo sfondo in 2, e applicandone uno alla colonna sx e uno alla dx. Ora provo a vedere se si "sformatta" (ma come si dice? ) con i vari browser e sistemi operativi...

[domi84]

Maledetto explorer!!!
Niente da fare...è spuntato un altro problema...ora si vede una striscia bianca fra la colonna di sinistra e quella di destra...
Ma perchèèè???

[domi84]

Sono riuscito a risolvere.
Era un problema di margini. Pare che gli altri browser trattino la lunghezza della pagina come somma dei margini + larghezza pagina...IE no...! Ho eliminato i margini e aggiunto un nuovo contenitore per il testo.
grazie lo stesso a tutti!!!
CIAO!!!

[lila89]

scusate l'OT... comunque per IE c'è IE developer toolbar che è l'equivalente di firebug in FF...

[Pacchio]

scusa domi84, ma come hai fatto quindi a fare in modo che l'immagine di background del DIV si veda??
Io ho lo stesso problema: con mozilla va, ma con explorer no.. ho provato anche a spezzarla in due colonne, ma niente ):
forse perchè è grande, bo, cmq ho visto anche quella sul tuo sito, che fa da sfondo alla colonna per la navigazione, ed è abbastanza grande, come anche l'header ._.

Grazie per l'aiuto

ciaps

[domi84]

Questi sono l'html e il css che sto usando in questo momento...

<link rel="stylesheet" type="text/css" href="frame.css">
<link title="menu" media="all" rel="stylesheet" href="menu.css" type="text/css">
</head>
<body>
<div id="sito">
<div id="header">

</div>

<div id="centrale">
<div style="text-align: left;" id="navigation">
</div>

<div id="testo">

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

</body></html>

/* Generated by KompoZer */
html, body {
  margin: 0px;
  padding: 0px;
  text-align: center;
  background-color: #f9f9f9;
}
#header {
  margin: 0px;
  padding: 0px;
  background-repeat: no-repeat;
  background-color: white;
  background-position: left top;
  width: 800px;
  height: 274px;
  background-image: url(File/Blue_Angel_up.jpg);
}
#sito {
  margin: 2pt auto 0;
  text-align: left;
  width: 800px;
}
#testo {
  margin: 0px 0px 0px 200px;
  padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  overflow: auto;
  font-family: urw chancery l,sylfaen,microsoft sans serif,commercialscript bt,arial;
  width: 577px;
  font-size: 1.1em;
}
#centrale {
  margin: 0px;
  padding: 0px;
  background-color: white;
  background-repeat: repeat-y;
  height: 800px;
  background-image: url(File/sfondo.jpg);
}

Praticamente non ho fatto più la divisione in pseudoframe ma solo una intestazione e un corpo....