Problemer med arving av høyde på divs i Opera

[Dirty^Dog]

Se siste post..

Endret 14. oktober 2004 av Dirty^Dog

[Haraldson]

Hm... Funker background-position:fixed; ?

[Dirty^Dog]

#hoyrebg

{

background-image: url(pics/bgright.gif);

background-attachment: fixed;

width: 20px;

height: 100%;

float:right;

}

 

Sånn ser koden ut. Det fungerer helt fint i alle andre browsere..

Hjalp ikke med background-position:fixed;

Endret 11. oktober 2004 av Dirty^Dog

[FuLu]

Tror nok fremgangsmåten blir feil uansett. Problem er at left og right div'ene alltid vil være 100% av skjermen og ikke parent elementet dem er i. Min-height fungerer ikke i IE. Og IE har desverre bugs med background-attachment fixed. Denne fungerer desverre bare i body. Men det finnes en javascript workaround, men krever arbeid og vil ikke fungere når ja.. JS er skrudd av

 

http://www.howtocreate.co.uk/fixedBackground.html

 

Min erfaring med IE, er å droppe sånne skyggeeffekter. Du har noe som heter for AlphaImageLoader som du kan bruke i CSS'en for å loade PNG bilder med slike skygge effekter. Men denne bugger og krever også javascript påskrudd om jeg ikke husker feil.

 

Så da ender du opp med å skvise ut IE brukere som det finnes flest av om du går for Opera/FF vennelig kode, eller så må du bite i gresset og droppe hele opplegget og finne på en annen ide .

[Chasseur]

Fikk plutselig lyst til å spamme MS (IE hvis det finnes) sin kundesupport, og Bill Gates..

 

Men fikk en bedre ide, starte en underskrifts kampanje mot IE, og sende den til MS?

[Cucum(r)]

Min-height fungerer ikke i IE.

.klasse {
min-height: 500px;
height: auto!important;
height: 500px;
}

Den funker.

[FuLu]

@SirIce, takker og bukker Ikke tenkt på workarounds.

[Dirty^Dog]

Thx, da fikk jeg ordnet det problemet..

Men har ett litt annet "problem", dog problemet mitt er vel litt mangel på kunnskaper div`s vs tables..

 

På samme linken har jeg to divs, en #innhold, hvor tekstinnholdet skal stå, og en #hoyrediv, hvor diverse info ang siden skal stå.

 

Problemet mitt er hvordan jeg skal få høyden på disse like. I praksis så fungerer det jo hvis jeg setter fast høyde på begge to, men det ser ikke helt pent ut når ikke hele siden blir fylt ut.

Det beste hadde vært å kunne brukt height: 100%, men ettersom den ene diven vil ha variabelt innhold, og den andre mer eller mindre fast innhold (og også mye mindre enn den andre div) vil ikke disse bli like høye. Finns det da noen måte at den høyre div`n arver høyde fra den vestre, eller noe lignende?

[PoleCat]

Har du lest om Faux Columns?

 

Prinsippet går ut på å simulere effekten av lik høyde med et bakgrunnsbilde, selv om den egentlig ikke er det.

[Dirty^Dog]

Ja, prøver det nå.. Og det ser ikke spesielt pent ut..

 

Bruker

body

{

background: #ccc url(../rh2/pics/bg.gif) repeat-y 100% 0;

background-attachment: fixed;}

på body, men det blir ikke pent med det bakgrunnsbildet jeg bruker..

Er det virkelig ingen enklere måte å få to divs like høye uten å manipulere med bakgrunnsbilder ?

[FuLu]

Ikke ta det i body, men i en #container div som #innhold og #hoyrediv er inni igjen.

 

Faux saken som PoleCat refererte til er eneste måte jeg kommer på å få to divs "like høye"

 

På min egen site (selvreklame ) så bruker jeg visuell effekt slik som den Faux columns. Det er et bakgrunnsbilde i #container (hmm mulig jeg brukte #background her siden header og footer har transparrent hjørner).

 

Måtte og ha en dummy div i bunnen av #background div'en siden #sidebar og #content floates. Grunnen er at #background div'en ikke vil strekke seg nedover hvis jeg ikke brukte en slik dummy div med clear: both;

 

Desverre må man tenke annerledes med div's etc enn det man gjorde med tables. Savner docking metoden man har i java og C# på sånne "divs" Da hadde du fått det slik du ville, men det finnes ikke i html/css verdenen, så da må man jukse lite granne.

[Dirty^Dog]

Hva gjør jeg feil?

link

 

css

#innholdscontainer

{

width: 600px;

background: #ccc url(testbg.gif) repeat-y 50% 0;

}

 

#innhold

{

width: 435px;

float: left;

padding-left: 10px;

padding-top: 5px;

padding-right: 5px;

font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;

font-size: 10px;

background: #CCC;

}

 

#hoyreinnhold

{

width: 139px;

float: right;

padding-left: 10px;

padding-top: 5px;

border-left: 1px dotted;

font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;

font-size: 10px;

background: #F2F2F2;

}

 

html

 

<div id="innholdscontainer">

<div id="innhold"> innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold innhold  </div>

<div id="hoyreinnhold"> hoyreinnhold hoyreinnhold hoyreinnhold hoyreinnhold hoyreinnhold  hoyreinnhold hoyreinnhold hoyreinnhold hoyreinnhold </div>

</div>

[PoleCat]

legg en

<div style="height: 1px; clear: both; overflow: hidden;"></div>

i bunn av #innholdscontainer for å "cleare" de flytende elementene.

 

Regner med at den vises slik den skal i IE, og er feil i Firefox?

[Haraldson]

Hmm... Nå skuffer du, PoleCat. Skulle vel ikke heller vært en <hr />?

[PoleCat]

Hmm... Nå skuffer du, PoleCat. Skulle vel ikke heller vært en <hr />?

Nei, det er egentlig det samme.

 

Selv liker jeg ikke å bruke hr til dette så lenge ikke footer eller lignende kommer under. Er vel egentlig en smakssak.

 

EDIT: Og hr kan vises på mange forskjellige måter (ønskede og uønskede), det har vi vel alle erfart.

Endret 13. oktober 2004 av PoleCat

[Haraldson]

Joda, men semantisk blir det ikke det samme. Uansett, nok om det.

[Dirty^Dog]

Derja

 

En siste ting, hvordan få #innhold og #hoyreinnhold til å hele tiden dekke hele height?

 

[FuLu]

Hvis du vil ha det til å dekke hele height, kan du like greit putte faux column bakgrunnsbildet i body, da vil den dekke hele høyden

 

Men det blir bare en visuell effekt, div'ene vil alltid bli slik høyt som du har det nå.

Endret 13. oktober 2004 av FuLu

[PoleCat]

Joda, men semantisk blir det ikke det samme. Uansett, nok om det.

Tja, nei. Og en <hr> der? Neeeeeh....

[Dirty^Dog]

Mere trøbbel! D0h..

 

Link

 

Problem: Har nå laget en #nyhetsdiv, som nyheter skal ligge i på forsiden. Problemet er at høyden på #innhold og #hoyreinnhold ikke følger etter, når høyden blir høyere enn ett gitt tall..

I FF og IE (utrolig nok) ser det riktig ut, men ikke i Opera...

 

Link til css

 

På forhånd takk