/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Box Model Hack
Fra : Mikael Aktor


Dato : 28-09-02 09:02

For ikke så længe siden var her et spørgsmål der drejede sig om
problemer med at IE5 opfatter css box modellen forkert, dvs.
inkluderer padding, margin og border i "width" (således at
"width" bliver summen af content width, padding, margin og
border) i stedet for (som er korrekt) kun at opfatte "width" som
content width (altså uden padding, margin og border). Løsningen
på problemet var dels at undlade xml prologen inden doctype
erklæringen, dels (specielt med henblik på IE5) at gøre brug af
en særlig parsing error bug i IE5, altså simpelthen skrive noget
forkert kode ind i sit css. Denne løsning er "opfundet" af Tantek
Celik og er beskrevet her:
http://www.tantek.com/CSS/Examples/boxmodelhack.html

Jeg har forsøgt mig med denne løsning, men har misforstået et
eller andet, for det virker forkert. Min løsning kan ses på
www.dahr.dk/Web/BoxModelHack.html . Det er miningen at der skal
være to bokse der flugter lodret. Det ser også fint ud i IE6 men
i IE5 (som jo det hele drejer sig om) forsvinder den nederste
boks simpelthen. Her er koden:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

<style type="text/css">
#nobug {
width:200px; height:100px; background-color:#ffcc00; border: 3px
solid blue;
}
#bug {
width:206px; voice-family:"\"}\""; voice-family:inherit;
width:200px; height:100px; background-color:#ccff00; border: 3px
solid blue;
}
</style>

</head>

<body style="margin:20px">

<div id="nobug">&nbsp;</div>
<div id="bug">&nbsp;</div>

<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

-----------------

Hvordan skal det se ud, hvis det skal fungere?

/mik

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

 
 
Rune Glerup (29-09-2002)
Kommentar
Fra : Rune Glerup


Dato : 29-09-02 01:01

Mikael Aktor skrev:

<klip>
> Det er miningen at der skal
> være to bokse der flugter lodret. Det ser også fint ud i IE6 men
> i IE5 (som jo det hele drejer sig om) forsvinder den nederste
> boks simpelthen.

Selve hacket går jo ud på at IE5 har en bug der gør at den holder op med
at læse efter voice-family:"\"}\""; og derigennem skjuler man alt hvad
der står efter dette i den erklæring.

Din kode:

#bug {
width:206px; /* både IE5 og IE6 læser dette*/
voice-family:"\"}\""; /* IE5 stopper her */
voice-family:inherit; /* kun IE6 læser dette */
width:200px; height:100px; background-color:#ccff00; border: 3px
solid blue;
}

IE5 får således ikke fat i din background-color og din border. Den kan
du enten flytte op før voice-familiy defineres eller lave en ny
erklæring:

#bug {
width:206px;
voice-family:"\"}\"";voice-family:inherit;
width:200px
}
#bug {
height:100px;
background-color:#ccff00;
border: 3px solid blue
}

Vær opmærksom på at også height fejltolkes i IE5 og at du, for at få det
helt ens i begge browsere, således skulle skrive:

#bug {
width:206px;
height:106px;
voice-family:"\"}\"";voice-family:inherit;
width:200px
height:100px;
}
#bug {
background-color:#ccff00;
border: 3px solid blue
}

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

Mikael Aktor (29-09-2002)
Kommentar
Fra : Mikael Aktor


Dato : 29-09-02 09:50

Tak til Rune Glerup. Det jeg ikke havde forstået klart var dette:

"Rune Glerup" <usenet@kaboom.dk> skrev i en meddelelse news:MPG.1800611248a993989897c4@sunsite.dk...

> Selve hacket går jo ud på at IE5 har en bug der gør at den holder op med
> at læse efter voice-family:"\"}\""; og derigennem skjuler man alt hvad
> der står efter dette i den erklæring.

Jeg har revideret mit link: www.dahr.dk/Web/BoxModelHack.html . Der kan man se forklaring, kode og eksempel.

/mik



Rune Glerup (29-09-2002)
Kommentar
Fra : Rune Glerup


Dato : 29-09-02 15:04

Mikael Aktor skrev:

> Jeg har revideret mit link: www.dahr.dk/Web/BoxModelHack.html . Der kan =
> man se forklaring, kode og eksempel.

Jeg vil anbefale at man holder hacket og den øvrige CSS adskilt for at
sikre overskueligheden.

Du har helt glemt at medtage “be nice to Opera 5”-reglen.

Opera 5 har den samme parsing bug som IE5 men den har en korrekt
implentering af box modellen, så derfor laver man en ektra regel som
giver Opera 5 de korrekte værdier:

html>body #bug {
   /* de korrekte værdier til Opera 5 */
}

IE forstår ikke > selektoren og vil ikke læse ovenstående.

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

Mikael Aktor (29-09-2002)
Kommentar
Fra : Mikael Aktor


Dato : 29-09-02 15:56


"Rune Glerup" <usenet@kaboom.dk> skrev i en meddelelse news:MPG.180126a7e3b35d8a9897c7@sunsite.dk...

Jeg vil anbefale at man holder hacket og den øvrige CSS adskilt for at
> sikre overskueligheden.

OK, så det er derfor du anbefaler den model hvor man laver to erklæreinger i stedet for den jeg har vist hvor det hele samles i én ....?

> Du har helt glemt at medtage “be nice to Opera 5”-reglen.

Ja, jeg har endnu ikke haftg én Opera-bruger på mine sider. Når den første melder sig, så skal jeg nok være nice.

endnu engang tak for hjælpen
/mik


Rune Glerup (29-09-2002)
Kommentar
Fra : Rune Glerup


Dato : 29-09-02 16:05

Mikael Aktor skrev:

> Ja, jeg har endnu ikke haftg =E9n Opera-bruger p=E5 mine sider. N=E5r =
> den f=F8rste melder sig, s=E5 skal jeg nok v=E6re nice.=20

Det er ikke sikkert. Opera er som standard sat til at indentificere sig
som Internet Explorer (for at undgå scripts der udelukker Netscape og
andre).

Jeg synes ikke det er for meget forlangt at man inkluderer reglen når
man bruger hacket.

--
/Rune
w|http://kaboom.dk/
Har du ikke adgang til SSI? Prøv
<http://kaboom.dk/works/wwwhitepapers/preuploadincluding/>

Mikael Aktor (29-09-2002)
Kommentar
Fra : Mikael Aktor


Dato : 29-09-02 16:20


"Rune Glerup" <usenet@kaboom.dk> skrev i en meddelelse news:MPG.18013506a07f29d9897c8@sunsite.dk...
> Opera er som standard sat til at indentificere sig
> som Internet Explorer (for at undgå scripts der udelukker Netscape og
> andre).

"Identificere sig", mener du i user agent strengen? Mit script skriver denne streng fra alle besøgende til en fil. Hvis det er sådan, skal jeg selvfølgelig have det hele med.

/mik


Lasse Reichstein Nie~ (29-09-2002)
Kommentar
Fra : Lasse Reichstein Nie~


Dato : 29-09-02 16:36

"Mikael Aktor" <aktor789@hotmail.com> writes:
>
> "Identificere sig", mener du i user agent strengen? Mit script
> skriver denne streng fra alle besøgende til en fil. Hvis det er
> sådan, skal jeg selvfølgelig have det hele med.

Opera skriver altid "Opera" i user agent-strengen. Hvis den
efterligner Netscape eller IE, så står Opera sidst i strengen, når den
er sig selv står det først.

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
'Faith without judgement merely degrades the spirit divine.'

Mikael Aktor (29-09-2002)
Kommentar
Fra : Mikael Aktor


Dato : 29-09-02 16:57


"Lasse Reichstein Nielsen" <lrn@hotpop.com> skrev i en meddelelse news:fzvsn6zg.fsf@hotpop.com...

> Opera skriver altid "Opera" i user agent-strengen. Hvis den
> efterligner Netscape eller IE, så står Opera sidst i strengen, når den
> er sig selv står det først.


OK, det mente jeg nok. Tak for bekræftelsen.

/mik


Søg
Reklame
Statistik
Spørgsmål : 177557
Tips : 31968
Nyheder : 719565
Indlæg : 6408866
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste