---

Jeg har fået et problem med mine DIV-tags. Jeg har lagt min side om
fra table til div, og det fungerer fint i alle moderne browsere. Men
så fandt jeg desværre på, at jeg også ville se det i IE 6.0. Til det
formål fandt jeg så denne artikel:

http://labs.insert-title.com/Multiple-IEs-in-Windows_article795.aspx

Ved hjælp af den er det faktisk lykkedes, at få installeret IE 5.5 og
6.0 på computeren ved siden af 7.0. (Eneste problem er, at alle tre
tror, de hedder IE 7.0, så under testen skal jeg tilpasse mine
betingede anvisninger). Med denne opsætning er jeg så stødt på et
problem .....

På en side ønsker jeg et billede ude til højre og den tilhørende tekst
til venstre for billedet. Jeg ønsker, at teksten skal udfylde hele
området til venstre for billedet, uanset hvor bredt browservinduet er.
Derfor skriver jeg:

<div style="position:absolute; right:200px; left:0px; top:0px;">
   .... noget tekst ....
</div>

<div style="position:absolute; width:200px; right:0px; top:0px;">
   <img src="billede.jpg" width="190" height="300">
</div>

Det fungerer fint i alle nye browsere; men med Microsofts gamle l...
lander billedet helt ovre i venstre side oven i teksten. Dvs.
browseren konstaterer åbenbart, at jeg har udeladt left ved billedet,
og indsætter så en left:0px, hvilket får den til at ignorere mine
width:200px; right:0px;

Findes der en løsning på ? .... andet end:

<!--[if lt IE 7]>
<meta http-equiv="refresh" content="0;url=<a
href="http://getfirefox.com">   
<![endif]-->

---

Lars J. Helbo, DK skrev:

> Ved hjælp af den er det faktisk lykkedes, at få installeret IE 5.5 og
> 6.0 på computeren ved siden af 7.0. (Eneste problem er, at alle tre
> tror, de hedder IE 7.0, så under testen skal jeg tilpasse mine
> betingede anvisninger). Med denne opsætning er jeg så stødt på et
> problem .....

Jeg har tidligere anbefalet Tredosofts Multiple-IE løsning,
men er nu gået fra den, af flere grunde. Dels det besvær,
som du nævner [1], og dels at denne løsning ikke kan
anvendes i Vista.

> På en side ønsker jeg et billede ude til højre og den tilhørende tekst
> til venstre for billedet. Jeg ønsker, at teksten skal udfylde hele
> området til venstre for billedet, uanset hvor bredt browservinduet er.
> Derfor skriver jeg:
>
> <div style="position:absolute; right:200px; left:0px; top:0px;">
>    .... noget tekst ....
> </div>
>
> <div style="position:absolute; width:200px; right:0px; top:0px;">
>    <img src="billede.jpg" width="190" height="300">
> </div>

Du får ikke andet end besvær ud af det:
1. Inline styles skal du kopiere fra
det ene element til det andet, måske
endda fra side til side.
2. Absolut position tager det positionerede
element helt ud af sidens normale omløb.

En bedre måde at opnå det du ønsker er:

<div class="container">
<img class="right" src="..." alt="..."
height="300" width="190">
[Tekst]
</div>

Og et stylesheet
img.right {float:right;}

Teksten vil så flyde op på venstre side af
billedet og blive så bred som #container-elementet
tillader.

[1]
Sagen er nemlig den, at Microsoft betingede kommentarer,
som jeg fortæller om herover på side 344, invalideres, hvis
du har flere end én version af Internet Explorer installeret
på din computer.

Er det tilfældet, vil alle dine versioner af IE håndterer
alle betingede kommentarer på samme måde, nemlig som den
originalt installerede IE-version. Lad os for eksempel sige,
at du bruger Windows XP sammen med Internet Explorer 5,
som du har installeret på den ovenfor beskrevne måde. Så
vil begge versioner læse dine betingede kommentarer, som
om de begge var Internet Explorer 6, og eventuelle
formregler, som du ønsker at skjule for IE 6 og kun vise
i IE5, vil blive anvendt i begge tilfælde. /Det gør det i
praksis umuligt at teste for validiteten af din
IE5-specifikke CSS-kode, hvis denne er indeholdt i en
betinget kommentar./

Hvorfor er det et problem? Det er det, fordi Microsoft
stærkt anbefaler at bruge netop betingede kommentarer til at
skelne mellem IE7 og tidligere versioner. Og det er en
fornuftig anbefaling, af følgende grund: Stort alle de
stylesheet hacks, jeg har beskrevet ovenfor, beror på
mangelfuld/forkert fortolkning af formdeklarationer og/eller
formregler i tidligere versioner af Internet Explorer. Og i
IE7 er der i meget betydeligt omfang rettet op på disse
forhold, som det også er beskrevet ovenfor.

(Side 355 i "Webdesign med stylesheets")

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen skrev:
> Lars J. Helbo, DK skrev:
>
>> Ved hjælp af den er det faktisk lykkedes, at få installeret IE 5.5 og
>> 6.0 på computeren ved siden af 7.0. (Eneste problem er, at alle tre
>> tror, de hedder IE 7.0, så under testen skal jeg tilpasse mine
>> betingede anvisninger). Med denne opsætning er jeg så stødt på et
>> problem .....
>
> Jeg har tidligere anbefalet Tredosofts Multiple-IE løsning, men er nu
> gået fra den, af flere grunde. Dels det besvær,
> som du nævner [1], og dels at denne løsning ikke kan anvendes i Vista.
>

Hov, jeg glemte lige at nævne, hvad jeg så
anbefaler: Det er Microsofts Virtual PC, der
gør det muligt at eksekvere Windows XP i et
vindue på computeren, med for eksempel
IE6 i ét XP-vindue og IE8Beta i et andet
XP-vindue, begge ved siden af IE7 i den
originale XP-installation.

Jeg har været lidt skeptisk (eller doven
men jeg må sige det fungerer endog meget godt.

(http://www.microsoft.com/windows/products/winfamily/virtualpc/overview.mspx)

--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

On Thu, 24 Apr 2008 12:30:09 +0200, Jørgen Farum Jensen
<jfjenzen@yahoo.dk> wrote:

>Du får ikke andet end besvær ud af det:

Normalt er jeg ikke uenig med dig i det, men jeg mener udmærket, der
kan være særlige situationer...

>1. Inline styles skal du kopiere fra
>det ene element til det andet, måske
>endda fra side til side.

Men hvis elementet kun forekommer en gang på hele websiden, så synes
jeg det er ganske smart, at samle alt om dette element på et enkelt
sted, hvorfor arbejde med to filer, hvis en fil kan gøre det?.

>2. Absolut position tager det positionerede
>element helt ud af sidens normale omløb.

Hvilket kan være meget smart, hvis elementet står i en php-include fil
og skal kunne fungere ens på mange forskellige sider.

Men bortset fra det, så gik min undren især på, at IE6-minus håndterer
DIV så helt anderledes end de nye browsere. Det er nemlig ikke bare et
problem med right. Overordnet ser siden sådan her ud:

<div id="menu" style="position:absolute; width:200px; left:0px; top;>
   .... min menu ....
</div>

<div id="indhold" style="position:absolute; left:200px; right:0px;
top:0px;">

<div style="position:absolute; right:200px; left:0px; top:0px;">
   .... noget tekst ....
</div>

<div style="position:absolute; width:200px; right:0px; top:0px;">
   <img src="billede.jpg" width="190" height="300">
</div>
</div>

Når nu IE6 ikke kan håndtere right:0px korrekt, så måtte man vel
normalt antage, at billedet i det mindste ville blive placeret i
venstre side af den overordnede div "indhold"; men det gør det heller
ikke. Det ryger helt over i venstre side af skærmen - oven på menuen.

---

Lars J. Helbo, DK skrev:

> Men hvis elementet kun forekommer en gang på hele websiden, så synes
> jeg det er ganske smart, at samle alt om dette element på et enkelt
> sted, hvorfor arbejde med to filer, hvis en fil kan gøre det?.

Hvorfor bruge flere bytes end nødvendigt?
>> 2. Absolut position tager det positionerede
>> element helt ud af sidens normale omløb.
>
> Hvilket kan være meget smart, hvis elementet står i en php-include fil
> og skal kunne fungere ens på mange forskellige sider.

Det forstår jeg ikke en dyt af.

> Men bortset fra det, så gik min undren især på, at IE6-minus håndterer
> DIV så helt anderledes end de nye browsere. Det er nemlig ikke bare et
> problem med right. Overordnet ser siden sådan her ud:

Jeg mener at huske at det er et velkendt problem, som
IE<7 har med absolut postionering inde i et absolut
positioneret element. Men det er ret længe siden
jeg overhovedet har beskæftiget mig med en så
resolut inisteren på at bruge position:absolute;

> <div id="menu" style="position:absolute; width:200px; left:0px; top;>
>    .... min menu ....
> </div>
>
> <div id="indhold" style="position:absolute; left:200px; right:0px;
> top:0px;">
>
> <div style="position:absolute; right:200px; left:0px; top:0px;">
>    .... noget tekst ....
> </div>
>
> <div style="position:absolute; width:200px; right:0px; top:0px;">
>    <img src="billede.jpg" width="190" height="300">
> </div>
> </div>

Dette lille stylesheet gør det samme som ovenstående rod.
#menu {
width:200px;
float:left;
}
#pix {
float:right;}


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

---

Jørgen Farum Jensen wrote:


> Sagen er nemlig den, at Microsoft betingede kommentarer,
> som jeg fortæller om herover på side 344, invalideres, hvis
> du har flere end én version af Internet Explorer installeret
> på din computer.

> Er det tilfældet, vil alle dine versioner af IE håndterer
> alle betingede kommentarer på samme måde, nemlig som den
> originalt installerede IE-version.

Sådan oplever jeg ikke
http://hjemmesideskolen.dk/html/testsider/conditionalcomment.asp

Den side kan uden problemer fortælle mig, om jeg har åbnet den i IE 5.0,
5.5, 6 eller 7, så tilsyneladende kan de forskellige versioner af IE godt
skelne om de skal læse en conditional comment eller ej.

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk - http://ginnerskov.dk
http://vestfynswebdesign.dk - http://html-faq.dk