Visualizzazione dei risultati da 1 a 6 su 6

Discussione: bug nel css

  1. #1
    Utente di HTML.it
    Registrato dal
    Dec 2002
    Messaggi
    1,786

    bug nel css

    salve,

    ho questo css:

    codice:
    /* stili per il layout fisso con altezza minima */
    html,body {
    	margin: 0;
    	padding: 0;
    	height: 100%;
    }
    body {
    	background-image: url(../images/bg_pagina.gif);
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    }
    
    #container {
    	position:relative;
    	height: 100%;
    	margin: 0 auto;
    }
    
    
    /* Allineamenti */
    #destra {
    	float: right;
    }
    #sinistra {
    	float: left;
    }
    
    /* Grafica */
    #header {
    	margin: 0px;
    	padding: 0px;
    	background-image: url(../images/bg_titolo.gif);
    	background-repeat: repeat-x;
    	height: 73px;
    }
    #sotto_header {
    	top:73px;
    }
    #content {
    	background-color: #FFFFFF;
    	padding: 2px;
    	border: 1px solid #7C7C7C;
    	position: relative;
    	height: 420px;
    	left: 150px;
    	right: 20px;
    	top: 20px;
    	width: 80%;
    }
    #footer {
    	position: absolute;
    	bottom: 0;
    	width: 100%;
    	padding: 0px;
    	background-image: url(../images/footer.gif);
    }
    agganciato a questa pagina html:

    codice:
    <head>
    <title>test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="css/style.css" rel="stylesheet" type="text/css">
    </head>
    
    <body>
        <div id="container">
            <div id="header">
    		    <div id="sinistra">[img]images/home_page.gif[/img]</div>
    		    <div id="destra">[img]images/logo_alto.gif[/img]</div>
            </div>
            <div id="sotto_header">
    		    <div id="destra">[img]images/logo_basso.gif[/img]</div>
    		</div>
    		<div id="menu"></div>
            <div id="content"></div>
            <div id="footer"></div>
        </div>
    </body>
    </html>

    questi sono i bug:

    • non è compatibile con firefox
    • il footer si dispone sopra il content


    come mai questi bug ?

    grazie !
    [Scambio Links a Tema] Contattatemi in Privato x + Info.

  2. #2
    1) scrivi codice standard (FF è il browser + standard)
    2) prima progetta per Firefox e poi per gli altri browser buggati
    3) penso che il footer sia sopra il content perchè è absolute

  3. #3
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Gli id di qualsiasi tipo di oggetti in una pagina devono essere univoci.
    Nel tuo codice ci sono due oggetti con id="destra" .
    Per queste cose ci sono le classi:
    <div class="destra">
    a cui corrisponde nel CSS:
    .destra { ...}
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  4. #4
    Utente di HTML.it
    Registrato dal
    Dec 2002
    Messaggi
    1,786
    Originariamente inviato da andrea.paiola
    3) penso che il footer sia sopra il content perchè è absolute
    come devo fare per correggere l'errore ?

    grazie !
    [Scambio Links a Tema] Contattatemi in Privato x + Info.

  5. #5
    Utente di HTML.it L'avatar di jepers
    Registrato dal
    Nov 2004
    Messaggi
    214
    Originariamente inviato da unreg
    come devo fare per correggere l'errore ?

    grazie !
    Togli la position.absolute dal footer, tanto quello si dispone secondo il flusso della pagina.
    ...e togli anche position:relative dal content che mi sembra sia inutile.
    Est modus in rebus...

  6. #6
    Utente di HTML.it
    Registrato dal
    Dec 2002
    Messaggi
    1,786
    Originariamente inviato da jepers
    Togli la position.absolute dal footer, tanto quello si dispone secondo il flusso della pagina.
    ...e togli anche position:relative dal content che mi sembra sia inutile.
    con firefox continua a non vedersi il footer, in IE, lo visualizza sotto il container
    [Scambio Links a Tema] Contattatemi in Privato x + Info.

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.