Box model hack

[paolo bosani]

non mi ricordo se imposto il width o height in %, come applico tantek, e se ho definito margin=0 e padding=0 devo applicare tantek?

[span]

margin non centra, è border e padding

con la percentuale secondo me puoi solo annidare i box per ottenere lo stesso effetto dell'hack

leggi il primo esempio di questa pillola

[span]

Originariamente inviato da paolo bosani
e se ho definito border=0 e padding=0 devo applicare tantek?

no

[Marcolino's]

Piuttosto che utilizzare tantek, oramai in disuso per via della complessità, usa questi metodi:

Min-height o delle altezze

min-height: 100px;
height: auto !important;
height: 100px;

Mozilla e derivati, arrivati a !important, saltano l'istruzione successiva, quindi rimane il min-height, mente IE non riconosce !important e legge la successiva, cioè height: 100px.
Serve per implementare la tecnica delle altezze minime in IE, nel quale height, funziona proprio come min-height, mentre negli altri browser, min-height vuol dire una cosa, e height un'altra.

Width o delle larghezze

width: 100px; /* Mozilla e derivati */
w/dith: 102px; /*vecchi Opera come il 5 */
width/: 103px; / IE */

In pratica la barra viene ignorata da alcuni browser i quali impostano il valore, mentre gli altri saltano l'istruzione non comprendendola e prendendo il primo valore valido per loro.

Ci sono altri modi per "fregare" IE, molto pratici, per esempio il modo illustrato qui sotto:

body { font-size: 0.9em; }

* html body {
font-size: 0.8em;
}

* html body h1 {
imostazioni varie
}

IE renderizza la dimensione dei font circa 2 pixel più grande che in altri browser, questo può andare bene, ma a volte è meglio diminuirla, in questo modo IE legge la seconda serie di istruzioni prendendone il nuovo valore.
Il terzo esempio serve per far vedere che si possono modificare qualsiasi elemento o selettore, ma bisogna sempre iniziare dall'elemento più in alto, ovvero da html e quindi scendere.

Infine ci sono gli hack per Opera, anche lui ha i suoi "capricci", specialmente le versioni vecchie intorno alla 5.

html>body {
font-size: 1em;
}

Non lo commento, perchè sostanzialmente è identico a quello per IE, solo cambia il modo di assegnazione, non più l'asterisco prima di ogni elemento, ma il selettore di assegnazione.

A se usi questi ultimi hack, ti conviene sempre metterli alla fine del foglio di stile.



PS se segui questo link ti porta ad una serie di pagine sul sito di tantek, che ti spiega meglio di me, tecniche di hacking dei CSS.

[paolo bosani]

Originariamente inviato da span
margin non centra, è border e padding

con la percentuale secondo me puoi solo annidare i box per ottenere lo stesso effetto dell'hack

leggi il primo esempio di questa pillola

scusa stavo facendo un'altra cosa e non mi sono accorto di aver scritto margin invece di border

[Marcolino's]

border: 0 no, border: none sì

[span]

Originariamente inviato da Marcolino's

molto interessanti, ma potevi almeno rispondergli

[span]

Originariamente inviato da Marcolino's
border: 0 no, border: none sì

perché border: 0 no? :master:

[paolo bosani]

Originariamente inviato da Marcolino's
Piuttosto che utilizzare tantek, oramai in disuso per via della complessità, usa questi metodi:

Mozilla e derivati, arrivati a !important, saltano l'istruzione successiva, quindi rimane il min-height, mente IE non riconosce !important e legge la successiva, cioè height: 100px.
Serve per implementare la tecnica delle altezze minime in IE, nel quale height, funziona proprio come min-height, mentre negli altri browser, min-height vuol dire una cosa, e height un'altra.



In pratica la barra viene ignorata da alcuni browser i quali impostano il valore, mentre gli altri saltano l'istruzione non comprendendola e prendendo il primo valore valido per loro.

Ci sono altri modi per "fregare" IE, molto pratici, per esempio il modo illustrato qui sotto:

IE renderizza la dimensione dei font circa 2 pixel più grande che in altri browser, questo può andare bene, ma a volte è meglio diminuirla, in questo modo IE legge la seconda serie di istruzioni prendendone il nuovo valore.
Il terzo esempio serve per far vedere che si possono modificare qualsiasi elemento o selettore, ma bisogna sempre iniziare dall'elemento più in alto, ovvero da html e quindi scendere.

Infine ci sono gli hack per Opera, anche lui ha i suoi "capricci", specialmente le versioni vecchie intorno alla 5.

Non lo commento, perchè sostanzialmente è identico a quello per IE, solo cambia il modo di assegnazione, non più l'asterisco prima di ogni elemento, ma il selettore di assegnazione.

A se usi questi ultimi hack, ti conviene sempre metterli alla fine del foglio di stile.



PS se segui questo link ti porta ad una serie di pagine sul sito di tantek, che ti spiega meglio di me, tecniche di hacking dei CSS.

Mii sei una fonte

[Marcolino's]

Riferito a span.
Perchè non c'è: http://www.w3.org/TR/CSS2/box.html#border-properties anche se alcuni browser lo accettano.