interpretazione stile dei browser

**ayrtonsenna** · 09-05-2006, 22:55

Ciao ragazzi..ho fatto un sito e ho un problema....con IE si vede perfetto...come potete vedere QUI .....con firefox si vede solo il div del menu che per altro non ha nemmeno l'hover...ora vi posto i codici:

codice:

body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        margin: 0;
        font-size: 80%;
        font-weight: bold;
        background: #FFF;
        }

h2 {
        font: bold 14px Verdana, Arial, Helvetica, sans-serif;
        color: #000;
        margin: 0px;
        padding: 0px 0px 0px 15px;
}

ul {
        list-style: none;
        margin: 0;
        padding: 0;
        }

img {
    border: none;
}

/*- Menu 4--------------------------- */

#menu4 {
        width: 150px;
        margin: 10px;
        border-style: solid solid none solid;
        border-color: #000;
        border-size: 1px;
        border-width: 1px;
        }

#menu4 li a {
        height: 32px;
          voice-family: "\"}\"";
          voice-family: inherit;
          height: 24px;
        text-decoration: none;
        }

#menu4 li a:link, #menu4 li a:visited {
        color: #CCC;
        display: block;
        background:  url(../immagini/menu4.gif);
        padding: 8px 0 0 10px;
        }

#menu4 li a:hover, #menu4 li #current { {
        color: #FFF;
        background:  url(../immagini/menu4.gif) 0 -32px;
        padding: 8px 0 0 10px;
        }




/* inizio sito */



#positioned-element {
background-image: url(../immagini/nuovo-1.png);
height: 200px;
left: 0px;
position: absolute;
top: 0px;
width: 200px;
z-index: 1
}

#positioned-element1 {
background-color: black;
height: 330px;
left: 0px;
position: absolute;
top: 210px;
width: 150px;
z-index: 2
}

#positioned-element2 {
background-image: url(../immagini/testata.png);
height: 100px;
left: 210px;
position: absolute;
top: 0px;
width: 500px;
z-index: 3
}

#positioned-element3 {
background-image: url(../immagini/cella.png);
height: 430px;
left: 210px;
position: absolute;
top: 120px;
width: 500px;
z-index: 4
}

#positioned-element4 {
background-color: silver;
height: 20px;
left: 0px;
position: absolute;
top: 560px;
width: 710px;
z-index: 5
}

html,body{margin: 0;padding:0; margin:-100px 0 0 -175px;
} 
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;} 

div#container { 
width: 750px; 
margin: 0 auto; 
text-align: left; 
 position:relative; 
}

e ora vi metto il codice della pagina html

codice:

<html>
<head>
<meta name="linked-style-sheet-name" value="Embedded style sheet">
<meta name="window-location" value="{ -30 -4 954 1288 }">
<meta name="targetted-browsers" value="NS4.0 NS6 IE4.0 IE5">
<title>Layout by Layout Master</title>
<style type="text/css">
@import url("stili/stile.css");
body {
	background-color: #9DA8A6;
}
.Stile1 {
	color: #FFFFFF;
	font-size: 14px;
}
.Stile4 {font-size: 10%}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body>

<div id="container">

<div id="positioned-element">

</div>


<div id="positioned-element1">
<div id="menu4">
                        <ul>
                                
<span class="Stile1">Azienda                               </span>[*]Chi Siamo[*]Dove Siamo

<span class="Stile1">Catalogo                                </span>[*]Letti[*]Zona Notte[*]Zona Giorno
<span class="Stile1">Ristrutturazioni                               </span>[*]Ville[*]Appartamenti
<span class="Stile1">Progettazione                               </span>[*]Interni[*]Esterni
[/list]
  </div>

</div>





<div id="positioned-element2">

</div>





<div id="positioned-element3">

</div>




<div id="positioned-element4">
  <div align="center">sito ideato e realizzato da Mura Alessandro</div>
</div>



</div>
</body>
</html>

come posso risolvere il fatto che con firefox non vedo nulla tranne un menu che nemmeno funziona?

**indigoindigo** · 10-05-2006, 00:49

Ciao..

allora

codice:

#menu4 li a:hover, #menu4 li #current { {
        color: #FFF;
        background:  url(../immagini/menu4.gif) 0 -32px;
        padding: 8px 0 0 10px;
        }

c/è una parentesi graffa di troppo!

codice:

#menu4 li a:hover, #menu4 li #current {
        color: #FFF;
        background:  url(../immagini/menu4.gif) 0 -32px;
        padding: 8px 0 0 10px;
        }

e poi elimina alla fine

codice:

html,body{margin: 0;padding:0; margin:-100px 0 0 -175px;
} 
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;}

infine ricorda di chiudere sempre i valori che imposti con il punto e virgola (ad es. controlla i vari z-index che hai scritto)..e valida html e CSS per scovare alcuni errori (non tutti ma una buona parte sì)..

p.s. la soluzione che ho trovato è più empirica che teorica, e infatti il menu sballa un pochino, ma questo lo lascio correggere a te!

bye

**ayrtonsenna** · 10-05-2006, 14:23

ho fatto le correzioni che mi avete detto ma guardate cosa si vede con firefox...

è veramente orrendo..manca il div testata, il div superiore al menu ed inoltre il menu funziona male....mi date una mano?

**indigoindigo** · 10-05-2006, 14:52

Ciao..

non hai eliminato

codice:

html,body{margin: 0;padding:0; margin:-100px 0 0 -175px;
} 
body{font-family: arial,sans-serif;font-size: 76%;text-align: center;}

alla fine

per il menu nin so..

**ayrtonsenna** · 10-05-2006, 14:56

no ma quello non posso eliminarlo perche mi serve per centrare la pagina..

**indigoindigo** · 10-05-2006, 15:11

Fai una prova..

comunque dal CSS associato alla pagina:

codice:

@import url("stili/stile.css");
body {
	background-color: #9DA8A6;
}

...

http://www.alexcagliari87.altervista...tili/stile.css

body {

        font-family: Verdana, Arial, Helvetica, sans-serif;

        margin: 0;

        font-size: 80%;

        font-weight: bold;

        background: #FFF;

        }

...

html,body{margin: 0;padding:0; margin:-100px 0 0 -175px;

} 

body{font-family: arial,sans-serif;font-size: 76%;text-align: center;}

che senso hanno tutti questi margini?

**ayrtonsenna** · 10-05-2006, 16:06

va beh anche se li tolgo il problema rimane lo stesso...come faccio a far si che il mio sito sia corretamente vsualizzato anche su firefox?

**Mich_** · 10-05-2006, 16:39

Non ho analizzato tutto il codice.
Pero` il consiglio che ormai e` uno standard in questi forum e`:
prima formattare per i browser conformi, poi applicare gli hack necessari per farlo visualizzare bene in IE.
Il processo inverso e` molto piu` complesso.

**ayrtonsenna** · 10-05-2006, 16:47

ma il problema che si pone per me che sto iniziando è: come formatto per gli standard conformi?

**Mich_** · 10-05-2006, 17:00

1. leggere (studiare) un tutorial CSS: pare che quello di HTML.it sia molto buono
2. procurarsi un reference manual: io uso http://www.w3schools.com/ , ma ce ne solo altri, tipo quello del W3C
3. scopiazzare dai siti dei guru: ne trovi una buona lista tra i "link utili" (sezione layout): forse il piu` semplice e completo e` constile

Discussione: interpretazione stile dei browser

Strumenti discussione

Ricerca discussione

Visualizza

interpretazione stile dei browser

Permessi di invio