Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Problema crossbrowser con margini

    Ciao a tutti,

    sto creando un sito in cui sto riscontrando le classiche problematiche
    legate ai margini che in IE8 e FF si vedono bene ma in IE7 vanno un
    pò per conto loro.
    Volevo sapere se c'e' un modo per diversificare i settaggi, cioè fare in
    modo che quando si carica la pagina con IE7, si usano alcuni valori di
    margini, quando si usa FF si usano gli standard.
    Ricordo di aver letto da qualche parte che si può ovviare aggiungendo
    dei commenti che vengono interpretati solo da IE7 o 6.
    Mi sapreste dare delle dritte o delle guide a riguado?
    Il sito è ancora offline per cui non vi poso dare alcun link.
    Grazie in anticipo.

  2. #2
    bisognerebbe dare un occhiata al codice... postaci il CSS!

  3. #3
    La struttura del sito è semplice ed è composta da 4 div principali ma il prb lo ho con i primi tre.
    Nello specifico c'e':

    div.menu
    div.bannercentrale
    div.centrale (che contiene)
    [div.right (banner dx)
    div.left (banner sx)
    div.centro (contenuti)]

    Il problema è la spaziatura orizzontale tra i 3, infatti nel css che allego vedrete che ho cercato di aggiustare la visualizzazione usando i margin-top che hanno però comportamenti differenti a seconda dei browser.
    Così come sono impostati adesso vanno bene per IE ma se vedo i div in FF risultano separati.

    #Bannercentrale {
    width: 935px;
    height:28px;
    margin: 0 auto; /* Centra il div */
    text-align: center;
    }


    #Menu {
    width: 935px;
    height:228px;
    margin: 0 auto;
    text-align: center;
    background-image:url(Immagini/TestataHome.jpg)
    }

    #centrale {
    width: 935px;
    height:auto;
    margin: 0 auto;
    margin-top:5px; /*Evita che il menu vada sul div centrale Prb solo con IE7*/
    }

    #right {
    float:right;
    width:190px;
    margin-top:6px;
    height: 495px;
    }

    #left {
    background: url(Immagini/SfondoMenuSX.jpg) no-repeat;
    float:left;
    width:189px;
    margin:6px 0 0 0;
    height: 495px;
    }

    #centro {
    margin: 0 190px 0 189px;
    /*padding: 10px 20px;*/
    height:auto;
    }

    Spero che possa servire a risolvere perchè è brutto che l'aspetto del sito dipenda dal browser.

  4. #4
    Ho risolto usando i commenti condizionali ovvero nella HEAD
    del html ho inserito il seguente commento:

    <!--[if lte IE 7]>
    <link rel="stylesheet" href="NomeFile.css" type="text/css" />
    <![endif]-->

    Dove in nomefile.css faccio caricare un css con i margini
    definiti per IE.
    Sembra che vada bene.
    Secondo voi è la soluzione più corretta?

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 © 2025 vBulletin Solutions, Inc. All rights reserved.