Avatar billede voller Nybegynder
22. september 2002 - 14:16 Der er 8 kommentarer og
2 løsninger

CSS i NS kontra IE

Jeg sidder og leger lidt med CSS, mest for legens skyld. Jeg er stødt ind i et problem. Jeg har følgende kode:

#tekst {
background-color: #cccccc;
background-image: none;
position: absolute;
visibility: visible;
width: 528px;
left: 200px;
top: 0px;
z-index: 2;
padding: 20px;
border-top-width: 0px;
border-right-width: 2px;
border-bottom-width: 0px;
border-left-width: 2px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
border-left-color: #ffffff;
}

Problemet er, at border og padding bliver opfattet meget forskelligt i NS og IE. NS gør det, at den lægger rammen og padding uden på boksen, så boksen bliver bredere end width er angivet til. Dvs. at boksen i NS bliver 2*2px + 2*20px + 528px = 572px bred.

IE gør det, at den lægger rammen og padding ind i boksen, så den width (528px) jeg har angivet holdes.

Kan man gøre noget ved det problem?

Mvh. Voller.
Avatar billede jakoba Nybegynder
22. september 2002 - 14:27 #1
lægge border og padding på en <div inden i cellen istedet for på cellen selv.
Avatar billede voller Nybegynder
22. september 2002 - 14:48 #2
Tjah, tjoh. Det er jo rigtigt nok. Men man kan ikke ordne det i ét <div>? Ikke at det betyder så meget for mig, det var bare for overskuelighedens skyld.

I hvert fald tak for hjælpen. Opret et svar, hvis du vil have points.

Mvh. Voller.
Avatar billede mik789 Nybegynder
22. september 2002 - 17:41 #3
"Width" i css skal forstås som "content width", dvs. bredde minus margin, padding og border.

"The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height." (Fra: http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions)

Men IE5- sætter (ukorrekt) content width = width, dvs. at "width" skal angives til den samlede bredde (summen af indre bredde + margin + padding + border), hvorimod width i IE6 og NS6 KUN er content width, dvs. width angives til boksens samlede mål minus margin, padding og border.

- Og tilsvarende for "height" selvfølgelig...
/mik
Avatar billede mik789 Nybegynder
22. september 2002 - 17:47 #4
jeg har selv haft sp. op før. se: http://www.eksperten.dk/spm/250464
der kan du også se en test jeg har lavet som viser forskellen (når du ser kilden)
Avatar billede mik789 Nybegynder
25. september 2002 - 15:12 #5
vi har vel egentlig svaret dig. der er forskellige workarounds du kan bruge, men ingen der virkelig løser problemet
Avatar billede voller Nybegynder
25. september 2002 - 15:56 #6
Faktisk fandt jeg lidt ud af det med hjælp fra en fyr i en nyhedsgruppe. Det viser sig, at vis man i ikke bruger følgende prolog i XHTML-dokumenter, vil IE6 og NS7 opføre sig ret ens i tolkningen af CSS:
<?xml version="1.0" encoding="iso-8859-1"?>

Så det er en løsning uden at bruge workarounds. Så kommer der lidt problemer i IE5, men det kunne løses ved at bruge et hack.
Avatar billede mik789 Nybegynder
25. september 2002 - 18:17 #7
"ved at bruge et hack"...? hvad mener du, kan du forklare nærmere? det vra netop IE5 der var problemet for mig.
Avatar billede voller Nybegynder
25. september 2002 - 18:26 #8
Se Rune Glerups indlæg i dk.edb.internet.webdesign.html af d. 22/09 kl. 17:17. Han har forklaret det bedre end jeg kan.
Avatar billede mik789 Nybegynder
25. september 2002 - 21:07 #9
tak for tippet. det var smart, men dog utroligt som man skal sno sig omkring browserfejl for at det lykkes. jeg havde faktisk opgivet og lavet et specifikt IE5.x css, men det er så ikke nødvendigt.
Avatar billede mik789 Nybegynder
27. september 2002 - 14:05 #10
voller> hvis du stadig kigger herind en gang imellem: nu er det mig der har problemer. kan ikke får den der box model hack til at virke. se sp.http://www.eksperten.dk/spm/263178 og læg gerne et svar eller vis mig hvordan du gjorde ;-)
/mik
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

IT-JOB

Politiets Efterretningstjeneste

IT Sikkerhedsarkitekt i PET

Kræftens Bekæmpelse

IT-driftsleder

KMD A/S

Projektleder

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Senior specialister (DevSecOps) til Forsvarets nye Digitale Backbone