Width og height

[FuLu]

Skrev egentlig et langt innlegg her, men haha , leste nøye og fant ut at det var IE som tok feil likevel. Da tenker jeg på box-modellen hos w3c. Der står det faktisk at width og height i css bare gjelder content-width/height, og at "box'ens" width og height er content+padding+border og margin. Så da oppfører opera og mozilla seg riktig likevel

 

Men likevel så synes jeg IE sin måte å håndtere det på er mer brukervennelig for oss webdesignere, for adder jeg padding til en box, så slipper jeg å gjøre noe mere enn det. Men hvis jeg vil at box'ens width skal være 100px f.eks, så må jeg endre width med -16px hvis jeg vil ha padding: 8px;. Men dette gjelder jo bare for mozilla og opera, for IE kan jeg droppe det. Problemet blir da, at jeg må ha 2 versjoner av stylesheet koden for å få det visuelt riktig i begge gruppene. Way to go blæh!

[haugsand]

Med en strukturert kode slipper du dette problemet lett. Jeg strev med padding+width da jeg brukte tabeller til layout, men etter jeg gikk over til css, har jeg funnet en god måte å sette opp koden på.

 

Jeg plasserer alt innhold med <div>, som er angitt med bredde, men ingen padding, og ofte ingen margin heller. Innenfor har jeg <p> og <h1> til å vise innholdet, og siden begge er blokkelementer, strekker dem seg over hele <div>en. Men, siden jeg i mange tilfeller trenger luft mellom teksten og kanten av <div>, legger jeg til margin for å fikse det. Padding kan også trenges i blant, siden enkelte <p> trenger en border, men aldri width.

[FuLu]

Jo, men til design hvor jeg har fixed width og bruk av absolute position, kommer dette problemet frem. Bør kanskje tenke litt mer på hvor jeg bruker padding og border osv osv, men likevel irriterende å må ta så mye hensyn Men nå har jeg løst problemet så og si med denne koden øverst i stylesheet fila mi:

<?php
function detectAgent($agent)
{
return strpos(strtolower($_SERVER['HTTP_USER_AGENT']), strtolower($agent));
}
$IEAgent = false;
if(detectAgent("msie") !== false && detectAgent("opera") === false && detectAgent("mozilla/5") === false)
{
$IEAgent = true;
}
header("Content-type: text/css");
?>

 

Så bruker jeg stylesheet.php istedet for .css på <link>

 

Så skriver jeg f.eks i stylesheet.php et eller annet sted:

width: <?php echo ($IEAgent ? 12 : 10) ?>px;

Hvor 12px er for IE og 10px er for alle andre nettlesere (opera/mozilla i mitt tilfelle). Eksemplet kunne være at border-left/right var 1px.