[CSS] Problema con Padding

[Fede 88]

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]

Originariamente inviato da Fede 88

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

scusate, sarà l'ora e le 4 ore di sonno

[Fede 88]

In pratica mi serve sapere se c'è un metodo alternativo al padding per la spaziatura interna.

[chano]

Originariamente inviato da Fede 88

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

[Fede 88]

Originariamente inviato da chano

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

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

Perchè sotto ho uno sfondo sfumato.

[chano]

Originariamente inviato da Fede 88

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 sti giorni son fuso lol

[Fede 88]

Perfetto, grazie mille, faccio qualche prova poi ti dico...

[Fede 88]

Non capisco come creare dei bordi trasparenti.

Ho provato in questo modo ma non funziona.

border: top;
border-color: trasparent;
borded-width: 5px;

[kurts]

al contrario del background non mi pare che border accetti come valore "transparent"

[Fede 88]

É 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]

Se riesci a postare del codice che riproduce l'errore è meglio, perchè il comportamento da te descritto non è normale.

[MEMon]

Originariamente inviato da Fede 88

É 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 se ti interessa di come viene interpretato il box model con i css.

[Fede 88]

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]

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]

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]

Fai una cosa fatta bene, isolami il problema, metti i colori e fammi capire.
Non farmi lavorare per te grazie.

[Fede 88]

Ok, adesso creo un esempio che si capisce e poi te lo posto.

[Fede 88]

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]

Questo è quello che dovrei visualizzare giusto?

Il padding deve essere applicato al div verde(body)?

[kurts]

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?