Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 13
  1. #1
    Utente bannato
    Registrato dal
    Feb 2004
    Messaggi
    2,803

    cross browser margin problem

    il menu dovrebbe posizionarsi quasi al margine basso dell'head(come da commento)
    in IE lo vede bene...in FF il margine 143px sembra che lo prenda da fuori l'head (dove invece si trova) spostando tutta la struttura


    codice:
    body {
    	margin:0px;
    	background:url(back.gif) repeat-x left 30px ;
    }
    
    .main{
    margin:0 auto;
    width:762px;
    height:100%;
    background:url(main.gif) repeat-y;
    }
    .head{
    margin-top:20px;
    background:#CC6600;
    height:192px;}
    .menu{
    margin:143px 0 0 11px; /*margine alto per abbassare il menu*/
    }
    .menu li {
    	float:left;
    	list-style-type: none;
    	width:70px;
    }
    .menu ul {
    margin:0px;
    padding:0px;
    }
    .menu a:link, .menu a:visited{
    	text-decoration:none;
    	display:block;
    	color: #000000;
    	margin-top:3px;
    	background:#00224c;
    	height:35px;
    }
    .menu a:hover{
    margin-top:0px;
    height:38px;

    codice:
    <body>
    <div class="main">
      <div class="head">
      		<div class="menu">
                <ul>
              		[*]aaaaa
      				[*]bbbbb
      			[/list]
            </div>
       </div>
    </div>
    </body>

  2. #2
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    prova dare padding:1px; a ".head"

  3. #3
    Utente bannato
    Registrato dal
    Feb 2004
    Messaggi
    2,803
    Originariamente inviato da gengix
    prova dare padding:1px; a ".head"
    funziona..ma xke?? :master:



    giusto un'altra cosa:
    head (che si trova in main) ha margin-top:20px.. ma in questi 20px lo sfondo di main non si vede
    ho l'impressione di non aver azzerato qualche margine o padding predefinito di FF...tu noti niente nel css?

  4. #4
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    In apparenza non vedo niente di anomalo. Dovrei riscrivere la struttura per saperti dire di più.
    Per ora accontentati di dichiarare 1px di padding anche a .main.
    Un consiglio ti posso dare, che ripeto sempre in questi casi.
    Dichiara all'inizio del codice il selettore universale azzerando i margini e i padding così:
    codice:
    *{
    margin:0;
    padding:0;
    }
    Questo sarebbe meglio farlo per prima cosa quando inizi il css, così azzeri tutti i margini e i padding nei diversi browser, perchè diversamente per queste proprietà fanno quello che vogliono.

  5. #5
    Utente bannato
    Registrato dal
    Feb 2004
    Messaggi
    2,803
    Originariamente inviato da gengix
    In apparenza non vedo niente di anomalo. Dovrei riscrivere la struttura per saperti dire di più.
    Per ora accontentati di dichiarare 1px di padding anche a .main.
    Un consiglio ti posso dare, che ripeto sempre in questi casi.
    Dichiara all'inizio del codice il selettore universale azzerando i margini e i padding così:
    di solito per azzerare tutto metto a 0 padding e margin di body

    per l'altro problema..mi spieghi cos'è sta storia dei padding a 1?
    una specie di hack di cui è a conoscenza tutto l'universo tranne me?


    edit: padding:1 a main mi scombussola l'allineamento con lo sfondo del body..ho provato a fare padding-top:1..la situazione è un pò migliorata ma non ci siamo ancora

  6. #6
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    per l'altro problema..mi spieghi cos'è sta storia dei padding a 1?
    In genere mi aggiorno spesso sui bug e probabilmente questo lo è.
    L'ho risolto per caso da solo (probabilmente era già stato risolto da millenni=) ).

    Un giorno ho notato che mi dava questo problema, in genere imposto sempre un bordo agli elementi quando sono in fase di creazione del codice, questo per vedere la loro posizione. Ho notato che in situazioni simili alla tua, levando il bordo all'elemento "incriminato" quest'ultimo portava giù anche l'elemento genitore. Rimettendo il bordo tornava a posto. Solo in firefox.
    Siccome il bordo è scomodo visivamente, per rimpiazzarlo ho utilizzato il padding. Logicamente non so spiegarti questo comportamento, molti bug non hanno logica.

    Non ricordo di averlo letto, ma è molto probabile che mi sia sfuggito =).

  7. #7
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    di solito per azzerare tutto metto a 0 padding e margin di body
    Questo cmq a volte non basta. Il selettore universala invece in alcune situazioni è molto efficace.

  8. #8
    Utente bannato
    Registrato dal
    Feb 2004
    Messaggi
    2,803
    Originariamente inviato da gengix
    Questo cmq a volte non basta. Il selettore universala invece in alcune situazioni è molto efficace.
    ti ho inviato una mail

  9. #9
    Utente di HTML.it
    Registrato dal
    Feb 2008
    Messaggi
    663
    Il tuo codice mi sembra a posto, se dichiari il selettore universale puoi evitare di dichiarare margin:0 e padding:0 nel body. Per il resto ho visto che non ci sono problemi neanche su IE6.
    Dichiara anche text-align:center nel body per centrare il layout in IE precedenti al 6 e poi ci siamo.

  10. #10
    Utente bannato
    Registrato dal
    Feb 2004
    Messaggi
    2,803
    Originariamente inviato da gengix
    Il tuo codice mi sembra a posto, se dichiari il selettore universale puoi evitare di dichiarare margin:0 e padding:0 nel body. Per il resto ho visto che non ci sono problemi neanche su IE6.
    Dichiara anche text-align:center nel body per centrare il layout in IE precedenti al 6 e poi ci siamo.
    non hai notato che in FF lo sfondo del body (fascia arancio) non è allineata con l'head?

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