• D
    User Newbie •

    Problemi con IE

    Ciao a tutti, premetto che non sono un esperto di css e per questo spero che voi possiate aiutarmi. La pagina in questione è questa dove ho creato l'area gialla e il menu verde attraverso css. Poi ho utilizzato Mozilla NVU per creare delle celle a lato (nell'area gialla) e in alto e in basso (nell'area verde) dove ho inserito delle immagini .gif per creare il bordo. Come potete vedere viene visualizzato correttamente con Mozilla Firefox, ma non con Internet Explorer. Posso inserire tali immagini direttamente nel foglio di stile esterno oppure come posso eliminare lo spazio tra l'area e le immagini che si vedono con IE?
    Grazie anticipatamente.

    0
  • S
    User Attivo •

    non capisco quale sia il problema di IE, io la vedo normale, mi sembra a posto.
    cosa c'è che non voui con IE?

    0
  • D
    User Newbie •

    Io vedo che nel menù i bordi superiori e inferiori sono staccati rispetto all'area verde. E lo stesso vale per l'area gialla. I due bordi laterali sono distanziati.

    0
  • hogudo
    Super User •

    Sì, con IE7 lo vedo anche io.
    Per prima cosa devi lavorare coi bordi (cellspacing e cellpadding), visto che html4 e tabelle lo permettono (non è il massimo ma....) se così non funzia vai sul css e controlla i padding e i margin

    PS: nel css hai intenzionalmente scritto
    html, body {
    margin: 0;
    padding: 0;
    }

    oppure intendevi

    • {
      margin: 0;
      padding: 0;
      }

    Ciao

    0
  • D
    User Newbie •

    Grazie sono riuscito a risolvere il problema con il cellspacing tranne per il bordo inferiore del menù. La sintassi è nell'allegato. La grafica nel css non l'ho fatta io e non sono esperto. Qual'è la differenza? Potresti anche spiegarmi come centrare la grafica in IE, per farla diventare come viene visualizzata in Firefox?

    0
  • hogudo
    Super User •

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

    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

    0
  • D
    User Newbie •

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

    0
  • hogudo
    Super User •

    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:

    0
  • D
    User Newbie •

    Ti ho inviato un messaggio privato.

    0
  • hogudo
    Super User •

    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 🙂

    0
  • D
    User Newbie •

    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;
}
    0
  • hogudo
    Super User •

    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

    0
  • hogudo
    Super User •

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

    0
  • D
    User Newbie •

    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.

    0
  • hogudo
    Super User •

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

    0
  • D
    User Newbie •

    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?

    0
Effettua l'accesso per rispondere