[IE5.0] box-model hack werkt niet goed - Softwareontwikkeling

vrijdag 30 juli 2004 10:28

Acties:

Topicstarter

Ik dacht dat de volgende box-model hack goed werkte:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            div {
                border:50px solid #f00;
                width:200px;

                voice-family: "\"}\""; 
                voice-family:inherit;

                width:100px;
            }
            
            div p {
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div>
            <p>blaat</p>
        </div>
    </body>
</html>

maar hij werkt zo goed, dat de <p> helemaal niet meer bold wordt, maw geen enkele style-rule na de hack wordt nog uitgevoerd. Op IE5.5 werkt het wel goed. Is dit een bekende beperking van de IE5 box-model hack of doe ik iets fout?

vrijdag 30 juli 2004 10:43

Acties:

Verwijderd

Wat dacht je van deze hack:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
            div {
                border:50px solid #f00;
                width:200px;
                wid\th:100px;
            }
            
            div p {
                font-weight:bold;
            }
        </style>
    </head>
    <body>
        <div>
            <p>blaat</p>
        </div>
    </body>
</html>

Die werkt wel in IE5

[ Voor 13% gewijzigd door Verwijderd op 30-07-2004 10:44 ]

vrijdag 30 juli 2004 10:56

Acties:

Genoil

Topicstarter

hm ja die ziet er wel lekker vies uit maar werkt idd

thx!

vrijdag 30 juli 2004 11:07

Acties:

Rainman

Hier staan nog meer soortgelijke hacks voor de liefhebbers

vrijdag 30 juli 2004 11:13

Acties:

Verwijderd

Genoil schreef op 30 juli 2004 @ 10:56:
hm ja die ziet er wel lekker vies uit maar werkt idd
thx!

Die ziet er vies uit? Die ziet er juist geniaal uit. Ik vond die hack van jou veel ranziger. Beetje IE5.0 voor de gek houden door hem te laten denken dat het het eind van de css selector is.

Als het maar werkt toch

vrijdag 30 juli 2004 11:20

Acties:

disjfa

be

Die hacks zijn zowizo vies. Maakt niet uit welke, dat het werk is weer een ander feit maar je kan ze het best vermeiden...

Cascading Stylesheet:

    div.buiten{
        width:200px;
    }
    div.binnen{
        border:50px solid aqua;
    }

HTML:

<div class="buiten">
    <div class="binnen">
    </div>
</div>

Denk aan de elementen div en p die je in je ts gebruikt

[ Voor 19% gewijzigd door disjfa op 30-07-2004 11:21 ]

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 30 juli 2004 11:21

Acties:

Genoil

Topicstarter

Verwijderd schreef op 30 juli 2004 @ 11:13:
[...]

Die ziet er vies uit? Die ziet er juist geniaal uit. Ik vond die hack van jou veel ranziger. Beetje IE5.0 voor de gek houden door hem te laten denken dat het het eind van de css selector is.

Als het maar werkt toch

Ja okee maar ik vind het zo "jammer" om wid\th te zeggen tegen alle browsers die het eigenlijk wel goed doen

en wat dat vermijden betreft...als je dat zo gaat doen schrijf je HTML die je eigenlijk niet nodig hebt als alle browsers goed waren geweest. met die "ranzige" hacks blijft het beperkt tot je CSS file...

Denk aan de elementen div en p die je in je ts gebruikt

ja okee in sommige gevallen is het te vermijden...maar ik ga echt geen extra geneste tags maken omdat ik zonodig geen hax wil gebruiken...

[ Voor 36% gewijzigd door Genoil op 30-07-2004 11:24 ]

vrijdag 30 juli 2004 11:27

Acties:

disjfa

be

Genoil schreef op 30 juli 2004 @ 11:21:
[...]
ja okee in sommige gevallen is het te vermijden...maar ik ga echt geen extra geneste tags maken omdat ik zonodig geen hax wil gebruiken...

?

div -> 200px breed
p -> border van 50px

Ik zie nergens extra geneste tags....

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 30 juli 2004 11:45

Acties:

Verwijderd

Genoil schreef op 30 juli 2004 @ 11:21:

[...]

ja okee in sommige gevallen is het te vermijden...maar ik ga echt geen extra geneste tags maken omdat ik zonodig geen hax wil gebruiken...

Hij bedoelt gewoon:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style>
    div.buiten{
        width:200px;
    }
    p.binnen{
        border:50px solid aqua;
    }

        </style>
    </head>
    <body>
      <div class="buiten">
          <p class="binnen">blaat
          </p>
      </div>
    </body>
</html>

Tja, ik moet toegeven dat het werkt en dat dit netter is dan een hack gebruiken. Nou jah, wat is er principieel op tegen om een hack te gebruiken? Wat je nu doet is in princiepe ook een hack omdat IE zich niet aan w3c boxmodel houdt.

Sorry disjfa, nu ik er over nadenk, zit er technisch gezien inderdaad geen hack in.

[ Voor 14% gewijzigd door Verwijderd op 30-07-2004 12:07 ]

vrijdag 30 juli 2004 11:47

Acties:

disjfa

be

Verwijderd schreef op 30 juli 2004 @ 11:45:
Wat je nu doet is in princiepe ook een hack omdat IE zich niet aan w3c boxmodel houdt.

Die mag je me uitleggen. Waar zit er een hack in?

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 30 juli 2004 12:21

Acties:

Genoil

Topicstarter

wat ik bedoelde, is dat je in een utopische browserwereld weg kan komen met:

code:

<p class="class-met-padding-en-width">
    wat ik bedoelde, is dat je in een utopische
    browserwereld weg kan komen met wat hier staat.
</p>

terwijl je nu dit doet:

code:

<div class="outer-met-width">
    <p class="inner-met-padding">
        en hier heb je dus een extra tag nodig om 
        je hack te voorkomen...
    </p>
</div>

(de p in de div uit m'n ts, was alleen maar om aan te geven dat IE5.01 m'n p niet bold maakte na toepassing van de commented backslash hack)

[ Voor 22% gewijzigd door Genoil op 30-07-2004 12:23 ]

vrijdag 30 juli 2004 12:54

Acties:

Spruit_elf

Intentionally left blank

disjfa schreef op 30 juli 2004 @ 11:47:
[...]

Die mag je me uitleggen. Waar zit er een hack in?

toch is dit geen ideale oplossing want zodra je meerder p's in de div hebt (wat vaak voorkomt omdat teksten vaak meerdere alineas hebben) dan moet je weer extra css gaan toepassen om het goed te brijen en als er maar 1 p in voor komt dan is die div ook eigenlijk weer overbodig omdat je dan alles met de p tag zou moeten kunnen oplossen

Those who danced were thought to be quite insane by those who could not hear the music.