incompatibilità css firefox

**lori** · 20-09-2007, 16:02

Ciao a tutti!

ho editato una pagina davvero molto molto semplice, nonostante tutto ho un enorme problema!!!

In Explorer ( incredibile ma vero ) ottengo il risultato desiderato e perfetto.

In Firefox, è tutto ' accavallato ' !!! Il #box, va sopra il #menu!!!

Per favore, potete aiutarmi????????

Sono sicura sia una fesseria in realtà... ma io proprio non trovo dove e quale sia.

Mille grazie!!!!

Ecco il codice:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<style type="text/css">
body {
font-family: Comic Sans MS;
letter-spacing: 1px;
line-height: 25px;
}
#contenitore {
background-image: url(bkg.jpg);
background-repeat: no-repeat;
width: 889px;
height: 870px;
width: 889px;
height: 870px;
position: relative;
left: 50%;
margin-left: -444px;
border: 1px solid orange;
}
#menu {
position: relative;
top: 167px;
left: 98px;
width: 120px;
margin: 0px;
padding: 0px;
float: left;
font-size: 10pt;
font-weight: bold;
border: 1px solid orange;
}
#box {
position: relative;
top: 167px;
left: 145px;
width: 518px;
height: 618px;
padding: 0px;
border: 1px solid orange;
}
#mappa {
text-align: right;
font-size: 10pt;
font-weight: bold;
color: #de0107;
}
#tit_pagina_box {
text-align: center;
font-size: 18pt;
font-weight: bold;
color: #de0107;
padding-top: 20px;
}

#contenuti_pagina_box {
font-size: 12pt;
color: #01012f;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="contenitore">

<div id="menu">
UNO LINK

DUE LINK

TRE LINK

</div>

<div id="box">
<p id="mappa">home --> uno link</p>
<p id="tit_pagina_box">Uno Link</p>
<div id="contenuti_pagina_box">
akuiama jaumauna jlòm òkmclòkl òdksckl akuiama jaumauna jlòm òkmclòkl
akuiama ja, akuiama jaumauna jlòm òkmclòkl òdkscklòsdkckdlòsddblaia
mauna jlòm lòkmcl òklòdksck lòsdkckdlòsk clòksdlòkclòdkcksdlcd
kuiamaj auma una jblaia laiamcdc akuiamaj aum aunajlòm lòkm clòklòdksc
m,akuiamaja umaun ajbl aialaiam ddca kuiamaja umaunaj .àò,,òà,àòòà,ààd
m,akuia majaumaunajb laia laiam cccak uiamajaum aun ajlòml òkmcl
òklòdksc
</div>
</div>

</div>

</body>
</html>

**gabar-el** · 21-09-2007, 00:42

controlla le altezze se hai un problema di sovrapposizione.... sicura di quei posizionamenti assoluti? a che ti servono? una volta dato al box basta....

**lori** · 21-09-2007, 08:52

Grazzie mille,

seguirò senz altro il consiglio.

Ehm... però non ho capito, io ho usato position:relitive non absolute.

Il relative serve ad agganciare gli annidamenti. Ho usato il relative per far si che i posizionamenti dei dui div figli del div contenitore, avesserro posizionamenti relativi appunto al contenitore padre.

Grazzie per la chicca sulle dimensioni, ti farò sapere.

**gabar-el** · 21-09-2007, 08:55

ok, relativi, ho sbagliato. cmq se stai cercando di centrare il box, basta al contenitore, poi giochi con le dimensioni dei div. occhio alla sintassi, a volte ripeti alcune proprietà....
ciao

**salasir** · 21-09-2007, 09:12

In ogno caso, prima togli il prologo XML, che crea sicuramente problemi.

La codifica corretta del DOCTYPE è

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

(Recommended DTDs to use in your Web document.)

**lori** · 21-09-2007, 09:44

Grazie per i consigli,

ho sistemato il dcotype e ricontrollato le dimensioni.

Ho corretto specificando alcuni margini e adesso anche mozilla va.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>

<style type="text/css">

body {
font-family: Comic Sans MS;
letter-spacing: 1px;
line-height: 25px;
}

#contenitore {
background-image: url(bkg.jpg);
background-repeat: no-repeat;
width: 889px;
height: 870px;
position: relative;
left: 50%;
margin-left: -444px;
}

#menu {
position: relative;
top: 167px;
left: 98px;
width: 120px;
height: 618px;
margin: 0px;
padding: 0px;
float: left;
font-size: 10pt;
font-weight: bold;
border: 1px solid orange;
}

#box {
position: relative;
top: 167px;
left: 145px;
width: 518px;
height: 618px;

margin-left: 121px;

padding: 0px;
border: 1px solid orange;
}

#mappa {
margin-top: 0px;
text-align: right;
font-size: 10pt;
font-weight: bold;
color: #de0107;
}

#tit_pagina_box {
text-align: center;
font-size: 18pt;
font-weight: bold;
color: #de0107;
padding-top: 20px;
}

#contenuti_pagina_box {
font-size: 12pt;
color: #01012f;
padding-top: 10px;
}

a {
text-decoration: none;
}

p#mappa a{
color: #de0107;
}

p#mappa a:hover{
color: #f68f0a;
}

div#menu a{
color: #de0107;
}

div#menu a:hover{
color: #f68f0a;
}

</style>

</head>
<body>
<div id="contenitore">

<div id="menu">
UNO LINK

DUE LINK

TRE LINK

</div>

<div id="box">
<p id="mappa">home --> uno link</p>
<p id="tit_pagina_box">Uno Link</p>
<div id="contenuti_pagina_box">
akuiama jaumauna jlòm òkmclòkl òdksckl akuiama jaumauna jlòm òkmclòkl
akuiama ja, akuiama jaumauna jlòm òkmclòkl òdkscklòsdkckdlòsddblaia
mauna jlòm lòkmcl òklòdksck lòsdkckdlòsk clòksdlòkclòdkcksdlcd
kuiamaj auma una jblaia laiamcdc akuiamaj aum aunajlòm lòkm clòklòdksc
m,akuiamaja umaun ajbl aialaiam ddca kuiamaja umaunaj .àò,,òà,àòòà,ààd
m,akuia majaumaunajb laia laiam cccak uiamajaum aun ajlòml òkmcl
òklòdksc
</div>
</div>

</div>

<div id="footer">
www.loredanamorici.it ::
http://<a href="mailto:info@loredana...amorici.it</a> ::
copy :: ultimo aggiornamento gg/mm/aa
</div>

</body>
</html>

Cmq anche se avete ugualmente altri suggerimenti da darmi sul codice accetto sempre molto volentieri!

Grazzie mille.

**salasir** · 21-09-2007, 11:00

Una cosa sul menù: solitamente si utilizzano le liste non ordinate per i menù piuttosto che
.
Se guardi nei link utili, trovi parecchi esempi di menù con i CSS.

Per quanto riguarda il CSS, se vuoi è possibile affinarlo utilizzando le definizioni abbreviate, ma è proprio una finezza, mentre definirei le dimensioni dei font in em piuttosto che pt che è l'unità di misura propria della stampa.

**lori** · 25-09-2007, 11:56

Ciao Maurizio,

grazie per i consigli.

Provvederò per 'listare' il menù.

Hai ragione la sintassi abbreviata è una finezza, però anche se strano, così il codice mi resta + chiaro ;-)

Discussione: incompatibilità css firefox

Strumenti discussione

Ricerca discussione

Visualizza

incompatibilità css firefox

Permessi di invio