Entra

View Full Version : [CSS] Problema con Padding

Fede 88
04-11-2009, 22:26
Ho creato la struttura base per un sito, su IE8 sembrava tutto a posto, aperta su Firefox era un disastro. Con un po' pazienza, e una buona dose di google, sono riuscito a sistemarla quasi tutta.

L'unico problema che non sono riuscito ancora a risolvere è l'abbinamento del padding alle div con Float: left, infatti se in tali celle imposto il padding diverso da zero mi sballa tutto.

Il fatto è che il padding mi è necessario per spaziare internamente testo e immagini.

Qualcuno ha avuto questo problema e sa come risolvere?
chano
04-11-2009, 22:54
Ho creato la struttura base per un sito, su IE8 sembrava tutto a posto, aperta su Firefox era un disastro. Con un po' pazienza, e una buona dose di google, sono riuscito a sistemarla quasi tutta.

L'unico problema che non sono riuscito ancora a risolvere è l'abbinamento del padding alle div con Float: left, infatti se in tali celle imposto il padding diverso da zero mi sballa tutto.

Il fatto è che il padding mi è necessario per spaziare internamente testo e immagini.

Qualcuno ha avuto questo problema e sa come risolvere?
edit: non avevo capito un cazzo del post :D

scusate, sarà l'ora e le 4 ore di sonno :)
Fede 88
05-11-2009, 09:26
In pratica mi serve sapere se c'è un metodo alternativo al padding per la spaziatura interna.
chano
05-11-2009, 14:27
In pratica mi serve sapere se c'è un metodo alternativo al padding per la spaziatura interna.

mmm.. la butto lì, mettere tutto in un altro div o cmq tag (span, p ecc) e assegnare a questo un mergine mantenendo il padding del contenitore a 0

magari è un minchiata... in caso chiedo scusa :D
Fede 88
05-11-2009, 19:22
mmm.. la butto lì, mettere tutto in un altro div o cmq tag (span, p ecc) e assegnare a questo un mergine mantenendo il padding del contenitore a 0

magari è un minchiata... in caso chiedo scusa :D

Potrebbe funzionare, si può fare una DIV con bordo (solid) però trasparente?

Perchè sotto ho uno sfondo sfumato.
chano
05-11-2009, 20:43
Potrebbe funzionare, si può fare una DIV con bordo (solid) però trasparente?

Perchè sotto ho uno sfondo sfumato.

ehm... si, o non lo fai (di default mi pare non abbiano bordi i div) o senò metti 'border: 0px;' o 'border: 0px solid transparent', altra alternativa (mi è venuta adesso ma non so se sia effettivamente realizzabile), puoi usare dei div senza padding e margini ma con dei bordi spessi ma trasparenti (es. '10px solid transparent')

edit: la seconda opzione è quella che hai appena detto ma alla prima lettura non c'ero arrivato :D sti giorni son fuso lol
Fede 88
05-11-2009, 21:42
Perfetto, grazie mille, faccio qualche prova poi ti dico...
Fede 88
06-11-2009, 08:28
Non capisco come creare dei bordi trasparenti.

Ho provato in questo modo ma non funziona.

border: top;
border-color: trasparent;
borded-width: 5px;
kurts
06-11-2009, 09:08
al contrario del background non mi pare che border accetti come valore "transparent"
Fede 88
06-11-2009, 11:20
É un problema, sono bloccato su questa cosa da 2 giorni.

Su IE8 tutto a posto, mentre su Firefox sembra che sommi il padding alle dimensioni della div, infatti aumentando il padding mi sballa tutto... non capisco perchè.
MEMon
06-11-2009, 11:35
Se riesci a postare del codice che riproduce l'errore è meglio, perchè il comportamento da te descritto non è normale.
MEMon
06-11-2009, 11:41
É un problema, sono bloccato su questa cosa da 2 giorni.

Su IE8 tutto a posto, mentre su Firefox sembra che sommi il padding alle dimensioni della div, infatti aumentando il padding mi sballa tutto... non capisco perchè.

Questo invece è normale, il padding è in aggiunta alla dimensione impostata.
Qua (http://www.w3.org/TR/CSS2/box.html)se ti interessa di come viene interpretato il box model con i css.
Fede 88
06-11-2009, 11:58
Quindi è IE che intepreta male il padding, infatti se faccio una DIV alta 100px e larga 100px con padding 10, mi crea una cella 100x100 con spaziatura interna 10.

Quindi ora ho capito che devo sommare il padding alle dimensioni per sapere le dimensioni finali, però poi l problema sarebbe inverso, infatti su IE verrebbe visualizzato male.

C'è modo di sistemarlo su entrambi i browser?
MEMon
06-11-2009, 12:02
Su IE viene visualizzato uguale, fammi un esempio che riproduce l'errore.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<body>
<div>
<div style="background-color:#F60; float:left; height:300px; width:300px; padding:20px;">
<div style="border:1px solid black; width:260px; height:260px;"></div>
</div>
<div style="background-color:#3FF; float:right; height:300px; width:300px; padding:20px;">
<div style="border:1px solid black; width:300px; height:300px;"></div>
</div>
</div>
<div style="clear:both"></div>
<br />
<br />
<br />
<div>
<div style="background-color:#F60; float:left; height:300px; width:300px; padding:20px;">
<div style="border:1px solid black; width:300px; height:300px;"></div>
</div>
<div style="background-color:#3FF; float:right; height:300px; width:300px; padding:20px;">
<div style="border:1px solid black; width:300px; height:300px;"></div>
</div>
</div>
</body>
</html>


questa pagina ad esempio riproduce quello da te descritto, un div left con padding.
Viene riprodutta correttamente da entrambi i browser.
Fede 88
06-11-2009, 12:18
E' un po' lungo:

EDIT

In teoria per vederlo bene andrebbero messe le immagini degli sfondi, oppure mesis dei colori.

Comunque così com'è se aggiungo il padding si IE viene visualizzato giusto, mentre su firefox sballa tutta la struttura.
MEMon
06-11-2009, 12:27
Fai una cosa fatta bene, isolami il problema, metti i colori e fammi capire.
Non farmi lavorare per te grazie.
Fede 88
06-11-2009, 13:00
Ok, adesso creo un esempio che si capisce e poi te lo posto.
Fede 88
06-11-2009, 13:15
Ti posto tutta la struttura modificata per farti capire bene, basta che crei i 2 file con il codice che ti posto.

style.css

body {
font-family: Calibri;
font-size: 13px;
font-weight: bold;
text-align: center;
color: black;
background-color: white;
margin: auto;
}

a:link,a:visited,a:hover {text-decoration: none; color: black}

#contenitore {
width: 968px;
margin: auto;
padding: 0px;
text-align: center;
overflow:hidden;
}

#header {
width: 968px;
height: 100px;
background-color: red;
margin: auto;
padding: 0px;
}

#bar_left {
float: left;
width: 24px;
height: 29px;
background-color: blue;

margin: auto;
padding: 0px;
text-align: right;
}

#bar {
float: left;
width: 920px;
height: 29px;
background-color: yellow;
margin: auto;
text-align: right;
}

#bar_right {
float: right;
width: 24px;
height: 29px;
background-color: blue;
margin: auto;
padding: 0px;
text-align: right;
}

#cont_body {
width: 968px;
background-color: white;
margin: auto;
padding: 0px;
overflow:hidden;
}

#body_left {
float: left;
width: 24px;
background-color: yellow;
margin: auto;
padding: 0px;
}

#body {
float: left;
width: 920px;
min-height: 400px;
height: auto !important;
height: 460px;
background-color: green;
margin: auto;
text-align: left;
}

#body_right {
float: left;
width: 24px;
background-color: yellow;
margin: auto;
padding: 0px;
}

#footer {
width: 968px;
height: 35px;
background-color: blue;
margin: auto;
text-align: center;
color: #B4B4B4;
font-size: 11px;
padding: 0px;
}


pagina.html
<html>
<head>
<title>home</title>
<style type="text/css" media="screen">@import "style.css";
</style>
</head>
<body>
<br>
<div id="contenitore">
<div id="header"></div>
<div id="bar_left">&nbsp;</div><div id="bar">
<input onfocus="if(this.value=='Username'){this.value=''}" onblur="if(this.value==''){this.value='Username'}" name="username" value="Username" type="text" size=20 style="width: 149px"/>
<input onfocus="if(this.value=='Password'){this.value=''; this.type='password'}" onblur="if(this.value==''){this.type='text'; this.value='Password'}" name="pass" value="Password" type="password" size=20 style="width: 149px"/>&nbsp;&nbsp;<input type="submit" name="login" type="button" value="Login" />
</div><div id="bar_right">&nbsp;</div>
<div id="cont_body">
<div id="body_left">&nbsp;</div><div id="body"></div><div id="body_right">&nbsp;</div>
</div>
<div id="footer">PROVA prova PROVA prova PROVA prova PROVA prova PROVA prova PROVA prova </div></div>
</body>
</html>

Così aprendola puoi notare che su i diversi browser viene visualizzata uguale e in modo corretto.

Quello che devo fare è modificarere la spaziatura interna delle div in modo da allineare le scritte che come puoi vede sono troppo attaccate ai bordi.

Il problema è che aggiungendo padding: x pixel, su internet explorer viene visualizzata perfetta, mentre su firefox mi sballa tutto.

Spero di essere stato chiaro.
MEMon
06-11-2009, 13:21
Questo è quello che dovrei visualizzare giusto?
http://img517.imageshack.us/img517/2489/catturai.png (http://img517.imageshack.us/i/catturai.png/)
Il padding deve essere applicato al div verde(body)?
kurts
06-11-2009, 13:21
se devi solo regolare il distacco interno dal bordo non puoi creare un div avvidato con una larghezza diciamo del 90% del padre con margin auto (in modo da centrarlo) oppure anche floar right e poi scrivere dentro di li?
Fede 88
06-11-2009, 13:27
Questo è quello che dovrei visualizzare giusto?
http://img517.imageshack.us/img517/2489/catturai.png (http://img517.imageshack.us/i/catturai.png/)
Il padding deve essere applicato al div verde(body)?

Si a quello verde ma non solo, per esempio dovrei mettere padding-top per abbassare le scritte nella barra inferiore e sempre con il padding-top dovei spostare in basso di 2-3px le scritte nella barra gialla in modo da centrarle.
Fede 88
06-11-2009, 13:28
se devi solo regolare il distacco interno dal bordo non puoi creare un div avvidato con una larghezza diciamo del 90% del padre con margin auto (in modo da centrarlo) oppure anche floar right e poi scrivere dentro di li?

Però così avrei distanza uguale da tutti i lati, e per a me servirebbe distanziare solo un lato, per centrare le scritte.
MEMon
06-11-2009, 13:30
A parte che se aggiungo il padding mi sballa anche IE 8, per esempio il div giallo body_right va a finire vicino al footer identicamente a come succede con FF.

Ora te lo metto apposto
kurts
06-11-2009, 13:31
se metti float right il div interno andrà a sbattere contro il bordo di destra, risultato sarà staccato di un tot dal bordo di sinistra.
o magari puoi giocare con gli attributi op, bottom, right e left in modo da non usare il float, vedi tu, fai qualche prova
MEMon
06-11-2009, 13:39
Ok...era un semplice problema di dimensioni... per fortuna che ti era stato detto.

Hai il contenitore principale di 668px
Il #body è 640px, se applichi un padding al #body, questo viene aggiunto ai 640px.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
</head>
<style type="text/css">
body {
font-family: Calibri;
font-size: 13px;
font-weight: bold;
text-align: center;
color: black;
background-color: white;
margin: auto;
}

a:link,a:visited,a:hover {text-decoration: none; color: black}

#contenitore {
width: 968px;
margin: 20px auto;
padding: 0px;
text-align: center;
overflow:hidden;
}

#header {
width: 968px;
height: 100px;
background-color: red;
margin: auto;
padding: 0px;
}

#bar_left {
float: left;
width: 24px;
height: 29px;
background-color: blue;

margin: auto;
padding: 0px;
text-align: right;
}

#bar {
float: left;
width: 920px;
height: 29px;
background-color: yellow;
margin: auto;
text-align: right;
}

#bar_right {
float: right;
width: 24px;
height: 29px;
background-color: blue;
text-align: right;
}

#cont_body {
width: 968px;
/*background-color: white;*/
overflow:hidden;
}

#body_left {
float: left;
width: 24px;
background-color: yellow;
}

#body {
float: left;
width: 900px;
min-height: 400px;
height: auto !important;
height: 460px;
background-color: green;
text-align: left;
padding:10px;
}

#body_right {
float: left;
width: 24px;
background-color: yellow;
padding: 0px;
}

#footer {
width: 948px;
height: 35px;
background-color: blue;
text-align: center;
color: #B4B4B4;
font-size: 11px;
padding: 10px;
}
</style>
<body>
<div id="contenitore">
<div id="header"></div>
<div id="bar_left">&nbsp;</div>
<div id="bar">
<input onfocus="if(this.value=='Username'){this.value=''}" onblur="if(this.value==''){this.value='Username'}" name="username" value="Username" type="text" size=20 style="width: 149px"/>
<input onfocus="if(this.value=='Password'){this.value=''; this.type='password'}" onblur="if(this.value==''){this.type='text'; this.value='Password'}" name="pass" value="Password" type="password" size=20 style="width: 149px"/>&nbsp;&nbsp;<input type="submit" name="login" type="button" value="Login" />
</div>
<div id="bar_right">&nbsp;</div>
<div id="cont_body">
<div id="body_left">&nbsp;</div>
<div id="body">
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br />
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB<br />
CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
</div>
<div id="body_right">&nbsp;</div>
</div>
<div id="footer">PROVA prova PROVA prova PROVA prova PROVA prova PROVA prova PROVA prova </div>
</div>
</body>
</html>


Indenta correttamente anche il codice html
Fede 88
06-11-2009, 13:42
Quindi dove ho grandezze fille ed inserisco il padding sottraggo quel numero alla dimensione totale, mentre se ho grandezze variabili non da problemi giusto?
MEMon
06-11-2009, 13:44
Bhe se le grandezze possono variare non ti interessa che grandezza sia no?
Se è fissa si, se hai un contenitore di 100px, il contenuto non può sforare i 100px, quindi occhio ai padding e margini vari che vanno aggiunti alla dimensione impostata.

Firefox permette che il contenuto sia maggiore del contenitore, IE no.
Fede 88
06-11-2009, 13:48
A ok, ecco perchè su firefox faceva più casini rispetto a IE...

Per il margin ho messo tutti su auto, non dovrebbe crearmi problemi, no?


OT: ho visto che a inizio della pagina che hai postato c'era questa stringa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Una cosa simile me la crea quando creo un file con frontpage, è utile/neccessaria o si può anche non mettere in una pagina html?
MEMon
06-11-2009, 13:51
E' necessaria
http://www.w3.org/QA/Tips/Doctype

Stai lontano da frontpage :asd:
chano
06-11-2009, 13:52
se ho capito bene il problema è successo anche a me e avevo risolto con l'uso della box sizing settata a border-box in modo che ie e ff interpretassero nello stesso modo le dimensioni dei box -> https://developer.mozilla.org/en/CSS/box-sizing

ma a quanto pare hai gia trovato soluzione :D
Fede 88
06-11-2009, 13:56
Capito...

Ho fatto una prova per il padding ma crea ancora problemi:

Ho fatto una prova su questa cella:

#bar {
[CODE]float: left;
width: 920px;
height: 29px;
background-image: url(imm/bar.jpg);
margin: auto;
padding: 0px;
text-align: right;
}

l'immagine bar.jpg è un immaigne alta 29pixel come la cella.

Mi serve distanziare dalla parte superiore di 2pixel, quindi l'ho modificato in questo modo:

#bar {
[CODE]float: left;
width: 920px;
height: 27px;
background-image: url(imm/bar.jpg);
margin: auto;
padding: 2px 0px 0px 0px;
text-align: right;
}
Ho aggiunto 2 pixel dal bordo superiore, quindi ho diminuito l'altezza della div di 2 pixel (da 29 a 27). Il fatto è che così lo sfondo non è più su tutta la cella, infatti c'è una linea vuota di 2pixel sul fondo della div.

EDIT: Settando l'altezza a 27 IE8, a differenza di Firefox mi vede la div alta 27 anche se aggiungo 2px di padding.
MEMon
06-11-2009, 14:04
Io sto provando sul codice che ti ho postato, e funziona perfettamente, e IE8 non vede la #bar alta 27px ma 29.
Inoltre se anche avessi la #bar più grande dell'immagine, con il css che hai postato l'immagine si ripeterebbe fino a coprire l'intero spazio, non vedresti quindi nessun spazio vuoto.
Fede 88
06-11-2009, 14:07
Mi sono accorto che i problemi che dava internet explorer erano dovuti al fatto che non mettevo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in alcuni file... :doh:

Iniziavo a non capirci più niente.

Grazie a tutti per l'aiuto finalmente ho risolto. :rolleyes:
MEMon
06-11-2009, 14:08
Guarda se ti interessa...
http://allejp.netsons.org/varie/untitled.html
il codice è quello che ti ho postato, ho modificato la #bar così

#bar {
float: left;
width: 920px;
height: 27px;
background-color: yellow;
background-image:url(image/Immagine.png);
text-align: right;
padding-top:2px;
}
MEMon
06-11-2009, 14:09
Mi sono accorto che i problemi che dava internet explorer erano dovuti al fatto che non mettevo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in alcuni file... :doh:

Iniziavo a non capirci più niente.

Grazie a tutti per l'aiuto finalmente ho risolto. :rolleyes:
ecco vedi :D
Fede 88
06-11-2009, 14:19
E meno male che nel esempio hai scritto quella stringa di codice, se no tra un mese sarei stato ancora fermo a questo punto.