CSS: KUTXA EREDUA

CSSri esker posible dira zonalde errektangularrak definitu <div> adabegiaren bitartez. Izenak ematen zaie <div> izeneko elementuei eta estilo orrian bere ezaugarriak definitu daitezke.

Webguneen diseinatzaileak askotan arazo bat topatzen dute. Internet Explorer, gehien erabilitako web ikustatzailea, ez du kutxaren zabalera besteak bezala neurtzen, hori dela eta Internet Explorerrek, padding eta border propietateak dituzten kutxak ikusi beharko litzatekeen baina txikiagoa agertarazten du. Azpian dagoen ezkerreko marrazkian, bi ereduen arteko konparazioa egiten da. Normalean, eta estandarrek diotenez, zabalera propietatea, kutxa baten barruko edukiaren zabalera da. Baina Internet Explorer Zabaleraren neurketan "border" eta "padding" dimentsioak barneratzen ditu. hori dela eta kutxak era ezberdin batean agertzen da. Hori horrela, egin saiakera bat. Begiratu weborri hau, lehen firefoxekin, eta gero Internet Explorerrekin. Ikusiko duzunez, Ezkerretik eskuinera, Firefox-en kutxa haundituz doa. Internet Explorerren kasuan, dimentsioak ez dira aldatzen, bertan, kutxa barruraka eraikitzen dela ematen du.

#kutxa1
#kutxa2
#kutxa3
#subkutxa4

#kutxa1 {
float:left;
margin-top:40px;
margin-left:20px;
height: 100px;
width: 140px;
border:1px solid black; }
#kutxa2 {
float:left;
margin-top:40px;
margin-left:20px;
height: 100px;
width: 140px;
border:1px solid blue; }
#kutxa3 {
float:left;
margin-top:40px;
margin-left:20px;
height: 100px;
width: 140px;
border:10px solid red;}

#kutxa4 {
float:left;
margin-top:40px;
margin-left:20px;
height: 100px;
width: 140px;
border:10px solid green;
padding:20px;}


 

Dokumentu Definizioaren konponbidea

Hala ta guztiz ere, arazo honek ba du konponbide zuzen bat. Internet Explorer, edozein webarakatzailea bezala, bere erara interpretatzen du html kodea eta berari atxikitutako estilo orria. Baina, dokumentuaren mota eta formatoa zein den ongi azalduko balitzaioke emaitza ezberdina izan daiteke.

Horixe egin dugun, beste orri batean lau kutxa horiek jarri ditugu baia beste orri hortan ondoan ikusten duzun kode zatia. Goi goian, <html> adabegiaren aurretik ipini diogu. Emaitza guztiz ezberdina da, hor Internet Explorer estandarren arabera interpretatzen du kutxa eredua eta espero dugun bezala ikusten da.

Internet Explorer 6 bertsioarekin arazoa honela konpondu dugu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
Begiratu

Box Model Hacks

Ba dira beste konponbideak, alegia, ikustatzaile ezberdinen arteko erroretan oinarrituz kutxa eredua hackeatu dezakegu. Honek balio dezake Internet Explorer 5 kasurako, non nahiz eta dokumentu motako definizioa ipiniz kutxa behar bezala ez den interpretatuko arriskua dagoen. Hala eta guztiz ere nik ez dut sorte izan ondoan azaldutako trikimailuekin.

Tantek Hack

div.tantek {
border:20px solid;
padding:30px;
background: #ffc;
}

div.tantek {
width:400px;
voice-family: "\"}\"";
voice-family:inherit;
width:300px; }

Bukatzeko beste arau bat aplikatu behar dugu, Opera5ekin arazoa ez sortzeko:
html>body .tantek {
width:300px; }

zerbait

The Tan Hack

HTML:
< body>
< div>content goes in here</div>
< /body>

CSS:
div.tan {
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px; }

* html div.tan { /* This is the Tan hack */
width: 130px;
w\idth: 100px; }

The Tan Hack (II)

div { width:100px;}
div { \width:100px; w\idth:100px;}

zerbait