Problemi con IE

hogudo

Io il tuo sito lo vedo con IE6 sempre uguale a prima

Inoltre, per farti capire, con l'avvento di evoluzioni di html, il w3c ha deciso che fosse il caso, per avere contenuto più pulito, di dividere la struttura (codice html) dal layout (css). Sotto questa ottica quindi, la conoscenza di css ti è necessaria per capire come risolvere questo e futuri problemi al tuo layout.

Qui trovi l'ultima raccomandazione tradotta in italiano
http://www.diodati.org/w3c/css2/cover.html

Qui qualcosa di interessante
http://www.constile.org/

Ciao

djovvio

Non potresti darmi solo un suggerimento su come risolvere il problema? Grazie e scusa ancora.

hogudo

No, non devi scusarti

Purtroppo mi sembra che per come è stata impostata, la cosa sia risolvibile dai css con i suggerimenti che ti avevo dato sopra, ovvero sul lavoro e sulle prove, coi margini e gli spazi

Prova al limite a postare il codice intero e tutto il css :bho:

djovvio

Ti ho inviato un messaggio privato.

hogudo

Ciao, come detto in privato, se non puoi postare il codice, ti consiglio o di reperire il consenso dell'autore e postarlo oppure richiedere, come hanno fatto alcuni tuoi colleghi, lo spostamento in annunci.

Ciao
Massi

djovvio

Ecco il codice html:

[html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css"
href="css/stile.css">
<title>Prova</title>
</head>
<body>
<div id="container">
<div id="header">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 20%;"><img
src="images/home.png"></td>
<td style="width: 80%;"><br>
</td>
<td style="width: 20%;"><br>
</td>
</tr>
</tbody>
</table>
</div>
<div id="menu">
<table class="rounded_box">
<tbody>
<tr>
<td><img src="images/menu_top.png"></td>
</tr>
<tr>
<td class="center">
<table id="menu_table">
<tbody>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
<tr>
<td>Prova</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
<tr>
<td><img src="images/menu_bottom.png"></td>
</tr>
</tbody>
</table>
</div>
<div id="content">
<table class="strange_box">
<tbody>
<tr>
<td> <img src="images/text_left.png">
</td>
<td class="main_column">Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Nunc rhoncus, eros nec dictum adipiscing,
mauris orci ornare pede, a dictum neque lacus sed ligula. Pellentesque
mollis arcu quis lorem. Sed vitae quam et mauris euismod aliquam.
Pellentesque quis nisl a ante iaculis volutpat. </td>
<td> <img src="images/text_right.png">
</td>
</tr>
</tbody>
</table>
</div>
<div id="footer">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Nunc rhoncus, eros nec dictum adipiscing, mauris orci
ornare pede, a dictum neque lacus sed ligula. </div>
</div>
</body>
</html>
[/html]
e qui il codice css

@CHARSET "UTF-8";

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

body, td, th, input { /* redundant rules for bad browsers  */
        font-family: verdana, sans-serif;
        font-size: 76%;
        voice-family: "\"}\"";
        voice-family: inherit;
        font-size: small;
}

body {
    background-color: #75BF21;
    background-image: url('../images/background_full.png');
    background-repeat: repeat-x;
}

div#container {
    margin: 2em auto;
    width: 760px;
}

div#header {
    width: 100%;
    text-align: center;
}

div#menu {
    float: right;
    width: 12em;
}

table#menu_table {
    text-align: center;
}

div#menu ul {
    margin: 0;
    padding: 10px;
    list-style-position: outside;
    list-style-type: none;
}

div#content {
    padding: 0;
    margin-right: 13em;
}

table.strange_box {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

table.strange_box td {
    margin: 0;
    padding: 0;
}

table.strange_box td.main_column {
    vertical-align: top;
    padding: 1em;
    border-top: 2px solid #FFFF00;
    border-bottom: 2px solid;
    background-color: #ffffa6;
}

table.rounded_box {
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

table.rounded_box td {
    margin: 0;
    padding: 0;
}

table.rounded_box td.top {
    border-top: 1px solid #107a38;
    background-color: #d0ff98;
    font-size: 5px;
}

table.rounded_box td.left {
    border-left: 1px solid;
    background-color:;
}

table.rounded_box td.right {
    border-right: 1px solid;
    background-color:;
}

table.rounded_box td.bottom {
    border-bottom: 1px solid;
    background-color:;
    font-size: 5px;
}

table.rounded_box td.center {
    border-left: 1px solid;
    border-right: 1px solid;
    background-color:;
}

div#footer {
    margin-right: 13em;
    margin-top: 0.5em;
    padding-top: 0.5em;
    color:;
    text-align: center;
    font-size: 76%;
    float: clear;
}

img {
    border: 0;
}

a {
    border: 0;
}

hogudo

Innanzi tutto ti ringrazio per il caso di studio.
Me la sono cercata e l'ho portata avanti come un paleowebdesigner.

Usare css copiati da altre parti è male.
Annidare troppe tabelle è male.
Non fare come dice hogudo di sopra di mettere in tutti i table cellspacing e cellpadding a 0 è male
Non fare il conteggio dei <tr> alla fine prima dell'immagine bassa che vedi spostata è male

Se rispetti tutti e 4 i punti sarai molto felice in futuro
Se invece rispetti gli ultimi 2 e togli tutti gli spazi che non servono il tuo "sito" si vedrà bene anche con IE

Ciao

hogudo

Ah, l'ho testato sia con IE 6 che 7

djovvio

Ok grazie ora aggiungo i cellspacing e cellpadding... lo devo aggiungere su tutte le table che ho creato? Cosa intendi per conteggio dei <tr>? Dei primi due punti non ho colpa perchè la grafica mi è stata affibiata così come la vedi.

Grazie, da ora in poi seguirò il decalogo hogudo.

hogudo

Cosa intendi per conteggio dei <tr>
Che hai messo un tr in più prima dell'immagine bassa

djovvio

Perfetto ora funziona tutto! Un'ultima cosa poi ti lascio in pace: come posso centrare l'area gialla e il menu come si vede con firefox?