Hjelp til å fikse en feil med <table> i IE8

[R@ge]

Hei...

 

Har et litt snedig problem med en nettside jeg har satt opp.

 

Den ser helt riktig ut i alle browsere inkludert IE6 g IE7, men har en kjedelig bøgg i IE8.

 

Litt usikker på hva jeg kan gjøre for at den kan vises riktig i IE8 og håper noen kan hjelpe.

 

Se vedlagte bilder:

 

Firefox, Crome, IE6, IE7 osv.

 

Internet Explorer 8 bøgg

 

Har forsøkt å google litt, men kan ikke si jeg ble noe klokere :/

Endret 21. mars 2010 av R@ge

[PerB]

Bildene er til liten hjelp. Hvordan er kodingen? Den kan vise hva som er galt. Og det er bare den vi kan benytte for å hjelpe deg.

[R@ge]

Bildene er til liten hjelp. Hvordan er kodingen? Den kan vise hva som er galt. Og det er bare den vi kan benytte for å hjelpe deg.

jau... det var jo sant

 

sjekk ut

 

Tusen takk for hjelp

[funkyboy]

Det jeg umiddelbart ser, er at det ikke er en eneste grunn til å benytte table for å få til ønsket layout. Isteden for en tabell bør du legge inn fire enkeltstående dividere med (omtrentlig) 25% bredde som i tillegg benytter float: left. På denne måten lager du god markup, som du sannsynligvis ikke vil oppleve å få noen problemer med.

Endret 23. mars 2010 av bardoien

[EivindJ]

Jeg finner uansett ikke hvor på nettstedet det er, jeg ... disse fire kolonnene.

 

Støtter for øvrig bardoiens forslag. Bedre kode

[R@ge]

Jeg finner uansett ikke hvor på nettstedet det er, jeg ... disse fire kolonnene.

 

Støtter for øvrig bardoiens forslag. Bedre kode

 

Under alle nyheter og artikler.

 

Jeg har brukt metoden som dere tipset om, så nå fungerer det i alle nettlesere inkludert IE8..

 

TUUUUUSEN TAKK

[LostOblivion]

Det jeg umiddelbart ser, er at det ikke er en eneste grunn til å benytte table for å få til ønsket layout. Isteden for en tabell bør du legge inn fire enkeltstående dividere med (omtrentlig) 25% bredde som i tillegg benytter float: left. På denne måten lager du god markup, som du sannsynligvis ikke vil oppleve å få noen problemer med.

Slenger meg på her jeg.

 

Hvordan kan jeg benytte flyt-elementer inni en boks som skal legge seg ved siden av hverandre horisontalt uten at elementet de er i får en auto-høyde på 0?

 

<ul id="menu">
 <li>Noe</li>
 <li>Noe annet</li>
 <li>Nest siste<li>
 <li>Siste</li>
</ul>
---
ul#menu {
 border: 1px solid black;
}
ul#menu li {
 float: left;
}

 

En løsning jeg alltid har brukt som alltid funker, er å legge en <div style="clear: both;"></div> bak alle flyt-elementene inni boksen de flyter i, men det er ikke en god løsning semantisk sett.

 

<ul id="menu">
 <li>Noe</li>
 <li>Noe annet</li>
 <li>Nest siste<li>
 <li>Siste</li>
 <div style="clear: both;"></div>
</ul>
---
ul#menu {
 border: 1px solid black;
}
ul#menu li {
 float: left;
}

 

En annen løsning er å sette overflow: hidden på foreldre-elementet til flyt-elementene, men dette funker dårlig om man har drop-down-meny ol.

[funkyboy]

Slenger meg på her jeg.

 

Hvordan kan jeg benytte flyt-elementer inni en boks som skal legge seg ved siden av hverandre horisontalt uten at elementet de er i får en auto-høyde på 0?

 

Du bør ta en titt på en "css-hack" som kalles Clearfix. Har du fire dividere som i dette tilfellet, som er plassert inni en parent container-div, vil denne (med class="clearfix") i de fleste tilfeller fungere utmerket. Float, clear og lignende er av og til klønete å få til, men dersom man benytter clearfix (eller lignende prinsipper), går det oftest som en lek.

 

Grunnen til dette, er som du ser av clearfix- klassen, at det i all hovedsak settes et usynlig punktum etter innholdet, som er definert med clear: both.

 

content: ".";

 

Høyden på punktumet er ellers satt til 0, slik at det i praksis vil fungere slik at alt innholdet i divideren holder seg på innsiden. Ellers er det selvsagt også tatt høyde for eldre nettlesere etc. i tilpasningen. :!:

[Jonas]

[..]

Eller du kan bare unnlate å bruke hacks og heller sette overflow: auto på parent-elementet. (Fungerer neppe i IE6)

Endret 24. mars 2010 av Jonas

[LostOblivion]

[..]

Eller du kan bare unnlate å bruke hacks og heller sette overflow: auto på parent-elementet. (Fungerer neppe i IE6)

Du gravde din egen grav. overflow: auto; er også en hack.

 

Takk for tips bardoien. Her gjelder det å gå for den beste hacken med andre ord.

[Jonas]

Overflow er en CSS-egenskap som faktisk beskriver hva som skjer når elementer flyter utenfor andre. Det er ingen hack, men en konsistent og definert egenskap. (Usikker på om akkurat float clearing er nevnt i W3 sin dokumentasjon, men det er i alle fall implementert i alle nettlesere minus IE6 - etter min bekjentskap)