---

På denne side http://vinsiderne.dk/test7/liste.htm har jeg følgende
problem med visningen i Firefox: I det øverste gule felt (.vin_info),
hvor teksten fylder mere end der kan være på en linje, udvider feltet
sig i højden som det skal, men den row1-div, som det gule felt ligger
inde i, udvider sig ikke. I både IE7 og IE8 vises tingene som de skal,
idet den omsluttende div udvider sig.
Jeg har på row1 sat en min-height: 28px, hvilket jeg synes burde
muliggøre udvidelsen, men det sker som sagt kun i IE, ikke i FF.

Lige for at komme et muligt forslag i forkøbet: Jeg kan ikke gøre det
gule felt breddere, da det har den maksimale %-bredde, det kan have,
når vinduet gøres smallere. Og problemet ville i øvrigt være det samme
uanset hvor bredt det gule felt er.

Endnu en gang ville det være en smal sag at lave noget der virker i
tabeller...

Jeg er opmærksom på eksistensen af den nye tabledisplay design model,
men da den ikke supporteres af IE, vil det indebære to designs, og det
er et for meget.

/Preben

---

Efter mange tanker skrev Preben Nielsen:
> På denne side http://vinsiderne.dk/test7/liste.htm har jeg følgende
> problem med visningen i Firefox: I det øverste gule felt (.vin_info),
> hvor teksten fylder mere end der kan være på en linje, udvider feltet
> sig i højden som det skal, men den row1-div, som det gule felt ligger
> inde i, udvider sig ikke. I både IE7 og IE8 vises tingene som de skal,
> idet den omsluttende div udvider sig.
> Jeg har på row1 sat en min-height: 28px, hvilket jeg synes burde
> muliggøre udvidelsen, men det sker som sagt kun i IE, ikke i FF.
>
> Lige for at komme et muligt forslag i forkøbet: Jeg kan ikke gøre det
> gule felt breddere, da det har den maksimale %-bredde, det kan have,
> når vinduet gøres smallere. Og problemet ville i øvrigt være det samme
> uanset hvor bredt det gule felt er.
>
> Endnu en gang ville det være en smal sag at lave noget der virker i
> tabeller...
>
> Jeg er opmærksom på eksistensen af den nye tabledisplay design model,
> men da den ikke supporteres af IE, vil det indebære to designs, og det
> er et for meget.
>
> /Preben

Det gule felt floater left.
For at få det element det er indsat i til at udvide sig, skal der
cleares - enten med et regulært ekstra element, end den row1:after{}
der blev præsenteret i en anden tråd.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

(Det oprindelige spørgsmål findes i citatet i ovenstående indlæg.)

Begge løsninger giver samme resulatet. Nemlig at row1 udvider sig -
men så meget at underkanten af row1 flugter med underkanten af menuen.
Dvs. vi er samme sted som i forrige spørgsmål, men med den ikke
uvæsentlige forskel at her går den ikke at feltet udvides så meget.
Det må kun udvide sig så meget som indholdet tilsiger.

Jeg har uploadet
..row1:after
{
content: ".";
display: block;
height: 0;
font-size:0;
clear: both;
visibility:hidden;
}
til stylesheet, så resultatet kan ses.

Ved at gøre vinduet smallere kan ses, at løsningen virker som den skal
for den næste gruppe af rækker. Så det ser kraftigt ud til at din
antagelse af at browseren tolker som om menuen stod ind i
indholdsdelen er rigtig.

/Preben

---

Jeg prøvede lige at gå tilbage til den model jeg brugte til at begynde
med, nemlig med indholdsdelen (.wrap_indhold) med float: left i stedet
for som nu med bred margin-left. Og her er problemet væk. Men så får
jeg naturligvis det problem tilbage, som var grunden til at jeg
skiftede fra float til bred margen, nemlig at indholdsdelen ved
smallere vindue ryger ned under menu-niveau i Firefox. Dette problem
er omtalt i tråden Problemer med forsøg på elastisk design.

Jeg spørger på den baggrund mig selv, om løsningen på denne tråds
problem kan findes ved at gå tilbage til float og så om muligt finde
en anden løsning på det andet problem, jeg havde der, altså med at
indholdsdelen ryger ned under menuniveau.

/Preben

---

Jeg har nu uploadet den gamle model med float, hvor det problem, som
nærværende tråd handler om, ikke er der. http://vinsiderne.dk/test7/liste_float.htm
Her opstår der så til gengæld nye problemer:
1) det at indholdsdelen som nævnt styrter ned under menuniveau i FF
når vinduet gøres smallere
2) I IE7 får row2 ikke samme bredde som row1. Det har jeg forsøgt at
klare med en max-width på row2, hvilket virker fint i FF og
beslægtede, men det har ingen indvirkning i IE7 hvor bredden fremdeles
kun er den bredde som den indeholdende tekst kræver
3) I IE8 ser det fuldstændig sindsygt ud og totalt anderledes end i
alle andre browsere. row2 tildeles ligesom i IE7 bredde efter
indholdet, men derudover tildeles row1 samme bredde som row2, hvorved
row1's indhold jo ikke kan være i i row1 men skubbes ned under
hinanden.

Med alt det bøvl med "margen-modellen", som også sidste tråd
anskueliggjorde, håbede jeg det måske kunne være en vej frem med den
ellers forladte "float-model". Men den byder tydeligvis på nye
udfordringer. Jeg aner ikke hvordan jeg kommer videre.

/Preben

---

Preben Nielsen udtrykte præcist:
> Jeg har nu uploadet den gamle model med float, hvor det problem, som
> nærværende tråd handler om, ikke er der.
> http://vinsiderne.dk/test7/liste_float.htm Her opstår der så til gengæld nye
> problemer: 1) det at indholdsdelen som nævnt styrter ned under menuniveau i
> FF når vinduet gøres smallere
> 2) I IE7 får row2 ikke samme bredde som row1. Det har jeg forsøgt at
> klare med en max-width på row2, hvilket virker fint i FF og
> beslægtede, men det har ingen indvirkning i IE7 hvor bredden fremdeles
> kun er den bredde som den indeholdende tekst kræver
> 3) I IE8 ser det fuldstændig sindsygt ud og totalt anderledes end i
> alle andre browsere. row2 tildeles ligesom i IE7 bredde efter
> indholdet, men derudover tildeles row1 samme bredde som row2, hvorved
> row1's indhold jo ikke kan være i i row1 men skubbes ned under
> hinanden.
>
> Med alt det bøvl med "margen-modellen", som også sidste tråd
> anskueliggjorde, håbede jeg det måske kunne være en vej frem med den
> ellers forladte "float-model". Men den byder tydeligvis på nye
> udfordringer. Jeg aner ikke hvordan jeg kommer videre.
>
> /Preben

http://bbsorensen.com/test/layout/vinside/

Klarer det i hvert fald i FF.
Ser underligt ud i IE8 og IE7 compatibel....
Skal se lidt mere på det, og nok også forklare lidt.
Har lidt travlt lige nu...
Meget kort, er det noget med at bruge samme teknik som ved margin
overlap, men at bruge padding i stedet...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen tastede følgende:
> Preben Nielsen udtrykte præcist:
>> Jeg har nu uploadet den gamle model med float, hvor det problem, som
>> nærværende tråd handler om, ikke er der.
>> http://vinsiderne.dk/test7/liste_float.htm Her opstår der så til gengæld
>> nye problemer: 1) det at indholdsdelen som nævnt styrter ned under
>> menuniveau i FF når vinduet gøres smallere
>> 2) I IE7 får row2 ikke samme bredde som row1. Det har jeg forsøgt at
>> klare med en max-width på row2, hvilket virker fint i FF og
>> beslægtede, men det har ingen indvirkning i IE7 hvor bredden fremdeles
>> kun er den bredde som den indeholdende tekst kræver
>> 3) I IE8 ser det fuldstændig sindsygt ud og totalt anderledes end i
>> alle andre browsere. row2 tildeles ligesom i IE7 bredde efter
>> indholdet, men derudover tildeles row1 samme bredde som row2, hvorved
>> row1's indhold jo ikke kan være i i row1 men skubbes ned under
>> hinanden.
>>
>> Med alt det bøvl med "margen-modellen", som også sidste tråd
>> anskueliggjorde, håbede jeg det måske kunne være en vej frem med den
>> ellers forladte "float-model". Men den byder tydeligvis på nye
>> udfordringer. Jeg aner ikke hvordan jeg kommer videre.
>>
>> /Preben
>
> http://bbsorensen.com/test/layout/vinside/
>
> Klarer det i hvert fald i FF.
> Ser underligt ud i IE8 og IE7 compatibel....
> Skal se lidt mere på det, og nok også forklare lidt.
> Har lidt travlt lige nu...
> Meget kort, er det noget med at bruge samme teknik som ved margin overlap,
> men at bruge padding i stedet...
>
> Birger

Der manglede en >.... :/

Ser nu ens ud i FF og IE8 - og næsten mage til i IE7 kompatibel
(wrap-indhold gå helt ud til menu).
Vist noget med margin eller padding, der ikke altid gør rigtigt i IE -
men den skal nok checkes i en "rigtig" IE7, før man forsøger at
kompensere...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Den 23-12-2010, skrev Birger Sørensen:
> Birger Sørensen tastede følgende:
>> Preben Nielsen udtrykte præcist:
>>> Jeg har nu uploadet den gamle model med float, hvor det problem, som
>>> nærværende tråd handler om, ikke er der.
>>> http://vinsiderne.dk/test7/liste_float.htm Her opstår der så til gengæld
>>> nye problemer: 1) det at indholdsdelen som nævnt styrter ned under
>>> menuniveau i FF når vinduet gøres smallere
>>> 2) I IE7 får row2 ikke samme bredde som row1. Det har jeg forsøgt at
>>> klare med en max-width på row2, hvilket virker fint i FF og
>>> beslægtede, men det har ingen indvirkning i IE7 hvor bredden fremdeles
>>> kun er den bredde som den indeholdende tekst kræver
>>> 3) I IE8 ser det fuldstændig sindsygt ud og totalt anderledes end i
>>> alle andre browsere. row2 tildeles ligesom i IE7 bredde efter
>>> indholdet, men derudover tildeles row1 samme bredde som row2, hvorved
>>> row1's indhold jo ikke kan være i i row1 men skubbes ned under
>>> hinanden.
>>>
>>> Med alt det bøvl med "margen-modellen", som også sidste tråd
>>> anskueliggjorde, håbede jeg det måske kunne være en vej frem med den
>>> ellers forladte "float-model". Men den byder tydeligvis på nye
>>> udfordringer. Jeg aner ikke hvordan jeg kommer videre.
>>>
>>> /Preben
>>
>> http://bbsorensen.com/test/layout/vinside/
>>
>> Klarer det i hvert fald i FF.
>> Ser underligt ud i IE8 og IE7 compatibel....
>> Skal se lidt mere på det, og nok også forklare lidt.
>> Har lidt travlt lige nu...
>> Meget kort, er det noget med at bruge samme teknik som ved margin overlap,
>> men at bruge padding i stedet...
>>
>> Birger
>
> Der manglede en >.... :/
>
> Ser nu ens ud i FF og IE8 - og næsten mage til i IE7 kompatibel (wrap-indhold
> gå helt ud til menu).
> Vist noget med margin eller padding, der ikke altid gør rigtigt i IE - men
> den skal nok checkes i en "rigtig" IE7, før man forsøger at kompensere...
>
> Birger

Gider nogen teste dem her - IE7 er vist et problem...
http://bbsorensen.com/test/layout/vinside/

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Fortsætter lige...
http://bbsorensen.com/test/layout/vinside/artikel.html

Er OK i FF og IE8.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 23 Dec., 02:12, Birger Sørensen wrote:

> Gider nogen teste dem her - IE7 er vist et problem...http://bbsorensen.com/test/layout/vinside/

Hold da op! Der er da sket noget her. Hurra! Jeg har testet i IE7, og
der er ganske rigtigt den fejl, at wrap_indhold går helt ud til
menuen. Ellers ser det jo ud og opfører sig fuldsrændig som det skal i
FF og IE8.

> Fortsætter lige...http://bbsorensen.com/test/layout/vinside/artikel.html
>
> Er OK i FF og IE8.

Der er sandelig også nyt der! Det ser rigtigt ud i FF og IE8. I IE7
rager højre spalte (blå) for langt til højre, noget der ligner 18px.
Det kan muligvis skyldes en fejl jeg opdagede i går: wrap_indhold var
sat med en max-width på 854px; den skal være 836px. Og den difference
svarer jo fuldstændig til fejl-udragningen.

Jeg er spændt på at høre dine forklaringer, når du får tid.

Jeg takker endnu en gang for din fantastiske indsats og ønsker dig -
og andre der måtte læse dette - en rigtig god jul.

/Preben

---

Preben Nielsen formulerede torsdag:
> On 23 Dec., 02:12, Birger Sørensen wrote:
>
>> Gider nogen teste dem her - IE7 er vist et
>> problem...http://bbsorensen.com/test/layout/vinside/
>
> Hold da op! Der er da sket noget her. Hurra! Jeg har testet i IE7, og
> der er ganske rigtigt den fejl, at wrap_indhold går helt ud til
> menuen. Ellers ser det jo ud og opfører sig fuldsrændig som det skal i
> FF og IE8.
>
>> Fortsætter lige...http://bbsorensen.com/test/layout/vinside/artikel.html
>>
>> Er OK i FF og IE8.
>
> Der er sandelig også nyt der! Det ser rigtigt ud i FF og IE8. I IE7
> rager højre spalte (blå) for langt til højre, noget der ligner 18px.
> Det kan muligvis skyldes en fejl jeg opdagede i går: wrap_indhold var
> sat med en max-width på 854px; den skal være 836px. Og den difference
> svarer jo fuldstændig til fejl-udragningen.
>
> Jeg er spændt på at høre dine forklaringer, når du får tid.
>
> Jeg takker endnu en gang for din fantastiske indsats og ønsker dig -
> og andre der måtte læse dette - en rigtig god jul.
>
> /Preben

Jeg skal ptøve at forklare...
Først skal det lige pointeres at alt andet er ens på de to sider, og de
anverder samme css.
Kun indholdet af din wrap_indhold er ændret, og der er to forskellige
css filer for de to slags indhold.
Dette aht dit arbejde med at kunne include indhold.

Og jeg tager listen først - det var også den der gav grundlaget til
løsningen på det andet problem.
Problemet er stadig at browserne tolker indholdet der vises i margenen
som hørende til elementet. Når man clearer, kommer elementet derfor til
at gå til bunden af menuen, og ikke stoppe hvor det "skal" (forventes),
ved det indhold der er i elementet iflg kildekoden.
Og tanken var så at i stedet for at cleare til both (have fri udsigt
til margin i begge sider), kun at cleare til højre.
Så den du har kaldt row2 (sted og pris), har fået en clear:right.
Din opsætning af de floatede elementer var ikke rigtig. Den har jeg
ændret på. For det første skal floatede elementer til højre, altid
komme først. Nogle af browserne starter (eller startede) forfra med
positionsberegninger, når de mødte et element der floatede til højre.
Det midterste element skal ikke floates - det flyder selv. Det er det
gule vin_info (hvor du har teksten). Men det har margins, der giver
plads til de to floatede elementer til venstre og højre. Fordelen ved
at lade det flyde selv på denne måde, er at det selv tilpasser sig i
størrelsen - hvilket vist var et af målene..
Det skal stå sidst - efter de floatede.
For nu at kunne afslutte floatingen i hvert item på listen (måske også
for overskueligheden), er der sat en div om hver. row2 afslutter
floatingen af de tre elementer ovenover, med en klar linie til højre.

Tanken med at cleare til høje, i stedet for til both, prøvede jeg så at
overføre til artikel siden.
Men det går galt, fordi den højre spalte ikke altid er den højeste.
Så spalterne er pakket ind i en ekstra wrapper - sp_wrap.
Inde i den, er sat et element, hvis formål er at markere bunden. Det
hedder sp_stop, og er reelt det du ser som den mørke streg under
elementerne. Det floater left, og har en højde på 1px og bredde på 100%
- det er nødvendigt at det har indhold. Derfor vil det altid være under
den højeste af spaletrne. Og endelig er der så det element der clearer
- sp_clear, der blot har clear:right.
Og alt dette inde i den nye sp_wrap.
Og man skal bemærke at der *ikke* er clearet i wrap-indhold. Den fylder
kun som overskriften - clearer man den, vil man igen trække den ned til
bunden af menuen (undtaget IE < 7, formentlig). Og den hvide baggrund
er faktisk i sp_wrap - ikke i wrap_indhold. (Brug evt Firebug i FF til
at se det.)

Problemet med at IE7 lod den blå boks fare helt til højre, skyldte at
sp_wrap ikke havde bredde. Den har nu fået 100%, og IE7 (IE8 i
kompatibilitet - det er vist ikke helt det samme) opfører sig nu som en
rigtig browser.

Endelig er/var der problemet med at wrap_indhold fyldte helt over til
menuen i IE7. Det er en kendt bug i IE, og løses ved at give elementet
et eller andet, der får IE til at sætte hasLayout (der er speciel for
IE). Jeg har sat zoom:1; på den, og det løser problemet (zoom er også
en M$ opfindelse, og det giver formentlig en css valideringsfejl - men
de øvrige browsere ignorer den blot).
Til gengæld, opfører IE7 sig rigtigt med cleareringerne, så du vil
kunne se at stregen under de to spalter er dobbelt - der er en fra
sp_stop og en fra wrap_indhold. (Den er der også i de andre, men bag
ved overskriften)
Hvis du ikke kan leve med det, kan den ekstra fjernes med en CC til
IE7. Det er lidt tricky, fordi nogle af dine sider faktisk bruger
stregen, også i IE7, så lige hvordan afhænger af hvordan du includer de
forskellige ting.

Det er måske nok ikke en optimal løsning - der sættes elementer ind i
HTML'en som faktisk ikke hører til der, som ikke har indhold, men er
rent design.
Til gengæld kan man sige, at den har en stor fordel : det viker! B-)

Du skal nok teste i IE7 - jeg har kun 8'eren, og kan teste i
kompatibilitetsmode.

Og ellers spørger du bare, så skal jeg gøre mit bedste for at rede
trådene ud :D

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

Birger Sørensen kom med denne ide:
> Preben Nielsen formulerede torsdag:
>> On 23 Dec., 02:12, Birger Sørensen wrote:
>>
>>> Gider nogen teste dem her - IE7 er vist et
>>> problem...http://bbsorensen.com/test/layout/vinside/
>>
>> Hold da op! Der er da sket noget her. Hurra! Jeg har testet i IE7, og
>> der er ganske rigtigt den fejl, at wrap_indhold går helt ud til
>> menuen. Ellers ser det jo ud og opfører sig fuldsrændig som det skal i
>> FF og IE8.
>>
>>> Fortsætter lige...http://bbsorensen.com/test/layout/vinside/artikel.html
>>>
>>> Er OK i FF og IE8.
>>
>> Der er sandelig også nyt der! Det ser rigtigt ud i FF og IE8. I IE7
>> rager højre spalte (blå) for langt til højre, noget der ligner 18px.
>> Det kan muligvis skyldes en fejl jeg opdagede i går: wrap_indhold var
>> sat med en max-width på 854px; den skal være 836px. Og den difference
>> svarer jo fuldstændig til fejl-udragningen.
>>
>> Jeg er spændt på at høre dine forklaringer, når du får tid.
>>
>> Jeg takker endnu en gang for din fantastiske indsats og ønsker dig -
>> og andre der måtte læse dette - en rigtig god jul.
>>
>> /Preben
>
> Jeg skal ptøve at forklare...
> Først skal det lige pointeres at alt andet er ens på de to sider, og de
> anverder samme css.
> Kun indholdet af din wrap_indhold er ændret, og der er to forskellige css
> filer for de to slags indhold.
> Dette aht dit arbejde med at kunne include indhold.
>
> Og jeg tager listen først - det var også den der gav grundlaget til løsningen
> på det andet problem.
> Problemet er stadig at browserne tolker indholdet der vises i margenen som
> hørende til elementet. Når man clearer, kommer elementet derfor til at gå til
> bunden af menuen, og ikke stoppe hvor det "skal" (forventes), ved det indhold
> der er i elementet iflg kildekoden.
> Og tanken var så at i stedet for at cleare til both (have fri udsigt til
> margin i begge sider), kun at cleare til højre.
> Så den du har kaldt row2 (sted og pris), har fået en clear:right.
> Din opsætning af de floatede elementer var ikke rigtig. Den har jeg ændret
> på. For det første skal floatede elementer til højre, altid komme først.
> Nogle af browserne starter (eller startede) forfra med positionsberegninger,
> når de mødte et element der floatede til højre.
> Det midterste element skal ikke floates - det flyder selv. Det er det gule
> vin_info (hvor du har teksten). Men det har margins, der giver plads til de
> to floatede elementer til venstre og højre. Fordelen ved at lade det flyde
> selv på denne måde, er at det selv tilpasser sig i størrelsen - hvilket vist
> var et af målene..
> Det skal stå sidst - efter de floatede.
> For nu at kunne afslutte floatingen i hvert item på listen (måske også for
> overskueligheden), er der sat en div om hver. row2 afslutter floatingen af de
> tre elementer ovenover, med en klar linie til højre.
>
> Tanken med at cleare til høje, i stedet for til both, prøvede jeg så at
> overføre til artikel siden.
> Men det går galt, fordi den højre spalte ikke altid er den højeste.
> Så spalterne er pakket ind i en ekstra wrapper - sp_wrap.
> Inde i den, er sat et element, hvis formål er at markere bunden. Det hedder
> sp_stop, og er reelt det du ser som den mørke streg under elementerne. Det
> floater left, og har en højde på 1px og bredde på 100% - det er nødvendigt at
> det har indhold. Derfor vil det altid være under den højeste af spaletrne. Og
> endelig er der så det element der clearer - sp_clear, der blot har
> clear:right.
> Og alt dette inde i den nye sp_wrap.
> Og man skal bemærke at der *ikke* er clearet i wrap-indhold. Den fylder kun
> som overskriften - clearer man den, vil man igen trække den ned til bunden af
> menuen (undtaget IE < 7, formentlig). Og den hvide baggrund er faktisk i
> sp_wrap - ikke i wrap_indhold. (Brug evt Firebug i FF til at se det.)
>
> Problemet med at IE7 lod den blå boks fare helt til højre, skyldte at sp_wrap
> ikke havde bredde. Den har nu fået 100%, og IE7 (IE8 i kompatibilitet - det
> er vist ikke helt det samme) opfører sig nu som en rigtig browser.
>
> Endelig er/var der problemet med at wrap_indhold fyldte helt over til menuen
> i IE7. Det er en kendt bug i IE, og løses ved at give elementet et eller
> andet, der får IE til at sætte hasLayout (der er speciel for IE). Jeg har sat
> zoom:1; på den, og det løser problemet (zoom er også en M$ opfindelse, og det
> giver formentlig en css valideringsfejl - men de øvrige browsere ignorer den
> blot).
> Til gengæld, opfører IE7 sig rigtigt med cleareringerne, så du vil kunne se
> at stregen under de to spalter er dobbelt - der er en fra sp_stop og en fra
> wrap_indhold. (Den er der også i de andre, men bag ved overskriften)
> Hvis du ikke kan leve med det, kan den ekstra fjernes med en CC til IE7. Det
> er lidt tricky, fordi nogle af dine sider faktisk bruger stregen, også i IE7,
> så lige hvordan afhænger af hvordan du includer de forskellige ting.
>
> Det er måske nok ikke en optimal løsning - der sættes elementer ind i HTML'en
> som faktisk ikke hører til der, som ikke har indhold, men er rent design.
> Til gengæld kan man sige, at den har en stor fordel : det viker! B-)
>
> Du skal nok teste i IE7 - jeg har kun 8'eren, og kan teste i
> kompatibilitetsmode.
>
> Og ellers spørger du bare, så skal jeg gøre mit bedste for at rede trådene ud
> :D
>
> Birger

Gosjul til dig og dine - og alle andre, også!
^^
Vidste der var noget der var smuttet...

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 24 Dec., 03:59, Birger Sørensen wrote:

> Jeg skal pt ve at forklare...
> F rst skal det lige pointeres at alt andet er ens p de to sider, og de
> anverder samme css.
> Kun indholdet af din wrap_indhold er ndret, og der er to forskellige
> css filer for de to slags indhold.
> Dette aht dit arbejde med at kunne include indhold.
>
> Og jeg tager listen f rst - det var ogs den der gav grundlaget til
> l sningen p det andet problem.
> Problemet er stadig at browserne tolker indholdet der vises i margenen
> som h rende til elementet. N r man clearer, kommer elementet derfor til
> at g til bunden af menuen, og ikke stoppe hvor det "skal" (forventes),
> ved det indhold der er i elementet iflg kildekoden.
> Og tanken var s at i stedet for at cleare til both (have fri udsigt
> til margin i begge sider), kun at cleare til h jre.
> S den du har kaldt row2 (sted og pris), har f et en clear:right.
> Din ops tning af de floatede elementer var ikke rigtig. Den har jeg
> ndret p . For det f rste skal floatede elementer til h jre, altid
> komme f rst. Nogle af browserne starter (eller startede) forfra med
> positionsberegninger, n r de m dte et element der floatede til h jre.
> Det midterste element skal ikke floates - det flyder selv. Det er det
> gule vin_info (hvor du har teksten). Men det har margins, der giver
> plads til de to floatede elementer til venstre og h jre. Fordelen ved
> at lade det flyde selv p denne m de, er at det selv tilpasser sig i
> st rrelsen - hvilket vist var et af m lene..
> Det skal st sidst - efter de floatede.
> For nu at kunne afslutte floatingen i hvert item p listen (m ske ogs
> for overskueligheden), er der sat en div om hver. row2 afslutter
> floatingen af de tre elementer ovenover, med en klar linie til h jre.

Også jeg har taget listen først. Og det virker jo helt perfekt (og
endda fuldstændig brugbart helt tilbage til IE5). Jeg takker også for
forklaringernerne. Det er godt at vide hvorfor tingene gør som de gør,
så har jeg en chance for at bruge det i andre situationer også. Meget
lærerigt.

Der er dog en ting, jeg har gjort en lille smule anderledes i forhold
til din "opskrift": Jeg har prøvet med din ekstra div uden om row1,
men den gør ingen forskel i praksis, og jeg kan heller ikke forstå at
den i teorien skulle have nogen funktion, idet row1 jo omslutter de
tre elementer, som rækken består af. En omsluttende div må vel være
nok. Så jeg har udeladt din ekstra div.

Der er en enkelt ting jeg ikke forstår: Jeg forstår ikke row2's clear:
right. Og i praksis gør det ingen forskel om den er der eller ej.
Relateret hertil forstår jeg ikke, når du skriver "row2 afslutter
floatingen af de tre elementer ovenover, med en klar linie til h jre."
Jeg forstår ikke hvad row2 har at gøre med floats'ne ovenfor i row1.

/Preben

---

Preben Nielsen udtrykte præcist:
8X
> Også jeg har taget listen først. Og det virker jo helt perfekt (og
> endda fuldstændig brugbart helt tilbage til IE5). Jeg takker også for
> forklaringernerne. Det er godt at vide hvorfor tingene gør som de gør,
> så har jeg en chance for at bruge det i andre situationer også. Meget
> lærerigt.
>
> Der er dog en ting, jeg har gjort en lille smule anderledes i forhold
> til din "opskrift": Jeg har prøvet med din ekstra div uden om row1,
> men den gør ingen forskel i praksis, og jeg kan heller ikke forstå at
> den i teorien skulle have nogen funktion, idet row1 jo omslutter de
> tre elementer, som rækken består af. En omsluttende div må vel være
> nok. Så jeg har udeladt din ekstra div.
>
> Der er en enkelt ting jeg ikke forstår: Jeg forstår ikke row2's clear:
> right. Og i praksis gør det ingen forskel om den er der eller ej.
> Relateret hertil forstår jeg ikke, når du skriver "row2 afslutter
> floatingen af de tre elementer ovenover, med en klar linie til h jre."
> Jeg forstår ikke hvad row2 har at gøre med floats'ne ovenfor i row1.
>
> /Preben

At lære er vel et af formålene med grupperne her

Den ekstra div indholder både row1 og row2, som i mine øjne udgør et
"item", og så er det ofte en god ide at kæde dem sammen i HTML'en.
(Man kan give denne div en class, og har så mulighed for gennem css'en
at manipulere visningen af et enkelt item som en enhed - f.eks.
afslutter du et "item" med en linie i bunden og en margin til næste
"item" - det gør du i row2 -, og har ens font/margin/padding på de to
indgående elementer - det vil kunne sættes på denne div, og du skal kun
rette et sted, i stedet for at skulle rette begge indgående elementer)

Jeg tror måske også, at div'en har løst noget af problemerne med float
i row 1, sådan som du havde elementerne oprindeligt - evt. i
kombination med den clear right, der strengt taget ikke længere er
nødvendig.
Til gengæld, er jeg sikker på at clear:right, var nødvendig som du have
elementerne floatede. Du havde den midterste tekst i et floated element
også, og der skal så cleares, for at sikre at row2 ikke hopper op efter
dele af row1.
vin-info elementet overflødiggøre clearen, fordi det ikke er floatet og
fylder midst lige så meget som de floatede elementer, som det er lige
nu.
Men jeg mener faktisk, at uden en clear, vil row2 kunne glide op og
blande sig med row1 i nogle browsere, hvis der ikke cleares og du
ændrer på nogle af de indgående elementer. Og det er stadig sådan, at
hvis du clearer til both, vil kun det første item blive stående - de
øvrige hopper ned under menuen.
Men du har helt ret i, at faktisk burde den clear være inde i row1 -
evt. som en vin-info:after, så man undgår et ekstra element i HTML'en.
Jeg satte den på row2, i mine eksperimenter, for at få tingene til at
virke efter hensigten - hvilket de så gjorde, og clearen blev
stående...
Det er ikke ensbetydende med at det er de vise sten, eller at det skal
eller kun kan gøres sådan.

Og jeg vil også gerne poientere, at jeg har ikke gjort noget for at
optimere eller forbedre hverken denne løsning, eller din kode i øvrigt
- heller ikke på artikel siden.
Det har handlet om at få det visuelle til at fungere, og ikke ret meget
mere, så der er formentlig ting der kan gøres fiksere og/eller
anderledes, og mere overskueligt.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk

---

On 24 Dec. 2010, 03:59, Birger Sørensen wrote:

> Tanken med at cleare til høje, i stedet for til both, prøvede jeg så at
> overføre til artikel siden.
> Men det går galt, fordi den højre spalte ikke altid er den højeste.
> Så spalterne er pakket ind i en ekstra wrapper - sp_wrap.
> Inde i den, er sat et element, hvis formål er at markere bunden. Det
> hedder sp_stop, og er reelt det du ser som den mørke streg under
> elementerne. Det floater left, og har en højde på 1px og bredde på 100%
> - det er nødvendigt at det har indhold. Derfor vil det altid være under
> den højeste af spaletrne. Og endelig er der så det element der clearer
> - sp_clear, der blot har clear:right.
> Og alt dette inde i den nye sp_wrap.
> Og man skal bemærke at der *ikke* er clearet i wrap-indhold. Den fylder
> kun som overskriften - clearer man den, vil man igen trække den ned til
> bunden af menuen (undtaget IE < 7, formentlig). Og den hvide baggrund
> er faktisk i sp_wrap - ikke i wrap_indhold. (Brug evt Firebug i FF til
> at se det.)
>
> Problemet med at IE7 lod den blå boks fare helt til højre, skyldte at
> sp_wrap ikke havde bredde. Den har nu fået 100%, og IE7 (IE8 i
> kompatibilitet - det er vist ikke helt det samme) opfører sig nu som en
> rigtig browser.

Jeg har nu kigget på og tjekket din artikel-model. Det har taget lidt
tid, fordi jeg jo i den forrige tråd, der omhandlede dette problem,
endte med at være tilfreds med at wrap_indholds underkant tvinges ned
til underkanten af menuen. Faktisk giver det jo god mening rent
visuelt.
Så jeg har afventet, at jeg stødte ind i et ligende problem, hvor det
ikke gav mening med denne underkants-nedtvingning, og det er så sket
nu. Jeg har så prøvet på at se om der var principper i artikel-
modellen, som kunne løse de nye problemer. Men sådan skulle det ikke
gå. (Jeg må sige at jeg oplever det som ekstremt uintuitivt, bøvlet og
tidskrævende at arbejde med det her div og clear.)
Mht. til artikel-løsningen vil jeg i parentes lige bemærke, at heller
ikke her har jeg kunnet få øje på virkningen af din clear: right (i
div'en med .sp_clear). En div helt uden egenskaber gør (af en grund
jeg ikke forstår) præcis samme nytte. Jeg har i det hele taget i alle
de situationer hvor jeg har haft problemer af mere eller mindre samme
slags, aldrig kunnet se effekten af en clear-right. Du behøver ikke
kommentere, blot til info.

Nå, til det nye (og beslægtede) problem, der som sagt gør det
uomgængeligt nødvendigt, at en div's højde ikke udvides ned til
menuens underkant. Siden med problemet kan ses her:

http://vinsiderne.dk/test8/ordbog_test.htm

Venstre side med ord/begreber (.ord) og højre side med forklaringer af
ord/begreber (.ordforklaringer) skal selvfølgelig være lige høje og er
derfor pakket ind i en .wrap_ord_saet. Men problemet opstår (i
Firefox), når teksten til venstre fylder mere i højden end den
samhørende tekst til højre (når højre side fylder mest i højden er der
intet problem). Ved den obligate clearing sker der det - og så er vi
tilbage ved "artikel-problemet" - at underkanten af det clearede ryger
ned og flugter med underkanten af venstremenuen, dvs. boksen bliver
alt for høj. I modsætning til med artiklen, hvor det visuelt var ok,
så går det ikke her.

I forbindelse med ordbogen har jeg en ny observation, som så vidt jeg
kan se gør, at den forklaring du fandt på problemet, og som så helt
meningsfuld ud, ikke holder. Du skrev:

>Problemet er stadig at browserne tolker indholdet der vises i margenen
>som hørende til elementet. Når man clearer, kommer elementet derfor til
>at gå til bunden af menuen, og ikke stoppe hvor det "skal" (forventes),
>ved det indhold der er i elementet iflg kildekoden.

Men i forbindelsen med ordbogen - og i modsætning til artiklen -
befinder menuen sig IKKE i nogle af de berørte elemters margen! Men
clearingen forholder sig øjensynligt her til indhold der ligger
udenfor elementet, hvis jeg tolker rigtigt. Men sådan er det måske
bare? Hvis det er sådan, så holder din forklaring selvfølgelig.

En detalje: Jeg har clearet .ordforklaringer, da clearing
af .wrap_ord_saet udover at give samme problem som beskrevet
yderligere giver problemer med baggrundsfarvens højde på
ordforklaringsdelen. clear:both og clear:right giver samme resultat,
dvs. virker, mens clear:right ikke giver noget.

Jeg håber at du (eller andre) kan hjælpe.

/Preben

---

Da mit indtryk er at nærværende tråd ikke læses mere, har jeg oprettet
spørgsmålet fra indlægget ovenfor i en ny tråd: "Et tredje div-problem
(sikkert beslægtet med tidligere problemer) Indstillinger".

/Preben

---

Preben Nielsen wrote:
> Da mit indtryk er at nærværende tråd ikke læses mere, har jeg oprettet
> spørgsmålet fra indlægget ovenfor i en ny tråd: "Et tredje div-problem
> (sikkert beslægtet med tidligere problemer) Indstillinger".

Sikke noget pladder. Alle indlæg læses.

--
Venlig hilsen/Best regards
Erik Olsen
http://www.modelbaneteknik.dk/