CSS Attributo A con padding

**Lollys** · 02-10-2004, 17:07

Ho Mozzilla che mi sballa tutto.

Ho una colonna DIV di 200px con allineamento del testo al centro.

Poi al suo interno ci sono dei link.

<a>1</a>
<a>2</a>
<a>3</a>

div a{
display: block;
width: 100px;
margin: 5px auto;
background: #ffffcc;
text-align: left;
}

Ora giustamente il testo forma un blocco centrato di 100px con il testo spostato a sinistra, e fin qui è tutto ok su tutti i browser.

Però vorrei che quel testo fosse + a destra di 10px
Se metto un
padding: 0 0 0 10px
su ie si sposta bene ed il quadrato rimane invariato, mentre su mozzilla si sposta il testo ma si allunga il blocco di 10px come mai ?

Potrei risolvere mettendo uno span all'interno ma non mi aggrada!

Qualche suggerimento ?

**dotty78** · 08-10-2004, 10:07

Sposto in CSS e XHTML.

**jesus** · 08-10-2004, 10:53

Io credo che il browser che sbaglia sia IE, difatti la regola sul box model dice che la larghezza totale di un box è data dalla somma delle larghezze di:
bordo sx + padding sx + width + padding dx + bordo dx

Che versione di IE hai? Se stai usando la 6 assicurati di specificare un doctype, altrimenti sbaglia nel gestire le dimensioni dei box.

Ciao.

**Lollys** · 08-10-2004, 10:58

Veramente il problema è su Mozilla e non IE, IE si vede bene.

Quello che non capisco è che se il tag A diventa un Blocco di 100px con una sola lettera all'interno allineata a sinistra, quindi a destra ne ha di spazio libero finchè vuole, solo che se lo sposto con un padding-left 10px ecco che si sposta la lettera però si allunga anche il box.

Non capisco. :master:

**Mich_** · 08-10-2004, 11:09

Mi risulta che ha ragione jesus.

E` IE che sbaglia a fare i conti.
In pratica aggiungendo un padding di 10 px, + width 100px la larghezza totale diventa 110 px.

Prova comunque con margin, anziche` padding: in tal caso credo che i due browser si comportino allo stesso modo.

Per trucchi di questo tipo, avevo visto info utili, forse sul sito di constile.org (o altri siti simili, che trovi tra i "link utili" di questo forum).

**jesus** · 08-10-2004, 11:15

Originariamente inviato da Lollys
Veramente il problema è su Mozilla e non IE, IE si vede bene.

Quello che non capisco è che se il tag A diventa un Blocco di 100px con una sola lettera all'interno allineata a sinistra, quindi a destra ne ha di spazio libero finchè vuole, solo che se lo sposto con un padding-left 10px ecco che si sposta la lettera però si allunga anche il box.

Non capisco. :master:

Ti assicuro che mozilla "legge" perfettamente il codice... è IE che sbaglia.

Hai messo un doctype all'inizio della pagina? Se si quale?

**Lollys** · 08-10-2004, 11:46

Giusto il doctype scusami.

XHTML 1.0 Strict

faccio la prova del nove, poi torno !

**Lollys** · 08-10-2004, 11:57

Ecco, ho fatto una prova solo con gli interessati.

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head></head>

  <body style="text-align: center;">
	
	<div style="margin: 10px; width: 300px; padding: 20px; background: #c6c6c6;text-align: center;">
	<a style="display: block; margin: 0 auto; width: 200px; background: #ffffcc; font-weight: bold; text-align: left;">PRova</a>
	</div>
	
  </body>
</html>

Se lo provi vedrai un blocco grigio con ll'interno il blocco giallo A se aggiungi a questo A il padding-left: 40px; noterai che si sposta ancheil blocco gialllo.

**jesus** · 08-10-2004, 12:11

Ti assicuro che il browser che interpreta correttamente il tuo codice è Mozilla.

IE ha un problema mettendo questa riga:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>

Infatti se la togli IE interpreta il codice come mozilla e cioè correttamente.

Non ti saprei dire perchè la prima riga da fastidio a IE, ma ricordo che anche a me ha dato lo stesso problema una volta.

Ciao.

**Lollys** · 08-10-2004, 13:21

Ma l'hai provato ?
Cè qualcuno che ha la possibilità di provarlo ?

L'hò riprovato perchè mi hai fatto venire dei dubbi, cosi scritto su IE và benissimo e su Mozilla no, se tolgo l'intestazione Xml su IE scazza ed anche su Mozilla !!

:master: Non ci capisco nulla.

Discussione: CSS Attributo A con padding

Strumenti discussione

Ricerca discussione

Visualizza

CSS Attributo A con padding

Permessi di invio