Det har nok noget at göre med at ff tager fra indersiden af borderen og ie fra ydersiden. Har du dem helt op til en anden div så ses de ikke i ff. Pröv at lave den en px mindre.
At der ikke er logik i borders kan skyldes, at det hele bliver forskubet af dét, som du ligger inde i - hvis du forstår :o) Hvis det stadig gør det efter det ovenstående forslag, kan du måske lægge hele tabellen herind?
container er 762px inkl. kant, og de øvrige divs er de angivne mål, medmindre du undlader at sætte padding: 0px; og border-collapse: collapse ind.
Jeg har nu ikke problemer med at få størrelserne rigtige i hhv. MSIE og FF. Og tro mig, er der nogen, der haft problemer med at få det nøjagtigt, så er det mig :o)
Hvor henne står der, at FF og IE måler hhv. yderst/indest? Du har sikkert ret, hvis du siger det. Jeg har bare ikke problemer med at få det ens i de 2 browsere.
Skal du sætte noget til 100% i højden, skal det være i forhold til det omkransende element. Derfor startes html, body med at blive sat til 100%, dernæst container. Ellers kan index ikke sættes til 100% i højden. Ser det rigtigt ud?
OT: Dog synes jeg stadig det er et problem at man "skal" køre den i height 100% for at få rammen rundt og at man ikke kan få rammen til at tilpasse sig indholdet som i IE... se eksemplet her:
Mig bekendt skal man ikke sætte #container til at være 100% i højden. Det må skyldes, at de andre divs i venstre side har en given højde (hhv. 59px, 120px og 275px). Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)
Jeg er ikke så vant til at arbejde med divs. Jeg bruger dem faktisk kun, når jeg skal, ved nærmere eftertanke. Jeg ved hvad jeg har med at gøre, når jeg arbejder med tabeller.
Mig bekendt skal man ikke sætte #container til at være 100% i højden.> - nej så skal html,body også være 100% som du selv formulerede det :)
Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)> - Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes???
Jeg er ikke så vant til at arbejde med divs. Jeg bruger dem faktisk kun, når jeg skal, ved nærmere eftertanke. Jeg ved hvad jeg har med at gøre, når jeg arbejder med tabeller.> - Jeg bruger altid div men aldrig border :)
Hold da op som i har fået skrevet havde fået lukket min mail box så havde ikke set alle disse mails. Jeg har så imellemtiden fundet frem til helt at droppe border og så lave det på denne måde :
Og Jubiiiiii det virker i både FF og IE så skal jeg bare lige have testet de øvrige browsere af om det oxo spiller max der, men mon ikke ;o)
Og til det med at placere et layout i tabeller så har det aldrig været tiltænkt tabeller. Mange (incl. ham selv) gør det, men der er sq så mage flere muligheder med CSS og så er det langt mere søgemaskine venligt, så det er bare om at komme i gang med CSS til layout ;o)
Og søgemaskinevenligt? Jeg er ikke helt med på hvad du mener :) - det fylder mindre :) normalt min. ½ så meget mere besparelse hvis du bruger tables i tables
Ok, mclemens, hvis index skal være 100% i højden, kan det jo ikke lade sig gøre, hvis ikke de ydre rammer er til det. Det var det jeg mente med 07/04-2006 21:51:43.
Ok, mclemens, hvis index skal være 100% i højden, kan det jo ikke lade sig gøre, hvis ikke de ydre rammer er til det. Det var det jeg mente med 07/04-2006 21:51:43.> - jeps gav dig også kun ret :)
Det ser ud til kun at virke når jeg sætter en fast højde på min container, men vil det så følge med når sidens indhold overskrider den max højde div'en er sat til ?
nej virkede ikke med mere indhold... :/ (har givet op -> websam opretter lige en tråd med de 60 point jeg fik før - havde ikke set problemet med borderen før)
Jeg må tilstå jeg kun lige har skimmet tråden, men jeg lagde mærke til at der var lidt problemer/undren over hvordan container-div'en opførte sig ift. de indre floatede elementer. Så hvis det kan være til nogen hjælp: IEs opførsel er forkert, den bør ikke udvide containeren efter størrelsen af floatede child-elementer. Eric Meyer har skrevet en artikel omkring emnet: http://www.complexspiral.com/publications/containing-floats/
I korte træk er den pæneste løsning som regel at floate containeren og angive en bredde på den.
Problemet er ikke at vi ikke kan finde ud af at floate en div og angive bredden på dem det har vi begge dele gjort... Problemet er at borderen forsvinder i firefox...
Prøv mit eksempel i 07/04-2006 22:47:43 (hvis den floater inde i et absolute placeret elementet som jeg fik den til i 08/04-2006 01:22:43 forsvinder borderen ikke - dog så har den sidst nævnte istedet et problem med overflow'en)
I korte træk er den pæneste løsning som regel at floate containeren og angive en bredde på den.> Kunne ikke være mere enig med dig og gør det også altid.
poster dog lige mit fusk... grunden til det ikke virker er at det gør det betinget at folk har javascript aktiveret (overfører højden fra det absolute placerede element og bruger det til at angive højden i den relativt placerede div...men som sagt: FUSK - baseret på 08/04-2006 01:56:26 der næsten var i vinkel)
Jeg er stadigvæk ikke helt med på hvad problemet så egentlig er nu, for I havde jo fået det til at fungere, fandt jeg ud af ved en bedre skimning. Undervejs faldt jeg dog over indlægget 23:32:55 http://www.eksperten.dk/spm/701400#rid6196291 <<< Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)> - Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes??? >>> Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?
Jeg må nok også hellere lige tilføje, at en ydre div jo altså ikke altid bør udvide sig efter indholdet, netop i de tilfælde hvor indholdet er taget udenfor det alm. flow, dvs. når de floates eller positioneres absolut.
der skal lige siges at firefox går i ged hvis man udvider f.eks. top-image-bg så den bliver mere end 275px i højden som den er angivet til... man skal så vælge at slette højde angivelsen fra den hvis den skal være højere... prøv evt. at slette height defineringen inden der fyldes op med<br>
og denne css rettelse gør så margin bliver ens i bund og top ved både IE og FF html,body { font-family:Verdana; font-size:12pt; color: #000000; margin:0px; padding:0px; } body{margin:20px 0px;}
[Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?] problemet er borderen der forsvinder ... som jeg skrev så brug 07/04-2006 22:47:43 til test case
[<<< Eller hva', retter en div sig altid i højden afhængigt af indholdet? :o)> - Den retter sig altid i højden i forhold til den indhold ligesom de div's div'en ligger i også retter højden opad automatisk... Firefox gør det også når man fjerner doctypen så css box modellen ikke overholdes??? >>>] Ja, det var noget rent vrøvl ... forstår egentlig slet ikke selv hvad jeg har skrevet...
Den retter sig altid i højden i forhold til det indhold den har. - de divs der så indeholder dette div retter sig efter dette divs størrelse såfremt de ikke er placeret absolute..... IE retter så også en ydre div efter højden på en indre div der er floatet --- men det gør FF åbenbart "desværre ikke" derfor problemet med borderen der går i stykker)
[Jeg må nok også hellere lige tilføje, at en ydre div jo altså ikke altid bør udvide sig efter indholdet, netop i de tilfælde hvor indholdet er taget udenfor det alm. flow, dvs. når de floates eller positioneres absolut.] - nemlig ellers er der jo ingen ide i position absolute... dog ville jeg gerne have haft at den var blevet udvidet baseret på indre floatede div's også det er åbenbart tilfældet med IE men ikke FF - - derfor problemerne.
takker for dit input stich - jeg er ikke vant til at bruge borders og har aldrig set dem blive ødelagt i firefox ved brug af float i divs indentil den omsluttende div - troede float var det samme som relativt bare placeres højre eller venstre selvfølgelig :P
>>>der skal lige siges at firefox går i ged hvis man udvider f.eks. top-image-bg så den bliver mere end 275px i højden som den er angivet til... man skal så vælge at slette højde angivelsen fra den hvis den skal være højere...<<< Yep, når man angiver en højde er det jo meningen at elementet netop skal have den højde; hvis den skulle udvide sig efter indholdet ville man bruge min-height i stedet. (At IE < v.7 så har 'misforstået' height som min-height er en anden sag).
>>>og denne css rettelse gør så margin bliver ens i bund og top ved både IE og FF<<< Ja IE er uenig med Opera, Firefox etc. om hvilket element der er root når det kommer til viewporten (http://www.quirksmode.org/viewport/intro.html).
>>>troede float var det samme som relativt bare placeres højre eller venstre selvfølgelig<<< Okay, ja det er desværre en udbredt misforståelse, specielt pga. IEs rendering af det.
[Jeg er stadigvæk ikke helt med på hvad problemet så egentlig er nu, for I havde jo fået det til at fungere, fandt jeg ud af ved en bedre skimning. Undervejs faldt jeg dog over indlægget 23:32:55 http://www.eksperten.dk/spm/701400#rid6196291] prøv at fylde indhold i så der er mere indhold end den angivne højde ;)
[[[Og containeren i det eksempel du efterfølgende kommer med, udvider sig jo netop ikke (i FF) pga. de indre elementer er floatede. Så gider du komme med en minimal testcase der illustrerer problemet?] problemet er borderen der forsvinder ... som jeg skrev så brug 07/04-2006 22:47:43 til test case]] - Hov, fik ikke læst det hele... men, nej som jeg skrev i starten af det nævnte eksempel så er det - det der skabte problemerne...
mit bedste bud p.t. er javascript men så gerne en løsning der virkede uden js :) har prøvet relative position, men det optager jo plads det sted man flytter det fra (og igen afhængig af ovenstående indhold hvor meget top:-ypx den skal have) og ved absolute udvides scrollbaren ikke ordentligt ved mere indhold :/
http://www.eksperten.dk/spm/701400#rid6196291] prøv at fylde indhold i så der er mere indhold end den angivne højde ;) - hov, troede du mente indlægget lidt længere nede... løsning med height:100% er ikke ideel da rammen skal stå et stykke væk fra kanterne... og centreres midt på siden i alle opløsninger
Jeg er ikke helt sikker, men jeg tror du muligvis misforstår noget, mclemens. Måske du rent faktisk burde læse Eric Meyers artikel en ekstra gang?> - joh, det var det ... og det tror jeg også jeg gør :)
... det var åbentbart den clear: both der skulle til ;) - så fik jeg også det lært... se man lærer noget herinde hver dag 8)
Tilføjelse: Da den skal være centreret kan man ikke anvende tricket med at floate parent div'en, så må man bruge et clearer-element (eller height:100%; som I også var kommet frem til, men det er ikke altid ønskværdigt).
@steen_hansen: I fald du kigger med endnu, så en lille kommentar til "Hvorfor har layout aldrig været tiltænkt tabeller?": Fordi tabeller har en semantisk betydning. Når man anvender tabeller til andet end tabulære data, er det i realiteten misbrug. At det er muligt, og at det endda kan være mere belejligt til at løse visse layoutmæssige problemstillinger, end det er vha. at style de semantisk korrekte elementer, ændrer ikke noget ved det.
@mclemens: Hehe, godt nok. Forresten var clear:left; nok i det eksempel, men med clear:both; kan klassen anvendes i de tilfælde hvor der (også?) er højre-floatede elementer.
Hold da op som vi spammer i den her tråd, der kommer et nyt indlæg hver gang man sidder og skriver et! :-D
@mclemens: Jeg smed faktisk et svar tidligere, men nu hvor jeg har fået læst tråden lidt bedre, ser jeg steen_hansen (og du!?) allerede havde fået løst problemet på en tilfredsstillende måde for websam, så dem bør jeg egentlig ikke få nogen af. Jeg har dog heller intet at bruge dem til, og roder alligevel ikke rundt herinde længere; blev træt af en vis person, og kom kun lige forbi pga. der var en der skrev i en gaaammel tråd. :-) Men godnat, og selv tak, det var faktisk fornøjeligt, dit gode humør smitter af!
Ja jeg måtte altså hoppe i kassen, men det ser ud til at virke med den clearer du fik lavet "mclemens" og det er tjekket i FireFox, IE 6.0, Opera og netscape, så skulle jeg vist være dækket ind med de fleste browsere.
Om det så virker på mac maskiner ved jeg ikke da jeg ikke har en sådan stående, men mon ikke ;o)
stich >> Det er da kedeligt at du ikke gidder komme her mere "bare" pga. en person, det burde da ikke kunne gøre udfaldet ???
Og så skal vi vist også have delt nogle point ud ;o)
Når nu alt dette virker, så mangler jeg bare en idé til hvordan jeg jeg får min index til at bevæge sig ned i takt med at main bliver større, er dette muligt ?
Hov, det passer jo slet ikke det jeg skrev i nat, man kan godt opnå det ønskede resultat ved at floate containeren, netop hvis man angiver position:absolute; på den (samme ide som I havde I går), og så left:50%; margin-left:-<halvdelen af elementets bredde>. Godmorgen. :-s
@websam: Naa, men det skal være sjovt at hjælpe, og der er rigeligt med steder man kan gøre det. :-) So nevermind.
stich >> Det var så oxo det jeg havde fundet ud af i mellemtiden et bg billede klare skærene for mig i denne omgang så alt er helt i hvinkel ;o)
steen_hansen >> Det er faktisk den løsning som mclemens lavede her 08/04-2006 04:17:23 det er selvfølgelig kun skitsen, men jeg skal nok lige smide et link til det færdige layout når jeg kommer så langt ;o)
Ikke nogen! :-) Det bør virke i alle moderne browsere, og jeg har faktisk tjekket i nogle gamle IE versioner; den var gangbar ned til og med 5.01 (ved ikke med 4.x, for den crasher konsekvent på min comp). Så det bør være ok!? ;-)
Den kommer fra: #container { ... margin:20px auto 20px -380px; ... } I den kode mclemens skrev, stod der margin:20px auto;, det er en shorthand for margin:20px auto 20px auto;, der igen er en shorthand for margin-top:20px, margin-right:auto; margin-bottom:20px; margin-left:auto; -- i den rækkefølge. Og det var bare den kode jeg tilpassede. Men du kan bare ændre den til fx margin:20px auto 0 -380px;.
Og velbekomme. Ser umiddelbart pænt ud, god fornøjelse med den fortsatte udvikling.
... hvis index main altid er den største kan heightequal.js forkortes til dette: <!-- window.onload=function(){ document.getElementById("index").style.height=document.getElementById("main").offsetHeight; } //-->
og så et lille bug i FF test :/ <!-- window.onload=function(){ ah=document.getElementById("main"); bh=document.getElementById("index"); if(ah.offsetHeight>bh.offsetHeight)bh.style.height=ah.offsetHeight+"px"; else ah.style.height=bh.offsetHeight+"px"; } //-->
stich >> jeg er med på hvor den kommer fra, problemet er at bund margin ikke er tilstede når jeg ser siden i IE ?
mclemens >> generelt er jeg i mod javascript da denne jo kan være slået fra i browseren og da designet så er afhænnigt af et givent javascript så duer det ikke.
[mclemens >> generelt er jeg i mod javascript da denne jo kan være slået fra i browseren og da designet så er afhænnigt af et givent javascript så duer det ikke.] - Jeg er af den samme mening ;) http://www.eksperten.dk/spm/701400#rid6196485
@websam: Aha, sorry. Umiddelbart tror jeg den pæneste løsning er at gå tilbage til at anvende et clearer-element igen, i stedet for at indsætte endnu et wrapper-element (problemet ligger formentlig i at #container er positioneret absolut), men om det virker uden videre er jeg ikke 100% sikker på. Forresten ser jeg heller ikke nogen forskel på renderingen i hhv. IE 6 og FF 1.5!? Det ligner dog en kommerciel side (penge i at lave den), så hvis jeg skal kigge mere på den del af det, må du nok selv lave en testcase der er til at arbejde videre med...
@mclemens: Tak! Men der er nu også rigeligt med andre sjove ting at give sig til, og jeg tror I er mange flere herinde der er betydeligt mere interesserede i at hjælpe end jeg er, så jeg tvivler ikke på I nok skal få spørgsmålene besvaret. And 'nuff about that now. ;-)
@stich 1. Clearer-elementet virker så det benytter jeg.
2. Det er til min fætter og hans is danse partner, så ingen penge denne gang, men en familie tjeneste ;o)
Men er der mulighed for at træffe dig på et senere tidspunkt hvis der skulle være noget jeg skulle bruge hjælp til kommerciel ? Er du selvstændig ? Email, hjemmeside ?
Så lukker vi og dem der skal have point må smide et svar.
stich har lagt et svar: http://www.eksperten.dk/spm/701400#rid6196435 og da det var ham der kom med løsningen clear:both; så kast dem efter ham ;) Jeg er bare glad for at jeg kender clear attributen nu - så bliver tråde med samme problem en del kortere :)
Ja da. Jeg er blot studerende, så lidt freelance ville passe mig glimrende! http://allanrasmussen.com/ - der kan du også finde min email m.m., skriv bare hvis det har interesse, så kan vi snakke om det.
Og 2) Må skyldes der er for lidt plads i containeren til at have dem side ved side, prøv dig frem og se hvor meget der skal til; måske det skyldes en bug der fordobler margin eller padding på et element.
Hvilken, dobbel margin? -for der var, og er, ikke nogen margin på nogen af de floatede elementer, så er ikke klar over hvad fejlen præcist bundede i. Men det er fikset nu, ser jeg dog.
Hvis man bruger procent defineringer - så er der også problemer med evt. afrundinger af pixels... hvis man f.eks. definerer 2 kolonner af 50% og bredden på ydreboks er 433 pixels får man 2 bokse á 217 px og de vil derfor stå under hinanden...
Og så fik jeg oxo centreret i IE 5.XX det gøres ved at lave en text-align:center; i min body og en text-align:left; i min container.
Så det hele spiller max ;o)
/Websam
Synes godt om
Ny brugerNybegynder
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.
Ny bruger
Nybegynder
Opret
Preview
