---

Jeg har lavet en hjemmeside, som fungerer fint i IE8 og IE9 men
hvor ét element placeres forkert i IE6 og IE7. Det vil jeg gerne
have løst.

Check hjemmesiden på www.qualtative.dk - hvor du også vil kunne
se html-koden og CSS-filen, hvis du trykker F12 eller vælger
"udviklingsværktøj" fra IE's menulinje.

Hvis du ser hjemmesiden i IE6 eller IE7, vil du bemærke, at Q'et
nederst til højre er placeret uden for den grønne boks. Mens Q'et
er inden for den grønne boks i IE8 og IE9.

I CSS-filen bruger jeg:

..q_pic {
position:absolute;
bottom:4px;
right:6px; }

I index.shtlm-filen bruger jeg:

<div class="q_pic">
<img src="q_pro.jpg" alt="q_pic"/>
</div>

Som er placeret i en <div class="content"> der er defineret som:

..content {
background-color:#31859B;
border:5px solid white;
width:889px;
w\idth:879px;
height:326px;
he\ight:316px;
margin-top:-328px; }

Jeg ved ikke, om der er nogle særlige koder for IE6 og IE7, som
jeg kan bruge. Eller om jeg evt. skal placere <div class="q_pic">
et andet sted i index.shtml-filen.

Har du et bud på, hvordan jeg løser denne udfordring?

Skriv hvis du har brug for yderligere info.

Mvh. Kim


--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

On 30-06-2011 09:24, Kim Madsen wrote:
> Jeg har lavet en hjemmeside, som fungerer fint i IE8 og IE9 men
> hvor ét element placeres forkert i IE6 og IE7. Det vil jeg gerne
> have løst.

> Mvh. Kim

Dine div'er overlapper hinanden.
Det medfører at små variationer i f.eks. tekst størrelse, kan medføre at
der ikke er tilstrækkelig plads til at elementerne kan være "side by side"
Så vidt jeg kan se, er dit element med Q'et, ikke inde i det element
hvor du gerne vil have det vist.

Du bliver nødt til at gennemgå dine elementer, og regne på bredden.

Se evt. "Box-modellen":
http://www.w3.org/TR/CSS2/box.html

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:

> Dine div'er overlapper hinanden.
> Det medfører at små variationer i f.eks. tekst størrelse, kan medføre at
> der ikke er tilstrækkelig plads til at elementerne kan være "side by side"
> Så vidt jeg kan se, er dit element med Q'et, ikke inde i det element
> hvor du gerne vil have det vist.
>
> Du bliver nødt til at gennemgå dine elementer, og regne på bredden.
>
> Se evt. "Box-modellen":
> http://www.w3.org/TR/CSS2/box.html

Hej Karl Erik,

Tak for dit svar. Jeg har prøvet at regne på det, og synes ikke at der burde
være problemer. Jeg har også eksperimenteret med at øge bredden og højden af
..content. Men det hjælper ikke.

Når du siger, at mine div'er overlapper hinanden, tror jeg godt at jeg kan
følge hvad du mener. Men hvilke konkrete div'er mener du overlapper hinanden
- og er det i det vandrette lag (bredden) eller i det lodrette lag (højden)?
Fordi mine eksperimenter har ikke kunnet afhjælpe det, hvor jeg både har
øget bredden og højden.

Du skriver også, at elementet med Q'et ikke er inde i det rette element.
Hvilket element mener du da, at det bør være i?

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Jeg kan tilføje, at siden fremstår korrekt mht. Q'et i alle øvrige browsere:
Chrome 10 og 11, Firefox 3.0, 3.6 og 4.0, Safari 4.0 og 5.0 (til Mac).

Så jeg tænker, at det er IE6 og IE7, som "fejlfortolker". Så jeg tænker, om en
mulighed er at indsætte noget særlig kode, der tager højde for IE6 og IE7. Er
der ikke noget med, at man kan sætte betingelser ind i HTML-kode? Noget á la:

<!--[if IE 6]>

bla bla bla

<![endif]-->

og så ved "bla bla bla" definere, at Q'et skal have en margin-bottom på lidt
mere for at flytte Q'et op til den rette position.

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

On 30-06-2011 11:38, Kim Madsen wrote:

> Hej Karl Erik,
>
> Tak for dit svar. Jeg har prøvet at regne på det, og synes ikke at der burde
> være problemer. Jeg har også eksperimenteret med at øge bredden og højden af
> .content. Men det hjælper ikke.
>
> Når du siger, at mine div'er overlapper hinanden, tror jeg godt at jeg kan
> følge hvad du mener. Men hvilke konkrete div'er mener du overlapper hinanden
> - og er det i det vandrette lag (bredden) eller i det lodrette lag (højden)?
> Fordi mine eksperimenter har ikke kunnet afhjælpe det, hvor jeg både har
> øget bredden og højden.
>
> Du skriver også, at elementet med Q'et ikke er inde i det rette element.
> Hvilket element mener du da, at det bør være i?
>
> Mvh. Kim
>

Hej Kim.

Prøv i første omgang at ændre:

..q_pic {
position:absolute;
bottom:4px;
right:6px; }

Til:
..q_pic {
width: 160px;
float: right;
margin: 0;
padding: 0;}

Det bringer sikkert uorden i dit layout, men det vil vise om IE opfører
sig normalt.

Det er ikke nemt at opbygge en side ved at positionere. Det er meget
nemmere at lade elementerne følge sidens flow.

Q'et er rigtigt placeret - jeg så forkert da du også har ny logo

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:

> Hej Kim.
>
> Prøv i første omgang at ændre:
>
> ..q_pic {
> position:absolute;
> bottom:4px;
> right:6px; }
>
> Til:
> ..q_pic {
> width: 160px;
> float: right;
> margin: 0;
> padding: 0;}
>
> Det bringer sikkert uorden i dit layout, men det vil vise om IE opfører
> sig normalt.
>
> Det er ikke nemt at opbygge en side ved at positionere. Det er meget
> nemmere at lade elementerne følge sidens flow.
>
> Q'et er rigtigt placeret - jeg så forkert da du også har ny logo
>
> Karl Erik.

Hej Karl Erik,

Jeg har nu prøvet at gøre som du siger, og det ødelægger rigtig nok designet på
min side, men nu ser det i det mindste ens ud på alle versioner af IE.

Men hvad gør jeg så videre nu? Det hjælper vel ikke at sætte en top-margin på
Q-elementet, fordi så vil det jo igen blive placeret forskelligt alt afhængig af,
hvilken skrifttype og skriftsstørrelse en konkret brugers browser har, vil jeg
gætte på...

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

On 30-06-2011 13:06, Kim Madsen wrote:

> Hej Karl Erik,
>
> Jeg har nu prøvet at gøre som du siger, og det ødelægger rigtig nok designet på
> min side, men nu ser det i det mindste ens ud på alle versioner af IE.
>
> Men hvad gør jeg så videre nu? Det hjælper vel ikke at sætte en top-margin på
> Q-elementet, fordi så vil det jo igen blive placeret forskelligt alt afhængig af,
> hvilken skrifttype og skriftsstørrelse en konkret brugers browser har, vil jeg
> gætte på...
>
> Mvh. Kim
>

Det er ikke nemt, men du kan indsætte Q'et som baggrundsbillede i .content:

background-image:url('q_pro.jpg');
background-repeat:no-repeat;
background-position:right bottom;

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

On 30-06-2011 13:47, Karl Erik Christensen wrote:
> On 30-06-2011 13:06, Kim Madsen wrote:
>
>> Hej Karl Erik,
>>
>> Jeg har nu prøvet at gøre som du siger, og det ødelægger rigtig nok
>> designet på
>> min side, men nu ser det i det mindste ens ud på alle versioner af IE.
>>
>> Men hvad gør jeg så videre nu? Det hjælper vel ikke at sætte en
>> top-margin på
>> Q-elementet, fordi så vil det jo igen blive placeret forskelligt alt
>> afhængig af,
>> hvilken skrifttype og skriftsstørrelse en konkret brugers browser har,
>> vil jeg
>> gætte på...
>>
>> Mvh. Kim
>>
>
> Det er ikke nemt, men du kan indsætte Q'et som baggrundsbillede i .content:
>
> background-image:url('q_pro.jpg');
> background-repeat:no-repeat;
> background-position:right bottom;
>
> Karl Erik.
>

Du får måske brug for at sætte en højre margin:

margin-right:165px;

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

On 30-06-2011 13:55, Karl Erik Christensen wrote:
> On 30-06-2011 13:47, Karl Erik Christensen wrote:
>> On 30-06-2011 13:06, Kim Madsen wrote:
>>
>>> Hej Karl Erik,
>>>
>>> Jeg har nu prøvet at gøre som du siger, og det ødelægger rigtig nok
>>> designet på
>>> min side, men nu ser det i det mindste ens ud på alle versioner af IE.
>>>
>>> Men hvad gør jeg så videre nu? Det hjælper vel ikke at sætte en
>>> top-margin på
>>> Q-elementet, fordi så vil det jo igen blive placeret forskelligt alt
>>> afhængig af,
>>> hvilken skrifttype og skriftsstørrelse en konkret brugers browser har,
>>> vil jeg
>>> gætte på...
>>>
>>> Mvh. Kim
>>>
>>
>> Det er ikke nemt, men du kan indsætte Q'et som baggrundsbillede i
>> .content:
>>
>> background-image:url('q_pro.jpg');
>> background-repeat:no-repeat;
>> background-position:right bottom;
>>
>> Karl Erik.
>>
>
> Du får måske brug for at sætte en højre margin:
>
> margin-right:165px;
>
> Karl Erik.
>

Hvis vi bliver ved længe nok, skal det nok lykkes

Det er jo .content-right-bottom vi skal have fat i.

..content-right-bottom {
background-image:url('q_pro.jpg');
background-repeat:no-repeat;
background-position:right bottom;
border:0px solid black;
float:left;
width:465px;
padding-left:20px;
margin-top:-7px;
margin-right:165px;}

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

On 30-06-2011 14:09, Karl Erik Christensen wrote:

> Det er jo .content-right-bottom vi skal have fat i.

Ser nu at du har ændret i .content.

Så skal du bare fjerne den hvide kant i højre side og i bunden af dit
billede - så blir det vist ikke meget bedre

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:

> Ser nu at du har ændret i .content.
>
> Så skal du bare fjerne den hvide kant i højre side og i bunden af dit
> billede - så blir det vist ikke meget bedre
>
> Karl Erik.

Lige præcis - det har jeg netop fået ændret, så det ser ordentligt ud.

Eneste lille mærkværdighed nu er, at i Chrome 11 er der fortsat den hvide
kant på disse steder på billedet, når jeg tester det i Adobe Browserlab.
Men det vælger jeg at leve med...

Mange tak for hjælpen!

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

On 30-06-2011 14:33, Kim Madsen wrote:

> Eneste lille mærkværdighed nu er, at i Chrome 11 er der fortsat den hvide
> kant på disse steder på billedet, når jeg tester det i Adobe Browserlab.
> Men det vælger jeg at leve med...
>
> Mange tak for hjælpen!
>
> Mvh. Kim
>

Det er sikkert fordi billedet er i browserens cashe, så hvis du kan
tømme den, kommer det "nye" billede ind i stedet.

Karl Erik.

--
http://dmwebdesign.dk - DM i Webdesign
http://ranunkelvej.com/b&o/ - Reparation af B&O Red Line højttalere
http://webdesign.ranunkelvej.com - Artikler om webdesign

---

Karl Erik Christensen wrote in dk.edb.internet.webdesign.html:

> Det er ikke nemt, men du kan indsætte Q'et som baggrundsbillede i .content:
>
> background-image:url('q_pro.jpg');
> background-repeat:no-repeat;
> background-position:right bottom;
>
> Karl Erik.

Hej Karl Erik,

Jeg har nu gjort som du skriver ovenfor - og ikke andet - og det virker! Genialt.
Mange tak for det.

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials

---

Kim Madsen formulerede spørgsmålet:
> Jeg har lavet en hjemmeside, som fungerer fint i IE8 og IE9 men
> hvor ét element placeres forkert i IE6 og IE7. Det vil jeg gerne
> have løst.
>
> Check hjemmesiden på www.qualtative.dk - hvor du også vil kunne
> se html-koden og CSS-filen, hvis du trykker F12 eller vælger
> "udviklingsværktøj" fra IE's menulinje.
>
> Hvis du ser hjemmesiden i IE6 eller IE7, vil du bemærke, at Q'et
> nederst til højre er placeret uden for den grønne boks. Mens Q'et
> er inden for den grønne boks i IE8 og IE9.
>
> I CSS-filen bruger jeg:
>
> .q_pic {
> position:absolute;
> bottom:4px;
> right:6px; }
>
> I index.shtlm-filen bruger jeg:
>
> <div class="q_pic">
> <img src="q_pro.jpg" alt="q_pic"/>
> </div>
>
> Som er placeret i en <div class="content"> der er defineret som:
>
> .content {
> background-color:#31859B;
> border:5px solid white;
> width:889px;
> w\idth:879px;
> height:326px;
> he\ight:316px;
> margin-top:-328px; }
>
> Jeg ved ikke, om der er nogle særlige koder for IE6 og IE7, som
> jeg kan bruge. Eller om jeg evt. skal placere <div class="q_pic">
> et andet sted i index.shtml-filen.
>
> Har du et bud på, hvordan jeg løser denne udfordring?
>
> Skriv hvis du har brug for yderligere info.
>
> Mvh. Kim

Problemet er at IE < 8 har problemer med right og bottom (og andre - i
det hele taget problemer) på absolut positionerede elementer.
Ved ikke om der findes et fix - men en søgning på gogle kan måske
bringe noget op.
Din .page har fast mål - måske kan brug af left/top i stedet for
right/bottom løse problemet.

I øvrigt en skidt ide, at designe layout med negtaive margener. Hvordan
ser siden ud, hvis browser vinduet er mindre end din page?
(svar : Man får et udsnit af midten af indholdet, og kan ikke scrolle
til venstre. Så indholdet og en god del af meningen er gået tabt,
allerede i dit layout. Hvis den f.eks. kan vise på mobil, kan den i
hvert fald ikke læses...)
Det primære for en webside, bør være indholdet. Og det er vist godt
nok. Men præsentationen kommer her i vejen for indholdet. Og det er
ikke så godt.
..page {
position : relative;
width : 891px;
margin : 80px auto 0px auto;
}
gør præcis det samme - men der kan scrolles rigtigt, hvis vinduet er
mindre end de 891px.
Du bruger negative margener for at anbringe din menu i margenen i et
andet element. Det er også en skidt ide.
En margen er (min)afstand til andre elementer (i samme flow). Den dag
browserne finder ud af at beregne margener rigtigt, vælter dit layout.
Og det kan snildt gøres uden de negative margener.

Man bruger ikke &nbsp til at rykke ting ind på en linie (hvad sker der
hvis brugeren ændrer skriftstørrelse?). Skal det være, mangler du ; ->
entitien hedder &nbsp;
Brug padding på det element der indeholder indrykkede elementer, eller
margin/padding på elementerne selv.

Lister skrives med fordel i eet af HTML's liste-elementer; ul eller ol.

Der er en vis logik i at designe i IE. Så er man sikker på at have alle
problemerne fra starten.
Mange bruger nu en rigtig browser i stedet.
Og du skal nok også bruge valideringsværktøjerne, i stedet for at stole
på hvad du ser på skærmen - specielt i IE.
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Du har valideringsfejl, der skyldes at du siger din side er XHTML - men
dele af den er skrevet i HTML.

Birger

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

---

Birger Sørensen wrote in dk.edb.internet.webdesign.html:

> Problemet er at IE < 8 har problemer med right og bottom (og andre - i
> det hele taget problemer) på absolut positionerede elementer.
> Ved ikke om der findes et fix - men en søgning på gogle kan måske
> bringe noget op.
> Din .page har fast mål - måske kan brug af left/top i stedet for
> right/bottom løse problemet.
>
> I øvrigt en skidt ide, at designe layout med negtaive margener. Hvordan
> ser siden ud, hvis browser vinduet er mindre end din page?
> (svar : Man får et udsnit af midten af indholdet, og kan ikke scrolle
> til venstre. Så indholdet og en god del af meningen er gået tabt,
> allerede i dit layout. Hvis den f.eks. kan vise på mobil, kan den i
> hvert fald ikke læses...)
> Det primære for en webside, bør være indholdet. Og det er vist godt
> nok. Men præsentationen kommer her i vejen for indholdet. Og det er
> ikke så godt.
> ..page {
> position : relative;
> width : 891px;
> margin : 80px auto 0px auto;
> }
> gør præcis det samme - men der kan scrolles rigtigt, hvis vinduet er
> mindre end de 891px.
> Du bruger negative margener for at anbringe din menu i margenen i et
> andet element. Det er også en skidt ide.
> En margen er (min)afstand til andre elementer (i samme flow). Den dag
> browserne finder ud af at beregne margener rigtigt, vælter dit layout.
> Og det kan snildt gøres uden de negative margener.
>
> Man bruger ikke   til at rykke ting ind på en linie (hvad sker der
> hvis brugeren ændrer skriftstørrelse?). Skal det være, mangler du ; ->
> entitien hedder  
> Brug padding på det element der indeholder indrykkede elementer, eller
> margin/padding på elementerne selv.
>
> Lister skrives med fordel i eet af HTML's liste-elementer; ul eller ol.
>
> Der er en vis logik i at designe i IE. Så er man sikker på at have alle
> problemerne fra starten.
> Mange bruger nu en rigtig browser i stedet.
> Og du skal nok også bruge valideringsværktøjerne, i stedet for at stole
> på hvad du ser på skærmen - specielt i IE.
> http://validator.w3.org/
> http://jigsaw.w3.org/css-validator/
>
> Du har valideringsfejl, der skyldes at du siger din side er XHTML - men
> dele af den er skrevet i HTML.
>
> Birger
>

Hej Birger,

Tak for dine input, som jeg lige vil nærlæse.

Har dog allerede fået implementeret dit forslag til .page, som så har
gjort, at siden står korrekt i Firefox (når jeg checker via Adobe
Browserlab) Takker.

Mvh. Kim

--
Vil du lære at kode HTML, XHTML, CSS, SSI, ASP eller ASP.NET?
- Pædagogiske tutorials på dansk
- Kom godt i gang med koderne
KLIK HER! => http://www.html.dk/tutorials