CSS Floaters (Sidebar + Innhold), IE bug

[g0mpen]

Hei!

 

Jeg holder på å jobbe med en side på http://laniban.com/interlunium/.

Som dere ser inneholder hovedboksen to mindre bokser som skal være til meny og innhold. I Firefox ser den ut akkurat slik jeg ønsker at den skal se ut, med 5px margin mellom hver boks. I Internet Explorer derimot, blir den høyre boksen flytta over inntil den venstre, slik at det blir ingen margin mellom de, men dobbel margin til høyre for de.

 

Jeg vet at dette er en bug med Internet Explorer, faktisk den samme buggen som gjorde at boksene som hadde margin eller padding fikk forskjellig størrelse i forskjellige nettlesere, og jeg har lest på flere sider om hvordan en kan fikse dette. "Hacks" fikk jeg ikke til å virke, og det endte da med at jeg brukte følgende kode for å få riktig størrelse på boksene også i IE (jeg vet forresten at den ikke er validert CSS):

 

{
width: 130px;
width: "140px";
}

 

Problemet med den doble marginen på den høyre siden, og den manglende marginen på den venstre siden av den høyre boksen gjenstår immidlertid. Hvordan kan jeg fikse dette? Jeg har prøvd et utall av forskjellige kodesnutter for å legge til margin eller padding på den ene eller den andre siden av den høyre boksen, men det ender alltid opp med at det skjærer seg i IE på en eller annen måte, for eksempel at hele høyre boksen blir presset ned under venstreboksen.

 

Kan noen hjelpe meg med å fikse dette?

Endret 2. august 2006 av g0mpen

[haugsand]

Prøv å legg til display: inline; på de elementene som floates. Det bør iallfall fjerne den doble marginen, om jeg har lest innlegget godt nok.

[g0mpen]

Jeg har prøvd display: inline; uten merkbart resultat, men kanskje jeg ikke satte det på riktig floater (har forøvrig prøvd det på flere av dem, men har skifta mye kode så jeg er ikke sikker lenger) Hvis noen kunne tittet på koden og funnet ut hvilken floater det trengs på (det er flere inni hverandre noen steder), så hadde det vært fint.

[g0mpen]

Virker ikke med display: inline; =(