sfondo body e sfondi #header e #container sfasati

**blufragola** · 30-04-2005, 01:43

Ciao a tutti.
Sto sperimentando la realizzazione di un sito con i CSS.

La mia pagina è strutturata così:

body
div#container
div#header
div#contenuti
div#menu
div#footer

Ogni elemento ha margin e padding azzerati.
Il body ha un'immagine di sfondo centrata che si ripete verticalmente con delle sfumature laterali.
Il container ha una larghezza fissa di 700px (più stretta dell'immagine di sfondo del body, che è larga 740px).
L'#header ha un'immagine di sfondo che dovrebbe allinearsi ai bordi dello sfondo ripetuto sul body, e il #container ha un'immagine di sfondo posizionata al centro e in basso in modo che stia sempre al fondo della pagina. Anche questa immagine dovrebbe essere allineata allo sfondo del body. Purtroppo non è così perchè, nell'IE di mia sorella, versione IE6.0.2800.1106, header e sfondo del container sono sfasati rispetto allo sfondo. Nel mio browser, invece, IE6.0.2800.1166, è tutto perfetto.
Ho allegato l'immagine di quello che risulta sul browser suddetto.
Non capisco che cosa possa essere.
Ripeto che sia html che body,#container ed #header, hanno margin e padding a zero.
Suggerimenti?
Grazie mille.

**borgio3** · 30-04-2005, 08:42

Hai controllato le dimensioni di Header?
Hai qualche bordino?
Ricorda che i.e. ha una interpretazione dei box-model tutta sua.
Per il resto non so proprio cosa dirti.

Ciao Ciao

**blufragola** · 30-04-2005, 17:51

Nononono. Nessun bordino e soprattutto margin e padding a zero, sia nell'html, sia nel body, sia nel #container, sia nell'#header. Non capisco. Oltretutto, col mio IE, che è sempre 6 ma una versione leggermente più aggiornata, si vede perfettamente. Boh!
Certo che è fastidioso... anche perchè mi piaceva questa cosa dei CSS...
Sigh!

**borgio3** · 30-04-2005, 18:35

Potresti postare il codice della pagina, magari senza i contenuti testuali ed il CSS?

Ciao Ciao

**blufragola** · 30-04-2005, 19:18

Certamente.
Inizio con l'HTML:

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

<head>
<title>Treccine.com - home page</title>

<style type="text/css" title="currentStyle">
@import "stile.css";
</style>
</head>

<body>
<div id="container">
<div id="header">
<h1>Treccine.com</h1>
</div>
<div id="contenuti">
<h3 class="home"><span>Lorem ipsum</span></h3>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis <span class="evidenziato">nostrud</span> exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
[img]img/dreads10[1].jpg[/img]
<p class="p2">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="menu">
<ul>
[*]treccine
[*]dreads
[*]extensions
[*]weaving
[*]acconciature etniche
[*]colori
[*]contatti
[/list]
</div>
<div id="footer">
webmaster: blufragola
</div>
</div>
</body>
</html>

**blufragola** · 30-04-2005, 19:24

E qui c'è il CSS.
A proposito, sono riuscita a risolvere, per ora, il problema dell'allineamento su IE 6 su XP, impostando il margine sinistro del #container a 1px, ma non mi quadra la faccenda... continuo a non capire dove fosse il problema, e comunque devo testare questa soluzione anche sugli altri browser. Mah.

/* CSS Document */

html{
margin: 0;
padding: 0;
}

body {
margin: 0;
padding: 0;

text-align: center;
background-color: #F5EFDA;
background-image: url(img/body_bg.gif);
background-position: center top;
background-repeat: repeat-y;
height: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 70%;
line-height: 1.7em;
color: #663333;
}

#container {
margin: 0;
padding: 0;
border: 0px;

/*non si sa perchè...*/
margin-left: 1px;

width: 700px;
text-align: left;
position: relative;
height: 100%;

background-image: url(img/footer.gif);
background-position: center bottom;
background-repeat: no-repeat;
}

#header {
margin: 0;
padding: 0;
height: 145px;
background-image: url(img/header.jpg);
background-position: center top;
background-repeat: no-repeat;
}

#header a {
display: block;
width: 340px;
height: 80px;
/*background-color: #CCFFFF;*/
margin: 24px auto auto 360px;
padding: 0;
}

#contenuti {
margin: 30px 0 0 42px;
padding: 0;
width: 410px;
/*background-color: #FFCCFF;*/
padding-bottom: 120px;
}

#menu {
/*posizione, sfondo e misure del menu*/
margin: 0;
padding: 0;
background-color: #E9D8BF;
background-image: url(img/ricciolo.gif);
background-position: bottom left;
background-repeat: no-repeat;
width: 180px;

position: absolute;
top: 145px;
right: 18px;
}

#footer {
position: absolute;
bottom: 0;
left: 0;
width: 680px;
margin: 0;
padding-bottom: 16px;
text-align: right;
}

**blufragola** · 30-04-2005, 19:26

A proposito, visto che hai un Mac, da quello che ho capito, ti andrebbe di dare uno sguardo alla bozza del sito che sto facendo, a questo link: prova sito ?

Così mi dici se è tutto allineato... eheheh.
Grazie mille

**blufragola** · 30-04-2005, 19:36

Ho notato che sul mio portatile, che ha la stessa versione di IE 6, ma Windows 2000 invece di Windows XP, si vede bene anche senza il "trucchetto" del margin-left:1px; per il #container. Mentre su Windows XP (con la stessa versione di IE 6) devo per forza impostare il margine sinistro di #container a 1px, se no le immagini dell'header e quella in basso (corrisponderebbe al footer ma in realtà è lo sfondo di #container) si spostano di un pixel a sinistra rispetto allo sfondo. Boh!

**borgio3** · 01-05-2005, 00:14

Io non ho visto nulla di irregolare se non il fatto che la pagina ha due DTD (uno 4.01 ed un XHTML 1.0) e che hai impostato la dichiarazione per un elemento (html) che io non avevo mai visto.
In ogni caso senza immagini non posso verificare nulla.
Vista la pagina di prova con Opera 7.54, Firefox, Safari, SunriseBrowser e Internet Explorer tutti per Mac.
Solo i browser di classe Safari (compreso quindi Sunrise) hanno mostrato un problema di allineamento della foto della ragaza che deborda dal contenitore ombreggiato posizionandosi sul motivo posto in fondo alla pagina.

Una cosa te la posso dire e magari la saprai:
internet explorer è uno strumento terribile nella sua versione per uindovs e non ti devi dare cruccio per i suoi capricci, tanto riproduce le pagine come meglio crede su ogni singolo computer, parola di ex-uindovs disuser.
Se puoi cambia computer e sistema operativo :-)

Ciao Ciao

**blufragola** · 01-05-2005, 00:45

Beh, intanto grazie mille.

-Per quanto riguarda il DTD doppio, ho già provveduto a lasciare solo quello per XHTML 1.0 e ho validato le pagine, una per una.

-L'elemento html ha margin e padding a zero (non so dove l'avevo letto, ma era tra gli appunti delle cose da mettere sempre, e quindi l'ho messo dentro).

-l'immagine in alto, con la ragazza, è lo sfondo dell'#header (e lo riempie), è larga 700px. L'#header è posto dentro il #container, all'inizio, e ho posto per entrambi margin e padding a zero.

ANZI, per il #container ho dovuto scrivere:

margin: 0 auto;

per permettere l'allineamento orizzontale centrato nella pagina.

Il problema dello spostamento di un pixel a sinistra per l'immagine con la ragazza e per il ricciolo al fondo della pagina me lo continua a dare solo in Internet Explorer 6 su Windows XP. Incredibile!!! Sto cercando in giro se la versione per XP presenta bachi particolari ma non ho trovato ancora niente.
Boh!

Grazie ancora per l'aiuto.

Discussione: sfondo body e sfondi #header e #container sfasati

Strumenti discussione

Ricerca discussione

Visualizza

sfondo body e sfondi #header e #container sfasati

Ciao

Ciao

Problemi solo con XP?

Ciao

Permessi di invio