Problemer med <div> i firefox

[yoman99]

Hei!

 

Jeg driver og lager et nettsted, frivind.no, men har litt problemer. Alt ser greit ut i Opera og IE men ikke i Firefox. Problemet er at footeren sin bakgrunn og border starter for helt oppe der hvor innhold-diven starter. Teksten i footeren står altså på riktig sted, men resten er kluss.

 

Skjønner ikke hvorfor og blir så oppgitt når de nettleserne ikke kan støtte css på samme måte!

 

Noen som kan hjelpe? Tar gjerne imot feedback på resten av siden også!

[Torkild]

Du gjør bare følgende:

1. Smører deg en brødskive

2. Tegner et esel

3. Viser oss litt kode og et eksempel

[yoman99]

Som oppgitt over er adressen frivind.no ! Koden er jo da selvsagt der, og man må inn på siden via firefox for å se problemet!

 

Eselet ble fint

[Runar]

Siden du var for lat til å lage en klikkbar link, lager jeg en her: http://frivind.no

 

Tilbake til siden din. Først og fremst, float: down finnes ikke Enten er det left, right eller none.

 

Edit: Footeren din på vel ha clear: both, må den ikke? Prøv å legge til den koden i #footer {}.

Endret 25. februar 2007 av Runar

[yoman99]

Takk for hjelpen, men det hjalp ikke stort! Med clear: both; ble det bare enda mer kluss med bakgrunnen, men det opprinnelige problemet var tilstede akkurat som før.

 

Fjernet float: down, det var vel bare et desperat forsøk på å få til noe. Skjønner ikke hva som er feil da, bare firefox som ikke klarer å vise den som jeg vil.

[Runar]

Det du egentlig vil, er å plassere Footer div'en på bunnen?

[yoman99]

Nei, den er riktig plassert. Men footeren har en top-border som ikke vises riktig i firefox. I Opera og IE er alt i sin skjønneste orden, men i firefox virker det som den borderen blir flyttet opp over innhold-diven slik at det blir dobbel der isteden!

[Runar]

Det er fordi footeren av en eller annen grunn ligger bak alt det andre. Last ned Web Developer Toolbar (for Firefox) og se selv.

[yoman99]

Ja, det har jeg sett, men skjønner ikke hvorfor dette skjer. Footeren kommer jo helt uavhengig etter de andre og burde vel derfor bare komme under forrige div. Hva kan være grunnen til at den overlapper??

[Runar]

Den kommer etter de andre i koden, men siden div'ene over har float, så må du, etter det jeg har lært, ha clear: both et sted. Men du sa det ikke hjalp?

[yoman99]

Ja, clear: both hadde ingen effekt. Hva skal den gjøre egentlig. Kan jeg gjøre om på noe float ting i de andre div'ene kanskje?

[Runar]

Quoter fra et Google søk:

 

You only need the clear property when you have elements following a floated element in the source code that must remain below the floated element visually on the page.

 

Which value to give the clear property depends entirely on the floats the clear property is clearing. If you've got an element floated left (as in your example), and you need subsequent elements to clear it, use clear:left. If the element is floated right, use clear:right. Clear:both is onlyneeded when you have bothleft and right floated elements that need to be cleared.

 

Kanskje du bør prøve clear: left, siden du ikke har float: right?

Endret 25. februar 2007 av Runar

[yoman99]

Hmm, det ble akkurat samme som clear: both. Merkelig dette!

[Runar]

Jeg har sikkert sagt feil et eller annet sted, så kanskje noen andre har løsningen på problemet ditt.

[yoman99]

Takk for forsøket uansett! Håper noen andre her har noen ideer om hvordan dette kan løses da!

[rc-marcus]

Okey, her er løsningen:

 

Legg footer-diven inn i ramme-diven.

Sett på clear:both på footer

Erstatt border-top:0; med border-top: 1px solid #777;

Ta bort border: 1px solid #777; fra footer

 

Da skal det funke både i IE og FireFox (har ikke opera)

 

[yoman99]

Genialt! Tusen takk skal du ha! Ser hvertfall veldig bra ut ved første øyekast.

 

Skjønner ikke det der med clear: both, men nå funker det hvertfall!

[Steinmann]

Du gjør bare følgende:

1. Smører deg en brødskive

2. Tegner et esel

3. Viser oss litt kode og et eksempel

8022616[/snapback]

 

Genialt! Tusen takk skal du ha! Ser hvertfall veldig bra ut ved første øyekast.

 

Skjønner ikke det der med clear: both, men nå funker det hvertfall!

8025593[/snapback]

clear: both vil legge elementet under alle andre elementer i nærheten.

clear: left er for eksempel for at elementet ikke skal floate til venstre om det ligger et float element der. med both ligger den verken til venstre eller høyre.

Det er også en kjent fiks for elementer som kollapser

 

--

 

Ang siden din så vet jeg du ikke spør om kritikk, men:

* Brødteksten må[/i] endres.

- Så liten serif font uten linjeavstand engang er uleselig.

- prøv en sans-serif font, større font, og line-height: 1.3em;

* Den tabellen du har inni der er nokså bortkastet synes du ikke?

- Om du trenger hjelp med å få det til uten er det bare å spørre.

 

Lykke til.