maledetto spazio bianco!!ke faccio?

[Babadi]

salve ragazzi se indirizzate il vostro IE su http://xoomer.virgilio.it/spongebob_jellyfish e date un'occhiata al box "quote of the week" noterete che c'è uno spazio bianco °° da cosa dipende??con firefox e altri nn mi da sto problema

[seed_squall_it]

Non solo quello...ho guardato la pagina con IE 5 e il layout è completamente sballato.
Per gli spazi bianchi, controlla di non aver impostato dei margin e di aver annullato margin e padding di elementi come <h1>,

, <form>, <table>, <ul>, [list=1], <dl>,[*], <dt> e <dd>.

Poi ti manca un text-align: center nella regola CSS del body per centrare la pagina orizzontalmente (metodo scorretto, ma a IE piace così).

Infine, la parte bianca della pagina mi viene "spostata" in basso di uno spazio alto come il monitor. Questo è un tipico errore di "pulizia" di qualche box flottante. Probabilmente hai usato un clear nel posto sbagliato.

[Babadi]

per IE5 non preoccuparti, non ho mai avuto intenzione di supportarlo, tanto ormai non lo usa nessuno! difatti io non ho mai usato il box model hack, penso dipenda da questo...

cmq..ritornando allo spazio bianco...io non so che pesci prendere sul serio vi posto il codice css e spero in un aiuto dal "cielo"

p.s. noto che col text-align:center mi sballano un pò di cose...xciò non lo metto(ad esempio le scritte non vanno + perfettamente a sx ma sn leggermente spostate a destra... :S) grazie ad ognimodo del suggerimento..

----------------------------------------
#container {
margin: auto;
padding: 0px;
width: 784px;
}
#header {
background-image: url(../Graphics/bgTop3.gif);
height: auto;
width: 784px;
background-repeat: no-repeat;
clear: both;
float: left;
margin: 0px;
padding: 0px;
}
#logo {
float: left;
margin-top: 20px;
margin-left: 45px;
}
#contenuto {
background-image: url(../Graphics/bgPage.gif);
float: left;
width: 724px;
padding-top: 14px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 60px;
}
img {
border: none;
}
body {
background-color: #dddfcb;
}
#banner {
margin: 0px;
padding-bottom: 0px;
padding-top: 0px;
padding-right: 0px;
padding-left: 10px;
}
#navbar {
height: 60px;
width: 784px;
margin: 0px;
clear: left;
background-image: url(../Graphics/bgPage.gif);
background-repeat: repeat-y;
}
#navbar ul {
margin: 0px;
list-style-type: none;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 2px;
padding-left: 43px;
}
#navbar li {
float: left;
margin-top: 1px;
margin-right: 3px;
}
#episode, #episode a {
background-image: url(../Graphics/Button_Episode_Hover.gif);
width: 135px;
height: 55px;
}
#episode a:hover {
background-image: url(../Graphics/Button_Episode.gif);
}
.invisibile {
display: none;
}
#chars, #chars a {
background-image: url(../Graphics/Button_Chars_Hover.gif);
height: 55px;
width: 135px;
}
#chars a:hover {
background-image: url(../Graphics/Button_Chars.gif);
}
#pictures, #pictures a {
background-image: url(../Graphics/Button_Pictures_Hover.gif);
height: 55px;
width: 135px;
}
#pictures a:hover {
background-image: url(../Graphics/Button_Pictures.gif);
}
#audiovideo, #audiovideo a {
background-image: url(../Graphics/Button_Audiovideo_Hover.gif);
height: 55px;
width: 135px;
}
#audiovideo a:hover {
background-image: url(../Graphics/Button_Audiovideo.gif);
}
#wallpaper, #wallpaper a {
background-image: url(../Graphics/Button_Wallpaper_Hover.gif);
height: 55px;
width: 135px;
}
#wallpaper a:hover {
background-image: url(../Graphics/Button_Wallpaper.gif);
}
#navbar a {
text-decoration: none;
float: left;
height: 55px;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1.5em;
font-style: normal;
color: #F8275B;
border-bottom-style: solid;
border-bottom-color: #5F8FE9;
border-bottom-width: 2px;
width: 450px;
}
.news {
margin: 0px;
border: 1px none #0099FF;
float: left;
padding: 0px;
width: 470px;
}
.imgnews {
float: left;
margin: 0px;
padding: 0px;
}
.testo {
margin: 0px 0px 5px 10px;
padding: 0px 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 1em;
color: #0066FF;
font-weight: 600;
border-top: 1px none #0099FF;
border-right: 1px dashed #0099FF;
border-bottom: 1px none #0099FF;
border-left: 1px dashed #0099FF;
float: left;
width: 315px;
}
---------------------------------

--------------------------------
#navbardx {
width: 170px;
border: thin none #000000;
float: left;
height: auto;
margin-left: 5px;
}
#content {
width: 470px;
border: medium none #000066;
float: left;
}
.picshow {
background-image: url(../Graphics/dx_pic.gif);
height: 65px;
width: 179px;
margin: 0px;
}
#picbox {
background-image: url(../Graphics/dx_pic_box.gif);
height: 111px;
width: 175px;
}
#picbox img {
margin-top: 5px;
margin-left: 9px;
}
#links {
background-image: url(../Graphics/dx_links.gif);
height: 65px;
width: 175px;
margin: 0px;
}
#guestbook {
background-image: url(../Graphics/dx_guestbook.gif);
height: 65px;
width: 175px;
margin: 5px 0px 0px;
}
#contacts {
background-image: url(../Graphics/dx_contacts2.gif);
height: 66px;
width: 175px;
margin: 0px;
}
#bannerini {

}

#bannerini img {
margin-right: 60px;
margin-top: 2px;
}
.dx {
float: right;
}
.quote {
height: 65px;
width: 179px;
background-image: url(../Graphics/dx_quote.gif);
margin: 5px 0px 0px;
}
.quoteboxup {
background-image: url(../Graphics/dx_quote_box_up.gif);
background-repeat: no-repeat;
height: 13px;
width: 173px;
margin: 0px;
padding: 0px;
}
.quoteboxmiddle {
background-image: url(../Graphics/dx_quote_box_middle.gif);
background-repeat: repeat-y;
height: auto;
width: 173px;
margin: 0px;
padding: 0px;
}
.quoteboxdown {
background-image: url(../Graphics/dx_quote_box_down.gif);
background-repeat: no-repeat;
height: 12px;
width: 173px;
}
.quoteboxmiddle p {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 0.8em;
font-weight: 700;
color: #3399FF;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
text-align: left;
margin-right: 2px;
}
.quoteboxmiddle p a {
color: #008484;
text-align: right;
text-decoration: none;
}
.quoteboxmiddle p a:hover {
color: #FF3333;
}
#linkosi {
text-align: right;
height: 200px;
width: 150px;
}
---------------------------------------------------

[hooara]

io di solito inserisco un div che comprende il tutto (box) e poi lo divido in tre parti (superiore, centro,inferiore).



<div id="box">
<div id="superiore"></div>
<div id="centro">testo testo testo</div>
<div id="inferiore"></div>
</div>




e questi sono gli stili CSS di riferimento

div#box{
width:456px;
background-image: url(img/box.gif);
background-repeat: repeat-y;
}
div#superiore{
float: no;
background-image: url(img/boxSu.gif);
height: 30px;
padding-left: 13px;

}
div#centro{
background-image: url(img/box.gif);
background-position: 0px 0px;
background-repeat: repeat-y;
text-align:justify;
padding-top: 0px;
padding-right: 25px;
padding-bottom: 10px;
padding-left: 15px;
}
div#inferiore{
background-image: url(img/boxGiu.gif);
height: 30px;
}

[Babadi]

hmmm provo così...anche se vorrei cmq qualcosa di "automatico" senza dover specificare l'altezza...cmq provo + tardi...grazie per il consiglio

[The knight]

prova a far così:

.quoteboxup {
background-image: url(../Graphics/dx_quote_box_up.gif) top no-repeat;
height: 13px;
width: 173px;
}

.quoteboxmiddle {
background-image: url(../Graphics/dx_quote_box_middle.gif) center repeat-y;
width: 173px;
}

[Babadi]

provato niente... e cmq il metodo di prima suggerito mi sembra inutilmente ridonante, tanto vale mettere un box di sfondo e dare le misure, ma è quello che NON voglio fare...

pensavo fosse + facile da scovare sto errore

[The knight]

Originariamente inviato da Babadi
provato niente... e cmq il metodo di prima suggerito mi sembra inutilmente ridonante, tanto vale mettere un box di sfondo e dare le misure, ma è quello che NON voglio fare...

pensavo fosse + facile da scovare sto errore

ma facendo come ho suggerito io niente ?

[Babadi]

si mi riferisco al tuo metodo...l'altro non ha senso provarlo(perchè come già spiegato mi sembra ridondante!)... quanto sono rompiXXX sti css :/

[Babadi]

io nn sn riuscito a cavare un ragno dal buco...sto impazzendo