Pagina 1 di 6 1 2 3 ... ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 51

Discussione: Layout a 3col. con sfondo. Spazio tra col con IE no con FF

  1. #1

    Layout a 3col. con sfondo. Spazio tra col con IE no con FF

    Salve ragazzi,

    ho un layout a 3 colonne, per ciascuna ho attribuito un'immagine di sfondo. (background-image: url(img/nome.gif))
    Mentre in FF 1.0.4 le tre immagini combaciano perfettamente, con IE6.0SP1 esiste uno spazio di 2px tra le due colonne laterali e quella centrale.

    Non riesco ad eliminarlo con IE e anche se riuscissi a farlo, si comprimerebbe quello di FF

    Eppure non ho utilizzato, margin o padding.
    Come posso fare per risolvere il problema con IE ?

    Eccovi


    il CSS


    body {
    font-family: Verdana,sans-serif;
    font-size: 10px;
    background: White;
    color: #7E4317;
    }

    #container {
    width: 772px;
    \width: 792px;
    w\idth: 772px;
    border: 1px solid #ff9900;
    margin-left: auto;
    margin-right: auto;
    }

    #header {
    padding: 1px 0px 1px 0px;
    background-color: rgb(213, 219, 225);
    height: 102px;
    }
    #content {
    height: 654px;
    margin-left: 213px;
    margin-right: 123px;
    background-image: url(img/content.gif);
    }

    #sidebar_left {
    height: 654px;
    float: left;
    width: 213px;
    \width:223px;
    w\idth:213px;
    background-image: url(img/sb_left.gif);

    }

    #sidebar_right {
    height: 654px;
    float: right;
    width: 123px;
    \width:133px;
    w\idth:123px;
    background-image: url(img/sb_right.gif);
    }

    #footer {
    clear: both;
    }


    l'Html


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>
    <meta name="generator" content="http://www.inknoise.com/experimental/layoutomatic.php" />
    <LINK href="3c2pag.css" rel="stylesheet" type="text/css">
    </head>

    <body>



    <div id="container">


    <DIV id="header">Header</DIV>



    <div id="sidebar_left">sidebar_left</div>



    <div id="sidebar_right">sidebar_right</div>



    <div id="content">content</div>


    <div id=footer>footer</id>
    </div>


    </body>
    </html>

  2. #2
    Eccolo online il problema:
    http://www.bisceglieweb.it/bari/prova_css/3c2pag.htm

    sidebar_left e sidebar_right sono le due colonne laterali
    content quella centrale. (li ho riportati anche con l'indicazione testuale direttamente sulla pagina)
    Per semplicitā, ho sostituito le immagini con dei colori diversi di sfondo per le 3 colonne.

    Guardate al centro tra il content e la sidebar_left a sx e tra il content e la sidebar_right, con IE vedrete lo spazio bianco che invece con FF non c'č.

  3. #3
    l'ho visto cin ie6 e non ho visto spazi bianchi
    ciaoz

  4. #4
    Confermo, nessuno spazio bianco.

  5. #5
    Provate a rivederlo adesso, il problema rimane.

    Vi chiedo scusa per un attimo ho sostituito http://www.bisceglieweb.it/bari/prova_css/3c2pag.htm

    con

    http://www.bisceglieweb.it/bari/prov...pia_3c2pag.htm

    Il problema visibile in 3c2pag.htm rimane comunque anche in Copia_3c2pag.htm, pagina di prova in cui ho provato nel content a sostituire

    margin-left: 213px;
    margin-right: 123px;

    con

    width:436px;

    e aggiungendo
    float: left;

    Ma non ho risolto nulla perchč con IE6.0 vi accorgerete che nel footer oltre alla scritta "footer" cėō anche quella "content" (giā presente nel content e chissā perchč duplicata)

    Se tolgo dall'HTML la scritta content che si trova tra
    <div id="content">content</div> , la parte centrale finisce tutta sotto

  6. #6

  7. #7
    Utente di HTML.it L'avatar di antos
    Registrato dal
    Feb 2001
    Messaggi
    3,582
    hai chiesto il mio aiuto ed eccomi qui
    ci sono 2 errori nella scrittura del codice e questo ti causa la differente visualizzazione su ie e firefox :
    errore numero 1)
    visto che hai usato come doctype quello xhtml allora devi scrivere:
    <link href="3c2pag.css" rel="stylesheet" type="text/css" / >

    errore numero 2)
    <div id=footer>footer</div>
    al posto di
    <div id=footer>footer</id>

    tutto qui

  8. #8
    Grazie Antos, gentilissimo e disponibilissimo come sempre.

    ma anche con le correzioni che mi hai indicato
    su http://www.bisceglieweb.it/bari/prova_css/3c2pag.htm

    i benedetti spazi tra colonna centrale e laterali in IE6.0 sono rimasti

  9. #9
    Utente di HTML.it L'avatar di antos
    Registrato dal
    Feb 2001
    Messaggi
    3,582
    Originariamente inviato da pcf
    Grazie Antos, gentilissimo e disponibilissimo come sempre.

    ma anche con le correzioni che mi hai indicato
    su http://www.bisceglieweb.it/bari/prova_css/3c2pag.htm

    i benedetti spazi tra colonna centrale e laterali in IE6.0 sono rimasti
    allora gli spazi io non li vedo con IE6 perō ho il problema della scritta content sopra al footer
    ho risolto apportando le seguenti modifiche:
    1)
    codice:
    #sidebar_right {
    		height: 654px;
    		float: left;
    ....
    }
    e nel codice HTML
    codice:
            <div id="sidebar_left">sidebar_left</div>
            <div id="content">content</div>                                   
    	<div id="sidebar_right">sidebar_right</div>
    testato su ie6,firefox 1.0.4 e Opera 8.0 funge perfettamente

  10. #10
    Ho apportato tutte le modifiche che mi hai detto eppure
    la barra laterale adesso č scesa a sinistra e lo spazio tra colonna centrale e quella di sinistra č rimasto....

    Eccoti lo screenshot
    http://www.bisceglieweb.it/bari/prov...left_scesa.gif

    :master:

    Ma hai visto http://www.bisceglieweb.it/bari/prova_css/3c2pag.htm e non http://www.bisceglieweb.it/bari/prov...pia_3c2pag.htm ?

    Anche se ho apportato le stesse correzioni, comunque anche Copia_3c2pag.htm non mi funzia, almeno a me

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2017 vBulletin Solutions, Inc. All rights reserved.