Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 22
  1. #1
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239

    problema padding e firefox

    ciao a tutti sto cercando di realizzare un layout a tre colonne fluido utilizzando em .

    il problema è che non riesco ad impostare correttamente il padding sulle colonne ...

    questo è il css:
    ------------------------------
    html,body{margin: 0;padding:0}
    body{font-family: arial,sans-serif;font-size: 90%}

    div#header{padding:1em;}
    div#nav{float:left; width:12em; background-color:silver;}
    div#content{margin-right: 12em;margin-left:12em;padding: 1em; background-color:yellow;}
    div#footer{clear:right; text-align:center; padding: 0.5em; background-color:gray;clear:both}
    div#extra{float:right; width:12em; background-color:silver;}
    -------------------------------


    se metto 1em di padding su nav o extra (le due colonne)
    su firefox quando stringo la pagina anche di poco le colonne si sovrappongono al content centrale mentre con Internet Explorer no !

    non è normale vero ?

    qualcuno sa dirmi dove sbaglio ?

    ciao e grazie

  2. #2

    Re: problema padding e firefox

    Originariamente inviato da sandu

    codice:
    ------------------------------
    html,body{margin: 0;padding:0}
    body{font-family: arial,sans-serif;font-size: 90%}
    
    div#header{padding:1em;}
    div#nav{float:left; width:12em; background-color:silver;}
    div#content{margin-right: 12em;margin-left:12em;padding: 1em; background-color:yellow;}
    div#footer{clear:right; text-align:center; padding: 0.5em; background-color:gray;clear:both}
    div#extra{float:right; width:12em; background-color:silver;}
    -------------------------------
    se metto 1em di padding su nav o extra (le due colonne)
    su firefox quando stringo la pagina anche di poco le colonne si sovrappongono al content centrale mentre con Internet Explorer no !

    non è normale vero ?

    qualcuno sa dirmi dove sbaglio ?

    ciao e grazie
    Ciao,

    intanto ti consiglio di usare il codice [ CODE ] per rendere più visibile il codice.

    Secondo me il problema sta nell'errato comportamento di IE nel gestire il padding (è un grande classico).

    In sostanza:

    _ in IE width rappresenta la larghezza del testo.
    _ con gli altri browser width rappresenta la larghezza del blocco (compresi quindi margin, border e padding).

    Quindi in questi casi occorre dare in pasto ad Explorer un CSS ad hoc. Il modo migliore secondo me è quello di usare i Commenti condizionali (fai una ricerca sul forum CSS).

  3. #3
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239
    ... il problema non è con IE (dove la cosa funziona) ma su Firefox !

  4. #4
    Originariamente inviato da sandu
    ... il problema non è con IE (dove la cosa funziona) ma su Firefox !
    Il problema è su Firefox perché tu hai scritto un codice ad hoc per IE.

    Prova ad immaginare la caratteristica width come dimensione testo+bordo+margin+padding e vedrai che si visualizzerà bene su FF e [probabilmente] male su IE. A quel punto dovrai utilizzare un commento condizionale per far rigare dritto IE.

  5. #5
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239
    scusami ma non ti capisco ... cosa dovrei modificare ?
    vorrei assolutamente rispettare gli standard ...

  6. #6
    Originariamente inviato da sandu
    scusami ma non ti capisco ... cosa dovrei modificare ?
    vorrei assolutamente rispettare gli standard ...
    Posta anche il codice html.

  7. #7
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239
    eccolo :

    codice:
    <?xml version="1.0" encoding="UTF-8"?>
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    	<title>
    	Sito 
    	</title>
    	<link rel="stylesheet" type="text/css" href="prova.css" >
    </head>
    
    <body>
    <div id="container">
    	<div id="header">	
    	
    
    	500s, when an unknown printer took a galley of type and scrambled 
    	it to make a type specimen book. It has survived not only five centuries, 
    	but also the leap into electronic typesetting, remaining essentially unchanged.
    	It was popularised ndfj dklfkldlfg aòp aò klj spja aòjfògjòaljfgò
    	
    	
    	</div>	
    	
    	<div id="nav">
    	<ul>
    		[*]primo
    		[*]secondo		
    		[*]terzo
    		[*]quarto
    		[*]quinto
    		[*]sesto		
    		[/list]
    		
    
    
    		sdkfjg dkfj kjkj  aosjo' eker psk 0ur ula spur9up o uf
    		+kjkdf ofo p gpu' r opr+fojw f 
    		</p>	
    	
    
    	</div>
    	<div id="extra">
    		e leap into electronic typesetting, remaining essentially unchanged.
    		It was popularised in the 1960s with the release of L0s, wh
    		en an unknown printer took a ga
    	<?php
    	include("path.php");
    	?>
    </div>
    	<div id="content">
    	
    
    	500s, when an unknown printer took a galley of type and scrambled 
    		it to make a type specimen book. It has survived not only five centuries, 
    		but also the leap into electronic typesetting, remaining essentially unchanged.
    		It was popularised in the 1960s with the release of L0s, wh
    		en an unknown printer took a galley of type and scrambled 
    		it to make a type specimen book. It has survived not only five centuries, 
    		but also the leap 
    		 printer took a galley of type and scrambled 
    		it to make a type specimen book. It has survived not only five centuries, 
    		but also the leap 
    	
    	
    	</div>
    	<div id="footer">
       
    
    	500s, when an unknown printer took a galley of type and scrambled 
    		it to make a type specimen book. It has survived not only five centuries, 
    		but also the leap into electronic typesetting, remaining essentially unchanged.
    		It was popularised in the 1960s with the release of L
    	
    	
    	</div>
    </div>
    </body>
    
    </html>
    grazie !

  8. #8
    Originariamente inviato da sandu
    eccolo :
    Io lo vedo alla stessa maniera sia su IE (versione 6.0), sia su Firefox (versione 1.5.0.4).
    Tu forse usi versioni differenti?

    L'unica differenza fra FF e IE che riscontro è che il primo non riconosce i caratteri speciali, ma per risolvere il problema basta settare il charset opportuno.

    codice:
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    (da aggiungersi nell'head del documento)

  9. #9
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239
    le versioni sono uguali ... ma a me su firefox se metto il padding fa questo:



    scusa ma non è più corretto utilizzare utf-8 ?

  10. #10
    Utente di HTML.it L'avatar di sandu
    Registrato dal
    Feb 2005
    Messaggi
    239
    non riesco a risolvere sta cosa .... qualcuno sa da cosa può dipendere ?

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.