Problema distribuzione div con firefox

**capitanoXsempre** · 21-11-2006, 13:52

La pagina html a questo indirizzo: www.annarella.org/index2.htm se aperta con IE si vede correttamente, se aperta con firefox i div si distribuiscono male nella pgina (es. vanno a capo quando non devono).

il codice css è questo:

codice css
/* CSS Document */
html,body{margin:0;padding:0}

#pagina, #logo, #titolo, #sottomenu, #testo, #news, #pie{
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
padding-top:5px;
background-color:#FFFFFF;
color:#000000;
}

#pagina
{
width:100%;
height:100%;
background-image:url(img/_bg_.gif);
}

#logo
{
/*background-color:#FFFFFF;*/
float:left;
margin-top:10px;
margin-left:10px;
width:15%;
height:10%;
background-image:url(img/_bg_.gif);
}

#titolo
{
float:left;
margin-top:10px;
margin-left:1%;
width:45%;
}

#menu
{
clear:left;
float:left;
margin-top:10px;
margin-left:10px;
padding-left:0px;
padding-right:0px;
padding-bottom:0px;
padding-top:0px;
width:14%;
}

#sottomenu
{
clear:left;
float:left;
margin-top:10px;
margin-left:10px;
width:14%;
}

#testo
{
float:left;
margin-top:5%;
margin-left:10px;
width:45%;
}

#script
{
background-color:#FFFFFF;
color:#000000;
margin-top:1%;
margin-left:68%;
width:19%;
}

#news
{
float:left;
margin-top:1%;
margin-left:20px;
width:23%;
}

#pie
{
clear:both;
margin-top:10px;
margin-left:19%;
width:45%;
}
a:hover {
color:red;
font-size: 16px;
font-weight:150;
background-color:#FFFFFF;
}
A {
text-decoration:none;
color:#000000;
padding-left:10px;
padding-right:10px;
font-size: 15px;
background-color:#FFFFFF;
/*font-family: Verdana;*/
}
body
{
background-image:url(img/_bg_.gif);
}

Se serve posto anche l'html

**Mich_** · 21-11-2006, 16:03

Certo che serve l'HTML.
Soprattutto del pezzo in cui ci sono in blocchi che devono stare affiancati.

Comunque, da quanto dici, sembra un errore nella somma delle larghezze.

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirk mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

**capitanoXsempre** · 22-11-2006, 17:39

il codice html è questo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Associazione Annarella - Corsi di formazione a roma
</title>
<link rel="stylesheet" type="text/css" href="prova.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Description" content="Associazione Annarella. Corsi di formazione e corsi di informatica a roma">
<meta http-equiv="Keywords" content="annarella,corsi formazione,corsi informatica roma,internet point">

<script type="text/javascript">

function bookmarksite(title, url){
if (document.all)
window.external.AddFavorite(url, title);
else if (window.sidebar)
window.sidebar.addPanel(title, url, "")
}

</script>

</head>
<body>
<div id="pagina">
<div id="logo">
[img]img/logo.gif[/img]
</div>

<div id="titolo">
<div align="center">
[img]img/top.gif[/img]
</div>
</div>

<div id="menu">

<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','img/menu/home_over.gif',1)" title="home" hreflang="it">
[img]img/menu/home_on.gif[/img]</a>
<a href="chisiamo.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('chi siamo','','img/menu/chisiamo_over.gif',1)" title="chi siamo" hreflang="it">
[img]img/menu/chisiamo_on.gif[/img]</a>
<a href="collabora.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('servizi','','img/menu/collabora_over.gif',1)" title="servizi" hreflang="it">
[img]img/menu/collabora_on.gif[/img]</a>
[img]img/menu/attivita_on.gif[/img]

<div align="right">
<a href="index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('corsi','','img/menu/corsi_over.gif',1)" title="corsi" hreflang="it">
[img]img/menu/corsi_on.gif[/img]</a>
<a href="eventi.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('eventi','','img/menu/eventi_over.gif',1)" title="eventi" hreflang="it">
[img]img/menu/eventi_on.gif[/img]</a>
<a href="coop.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('cooperazione','','img/menu/coop_over.gif',1)" title="cooperazione" hreflang="it">
[img]img/menu/coop_on.gif[/img]</a>
</div>

<a href="dicono.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dicono di noi','','img/menu/dicono_over.gif',1)" title="dicono di noi" hreflang="it">
[img]img/menu/dicono_on.gif[/img]</a>
<a href="download/index.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('area download','','img/menu/download_over.gif',1)" title="area download" hreflang="it">
[img]img/menu/download_on.gif[/img]</a> <a href="dovesiamo.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('dove siamo','','img/menu/dovesiamo_over.gif',1)" title="dove siamo" hreflang="it">
[img]img/menu/dovesiamo_on.gif[/img]</a>
<a href="links.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','img/menu/links_over.gif',1)" title="links" hreflang="it">
[img]img/menu/links_on.gif[/img]</a>
<a href="foto.php" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('links','','img/menu/links_over.gif',1)" title="foto" hreflang="it">
[img]img/menu/foto_on.gif[/img]</a>
</div>
<div id="sottomenu">
<hr>
[img]immagini/segnalato_roma.gif[/img]

</div>
<div id="testo">
[img]img/_headerCorsi.gif[/img]

<div align="center">

I CORSI 2006/07

<div align="left">
PER TUTTI I CORSI LA PRIMA LEZIONE E' GRATIS

CORSI DI LINGUA </p>
INGLESE

SPAGNOLO

CORSI DI INFORMATICA e SUONO

INFORMATICA DI BASE

PATENTE EUROPEA DEL COMPUTER ECDL

LINUX

WEBMASTER BASE

WEBMASTER AVANZATO

MULTIMEDIALITA'

MONTAGGIO VIDEO

FONIA

CORSI DI MOVIMENTO e ARTE

CERAMICA ARTISTICA

SCUOLA PER LO SPETTACOLO

CANTO

GINNASTICA DOLCE

CARATTERISTICHE CORSI</p>
</div>
<p align="left">L’offerta dei corsi di Annarella ha alcune particolarità che ci preme sottolineare:</p>
<div align="left">

costo sociale;
professionalità;
partecipazione

</div>

Il costo sociale è un prezzo al di sotto del mercato in rapporto alla qualità
e quantità del corso. Ciò vuol dire che il costo che si sostiene per partecipare ad un
corso va a coprire le sole spese sostenute per l’insegnante e per l’organizzazione (ed
eventuale materiale).

La professionalità delle lezioni è data dalla certificazione ed esperienza
posseduta dagli insegnanti piuttosto che dalla presenza di madre lingua.

La partecipazione è la modalità di insegnamento proposta ossia con continuo
faccia a faccia tra corsisti ed insegnante che dona ai corsi una particolare semplicità
e voglia di essere parte attiva.

L’elenco dei corsi che segue è solo la base dalla quale l’Associazione vuole
partire dalla metà di ottobre ma sono bene accette altre richieste o proposte.
I corsi prevedono un minimo di partecipanti (5)

ed un massimo (10), quindi sono gradite prenotazioni per farli partire non appena si raggiunge il
numero minimo:

info@annarella.org

</div>
</div>

<div id="script">
<a href="javascript:bookmarksite('Annarella.org', 'http://www.annarella.org')">
Aggiungi ai Preferiti
[img]immagini/preferiti.gif[/img]
</a>
</div>

<div id="news">

<span class="Stile2">Giovedi 26 Ottobre</span>

A DISPOSIZIONE L'INTERNET POINT GRATUITO

Dal 26 ottobre è disponibile l'accesso al nostro internet point gratuitamente
La nostra sala informatica è disponibile a tutti gratuitamente per uso internet point

</p>
<hr>

<span class="Stile2">Lunedi 2 Ottobre</span>

INIZIO CORSI

Stanno iniziando i corsi di informatica

Per info sui corsi: nella homepage clicca sul nome del corso che ti interessa, oppure chiama il numero 328/8975082 </p>

<hr>
Comunica con Annarella
<form action="invio_mail.php" method="get" target="_parent">
Il tuo nome:
(campo opzionale)
<input type="text" name="nome" size="23">

Il tuo indirizzo E-Mail:
(campo opzionale)
<input type="text" name="mail" size="23">

Messaggio:
<textarea name="messaggio" rows="6" cols="21"></textarea>
<input type="submit" name="invia" value="Invia">
</form>

<hr>

</p>

</div>
<div id="pie">
Associazione ANNARELLA

Via Pico della Mirandola, 15 (zona Montagnola / EUR)

Tel / Fax 06 59606386

Dal Lunedì al Venerdì dalle 17:00 alle 20:00.

<hr>
VISITE DAL 10 NOVEMBRE 2006:

<script type="text/javascript" language="JavaScript" SRC="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=AssociazioneAnn"></script>
<noscript>
<A HREF="http://www.shinystat.com" target="_top">

</A>
</noscript>

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

**Mich_** · 22-11-2006, 18:03

Intanto inserire il codice in quel modo e` da far diventare pazzo chi legge. Ci sono gli appositi tag [ code ] ...[ /code ] (senza spazi) per inserire il codice.

Comunque vedo che usi la formattazione per mezzo di attributi HTML: questo crea contrasti nei browser, che possono scegliere di seguire l'una o l'altra formattazione oppure di non seguirle per niente.
Anche se usi un linguaggio vecchio (HTML 4 transitional), se vuoi sistemare con i CSS devi eliminare tutti gli attributi di formattazione HTML.

**capitanoXsempre** · 27-11-2006, 12:54

Originariamente inviato da Mich_
Intanto inserire il codice in quel modo e` da far diventare pazzo chi legge. Ci sono gli appositi tag [ code ] ...[ /code ] (senza spazi) per inserire il codice.

Comunque vedo che usi la formattazione per mezzo di attributi HTML: questo crea contrasti nei browser, che possono scegliere di seguire l'una o l'altra formattazione oppure di non seguirle per niente.
Anche se usi un linguaggio vecchio (HTML 4 transitional), se vuoi sistemare con i CSS devi eliminare tutti gli attributi di formattazione HTML.

Non sapevo che esisteva il tag [code]

Ho usato la formattazione per mezzo di attributi HTML quando dovevo applicare alcune proprietà (es. allineamento centrato) solo in un alcune righe di testo del div, con i CSS come faccio ad apllicare regole di formattazione sono ad alcune righe del testo?

**capitanoXsempre** · 27-11-2006, 13:02

Originariamente inviato da Mich_
Certo che serve l'HTML.
Soprattutto del pezzo in cui ci sono in blocchi che devono stare affiancati.

Comunque, da quanto dici, sembra un errore nella somma delle larghezze.

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin
In IE (quirk mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

quindi se la largezza di un blocco varia in base al browser, devo creare due css, uno che andrà caricato se l'utente usa IE, l'altro se l'utente usa Firefox.
Qual'è il codice per far caricare un foglio di stile invece di un altro in base al browser utilizzato?

**Mich_** · 27-11-2006, 13:40

Conviene caricare uno stile che "corregge" le impostazioni per IE, da inserrire dopo quello corretto.
Per questo si usano i commenti condizionali (vedi 'link utili" per i riferimenti).

**capitanoXsempre** · 27-11-2006, 15:49

Originariamente inviato da Mich_
Conviene caricare uno stile che "corregge" le impostazioni per IE, da inserrire dopo quello corretto.
Per questo si usano i commenti condizionali (vedi 'link utili" per i riferimenti).

il link ai commenti condizionali mi porta a questo sito: http://tredosoft.com/Multiple_IE
dalla descrizione però questo sembra solamente un programma per testare in locale un sito con le varie versioni di I.E.

**Mich_** · 27-11-2006, 16:35

Opps. Non so che sia successo. A suo tempo li avevamo controllati i link.

Comunque ecco la sintassi per i CSS con link a file esterni:

codice:

<link rel="stylesheet" type="text/css" href="standard.css" />
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Per fogli di stile nella pagina invece:

codice:

<style type="text/css">
  /*... stile standard ...*/
</style>
<!--[if IE]><style type="text/css" rel="stylesheet" >
  /*... stile per IE ...*/
</style><![endif]-->

**capitanoXsempre** · 27-11-2006, 16:47

Originariamente inviato da Mich_
Opps. Non so che sia successo. A suo tempo li avevamo controllati i link.

Comunque ecco la sintassi per i CSS con link a file esterni:

codice:

<link rel="stylesheet" type="text/css" href="standard.css" />
<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

Immagino che la parte <!--[if IE]> vada sostituita con un codice che controlla se il browser utilizzato dall'utente è IE, come si fa questo controllo?

Discussione: Problema distribuzione div con firefox

Strumenti discussione

Ricerca discussione

Visualizza

Problema distribuzione div con firefox

Permessi di invio