Avatar billede mik789 Nybegynder
26. august 2002 - 16:01 Der er 4 kommentarer og
1 løsning

border beregning

Det lader til at den samlede bredde af en <div> med borders beregnes forskelligt i IE 6 og IE 5. Se her:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body style="margin:20px">
<div style="width:200px; height:100px; background-color:#ffcc00;">&nbsp;</div>
<div style="width:194px; height:100px; background-color:#ccff00; border: 3px solid blue;">&nbsp;</div>
</body>
</html>

Tjek evt. her: www.dahr.dk/Web/borders.html

Dette bliver rigtigt i IE 6: De to <div>'er flugter vertikalt. Da div 2 samlet har 6px border i bredden skal der trækkes 6px fra div'ens width for at få dem til at flugte.

Men i IE 5 flugter de ikke. Div'en uden borders bliver breddere samlet end div'en med, fordi div width er forskellig. Her skal borders ikke tages med i den samlede bredde, og width skulle sættes til 200px i begge div'er for at flugte.

Hvordan kommer man omkring dette så de to <div>'er kommer til at flugte vertikalt både i ver. 5 og 6?
Avatar billede mik789 Nybegynder
26. august 2002 - 16:02 #1
ups, skal være www.dahr.dk/Web/border.html - altså border uden s
Avatar billede pelkjaer Nybegynder
26. august 2002 - 18:10 #2
Jeg tror din workaround må være at angive border på div 1 også, kan jo bare angive farven så den ikke ses (altså samme som div).

Så vidt jeg ved kan du også bruge relativ størrelse for at omgå dette problem (fx %), men det er vidst kun et problem i IE5 samt IE5 på Mac.

W3C siger ihvert fald at padding og border skal lægges til i bredden, så det er IE6 der viser korrekt.
Avatar billede mik789 Nybegynder
26. august 2002 - 22:01 #3
jeg kan godt se din idé, men hvis man har en række div'er der skal flugte lodret og har tekst i nogle af dem men ikke i alle, er det et problem at lave "usynlige" borders, fordi de samtidig begrænser hvor meget man så kan skrive ud til kanten, dvs. de kommer til at virke som en slags falsk padding for indholdet i de div'er der har fået usynlig border. i mit tilfælde er der nok ingen vej uden om endnu et browserspecifikt stylesheet.
Avatar billede mik789 Nybegynder
29. august 2002 - 06:40 #4
pelkjaer> du havde jo faktisk en løsning, selv om jeg ikke brugte den, så læg lige et svar ;-)
Avatar billede pelkjaer Nybegynder
29. august 2002 - 09:17 #5
ok da.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester