[CSS] welke IE CSS hacks heb ik nodig?

[Verwijderd]

ik ben nu al een tijdje aan het klooien met mijn site om hem om te gooien van tabel-layout naar een css layout

ik ben op aanraden van anderen begonnen om het er in mozilla goed uit te laten zien, omdat deze het best de regels van css volgt.
hierna zou ik moeten kijken welke css hacks ik voor IE nodig had.

nu ben ik bijna zover dat de layout in mozilla ongeveer eruit ziet zoals ik zou willen (met nog wel wat werk te gaan, maar het grootste werk zit erop)

in IE is het echter nog een grote rampzooi

http://www.madvies.nl/moraalridder/index.php

[djluc]

Het valt wel mee wat betreft de zooi in IE. Verklaar eens precies wat je bedoeld. Verder zit er een JS error in.

[crisp]

begin eens met een strict DTD - IE6 volgt dan het W3C box-model

[ Voor 5% gewijzigd door crisp op 23-06-2004 15:53 ]

[Bosmonster]

crisp schreef op 23 juni 2004 @ 15:52:
begin eens met een strict DTD - IE6 volgt dan het W3C box-model

En dan kun je IE 5.x (gemiddeld zo'n 25% van de gebruikers) gedag zeggen..

[ Voor 3% gewijzigd door Bosmonster op 23-06-2004 16:13 ]

[crisp]

Bosmonster schreef op 23 juni 2004 @ 16:12:
[...]


En dan kun je IE 5.x (gemiddeld zo'n 25% van de gebruikers) gedag zeggen..

Dan kunnen die mooi upgraden naar FireFox

Het ligt dus aan je publiek waar je voor kiest; hacks zijn ook niet zaligmakend...

[Verwijderd]

als je in mozilla en IE kijkt zie je de volgend verschillen

- de achtergrond van de div #maincontent lijkt in IE niet te werken

code:

#maincontent {
    position: relative;
    margin: 0;
    padding: 0;
    background: #ccc url(../style/styletest/middle.gif) repeat-y;
}

het lijkt erop dat ie de background img niet pakt

- de linker kolom is in IE niet goed gepositioneerd, terwijl ie bij kolom 2 er geen moeite mee heeft

code:

#column1 {
    width: 150px;
    position: absolute;
    left: 15px;
}
#column2 {
    width: 150px;
    position: absolute;
    top: 0px;
    right: 15px;
}

- in IE wordt de backgroundcolor niet goed weergegeven, maar dit is reeds opgelost door ipv de waarde grey; de waarde #808080 in te stellen.

[disjfa]

crisp schreef op 23 juni 2004 @ 16:24:
[...]
Het ligt dus aan je publiek waar je voor kiest; hacks zijn ook niet zaligmakend...

Mwa vind ik niet. Als je net transitional code kan je je stie laten werken in IE 4.0+, mozilla/ff, opera, en nog wat browsers op de max/linux.

Maar het is maar wat je net wilt natuurlijk

[Verwijderd]

nog meer verschillen:

- de #head blijft wel goed aan de bovenkant 'plakken' in IE, maar niet in mozilla

- er zit een gat tussen de #footer en de #maincontent in mozilla, in IE lijk ik hier geen last van te hebben (al is dat moeilijk te zien als dat achtergrondplaatje van maincontent niet te zien is. dit gat gaat vreemdgenoeg dicht als ik een border van om de maincontent en de footer heenzet

[Verwijderd]

Mozilla heeft een optie om het box-model aan te passen, IE niet. Het beste is daarom om van de standaard van IE5 uit te gaan en Mozilla zich aan te laten passen.

[Verwijderd]

Ja, dat is inderdaad een prima oplossing die ook zeker met andere nieuwe browsers gaat werken zoals Safari.

Je kunt dus _altijd_ beter van het W3C uitgaan en IE daarop aanpassen door gewoon IE 6.0 in quirks mode te zetten en hop; je hebt hetzelfde gedrag voor de hele IE familie op Windows. Door middel van _height en _width (met underscore) kun je die versies vervolgens de juiste maten doorgeven.

[Bosmonster]

Nou sorry, maar ontwerpen voor 3% van de gebruikers en hacks gebruiken voor de overige 97%

Je kunt eenvoudig om de boxmodelverschillen heenwerken, zolang je maar geen padding/border en bijbehorende width/height samen gebruikt in 1 element. Heb je dit wel nodig dan is een extra padding/dummy element daarin voldoende.

[Verwijderd]

ik heb er net xhtml strict van gemaakt maar ik zie geen verschillen in zowel mozilla als IE.

(wat is trouwens de strict variant van target="_blank" ? )

[Bosmonster]

Verwijderd schreef op 23 juni 2004 @ 17:01:
ik heb er net xhtml strict van gemaakt maar ik zie geen verschillen in zowel mozilla als IE.

(wat is trouwens de strict variant van target="_blank" ? )

Is er niet. The theorie is dat niet jij maar de gebruiker bepaalt of een link in een nieuw venster moet openen of niet.

Je kunt er wel middels javascript omheen werken, maar waarom dan in hemelsnaam 'xhtml strict' standaarden proberen te gebruiken als je je er niet in kan vinden

[ Voor 18% gewijzigd door Bosmonster op 23-06-2004 17:03 ]

[Superdeboer]

Verwijderd schreef op 23 juni 2004 @ 17:01:
ik heb er net xhtml strict van gemaakt maar ik zie geen verschillen in zowel mozilla als IE.

(wat is trouwens de strict variant van target="_blank" ? )

Die bestaat niet in strict.
De ratio daarachter is dat gebruikers niet onverwacht om hun oren geslagen moeten worden met andere vensters die openen. Als de gebruiker de link in een ander venster wil openen dan doet hij dat zelf wel, middels tabs in de nieuwere browsers enzo. Je moet je denk ik ook afvragen of target=_blank echt een meerwaarde heeft, maar dat kan ik niet voor je bepalen natuurlijk.

edit:
Ruk... spuit11...

[ Voor 3% gewijzigd door Superdeboer op 23-06-2004 17:05 ]

[cemtex]

Oeps heb je shoutbox stukgemaakt dmv <script></script> code in de text invoer.
Nou ja, bter nu dan als het helemaal af is ..

Sorry !

[Superdeboer]

Wat ik op zich wel een aardige oplossing vind voor het target=_blank probleem in Strict doctypes is deze:
http://development.incuti...argetBlankExperiment.html

Je geeft de link die je in een ander venster wilt openen een extra class mee, namelijk 'newWindow' en je gebruikt het volgende stukje JavaScript:

JavaScript:

<script type="text/javascript">
<!--//--><![CDATA[//><!-- 
function changeAllLinksWithClassToTargetBlanks() {
  for (i = 0; i < document.links.length; i++) {
    if (document.links[i].getAttribute('class') == 'newWindow'
      || document.links[i].className == 'newWindow') {
      document.links[i].setAttribute('target', '_blank');
    }
  }
}
window.onload = changeAllLinksWithClassToTargetBlanks;
//--><!]]></script>

Daarmee bereik je hetzelfde... on the fly worden die links dan omgezet naar target=_blank, alleen je HTML valideert gewoon voor je Strict DTD.
Het is *een* oplossing. Ik zou het niet doen... dan zou ik liever XHTML 1.0 Transitional pakken en er een stel CSS-hacks in proppen om jouw probleem met crossbrowser-compatibileit op te lossen. Als je volgens een standaard wilt werken, dan moet je mijns inziens de consequenties van die standaard accepteren, of een andere standaard pakken zodat je het met zulke dingen niet zo nauw hoeft te nemen. Het zijn maar wat gedachten...

[Verwijderd]

ff ontopic heren, welke hacks/ aanpassingen zijn er nodig voor een goede weergave in IE?

[Bosmonster]

Verwijderd schreef op 23 juni 2004 @ 17:40:
ff ontopic heren, welke hacks/ aanpassingen zijn er nodig voor een goede weergave in IE?

Ehh.. het waren reacties op je eigen vraag hoor...

Maaruh wat wil je nu? Dat we je CSS browser-compatible gaan maken ofzo?

[Superdeboer]

Ik begreep dat je van de tables afwilde... dus je zult wel met divjes gaan werken. Ik heb je site niet gezien toen je nog geen Strict DTD gebruikte, dus ik weet niet hoe het er toen onder IE uitzag. Je kunt eens beginnen met in je CSS het volgende op te nemen:

code:

* {
    box-sizing: border-box
    -moz-box-sizing: border-box;  
}

Zo geef je alle elementen het door IE gebruikte boxmodel.
[edit]Ik weet dat het nu in IE *niet* goed eruit ziet en in ander browsers wel, dus je zult dan nog wel wat moeten verbouwen, zodat het er dan overal goed uitziet. Deze CSS-truc bewerktstelligt dus dat je geen verschillen in opvatting over padding en margins hebt. Let echter op dat je CSS niet valid zal zijn met deze hack erin, want -moz-box-sizing is iets dat door Mozilla zelf geïntroduceerd is voor dit probleem, maar dus niet volgens de standaard is.

[ Voor 37% gewijzigd door Superdeboer op 23-06-2004 17:48 ]

[TafkaT]

Wel ontopic, maar geen antwoord:
Waarom springen de divs alle kanten op als je hem refreshed in IE, terwijl de eerste keer openen alles klopt?

onder firefox 0.9 zweeft je footer nu trouwens een centimeter los van de rest, was net nog niet volgens mij

[ Voor 29% gewijzigd door TafkaT op 23-06-2004 17:47 ]

[Verwijderd]

want -moz-box-sizing is iets dat door Mozilla zelf geïntroduceerd is voor dit probleem, maar dus niet volgens de standaard is.

Mwaj, Mozilla ondersteunde dat _voordat_ de specificatie in CR was. Dat is ook de aanbevolen manier om zoiets te implementeren, omdat de specificatie nog kan wijzigen. Ondanks dat de specificatie nu wel in CR is, blijkt het dat er problemen zijn met de specificatie, of in ieder geval dingen die nog opgehelderd moeten worden voordat Mozilla het "echt" gaat implimenteren.

Daarnaast blijft het natuurlijk een slechte manier, omdat het ook kan met "hacks" die veel simpeler zijn en meer forward compatible.

[Superdeboer]

Verwijderd schreef op 23 juni 2004 @ 18:47:
[...]
Daarnaast blijft het natuurlijk een slechte manier, omdat het ook kan met "hacks" die veel simpeler zijn en meer forward compatible.

Nou... vertel eens dan, want daar ben ik dan ook wel benieuwd naar.

[Verwijderd]

Die was al genoemd, dit topic, ergens in het begin.

[Verwijderd]

Superdeboer schreef op 23 juni 2004 @ 17:46:
Ik begreep dat je van de tables afwilde... dus je zult wel met divjes gaan werken. Ik heb je site niet gezien toen je nog geen Strict DTD gebruikte, dus ik weet niet hoe het er toen onder IE uitzag.

precies hetzelfde (hier althans)

de code

code:

* {
    box-sizing: border-box
    -moz-box-sizing: border-box;  
}

toevoegen heeft geen effect.

Hoe krijg ik mijn linker kolom op zijn plaats in IE??

en hoe krijg ik de achtergrond image te zien in IE??

[Verwijderd]

plaatje: d'r horen quotes om het path, dus:
background-image: url('img.gif');

wellicht dat dat het is?

[Superdeboer]

Verwijderd schreef op 23 juni 2004 @ 22:34:
[...]
precies hetzelfde (hier althans)
de code

code:

box-sizing: border-box

toevoegen heeft geen effect?

code:

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;  
}

't Is CSS hè... en ik was iets te snel: er moet natuurlijk een ; extra bij.

[Verwijderd]

puntkomma was ook stom van mij, had ik natuurlijk ook moeten zien

maar zowel de punt-komma op het eind van het box gebeuren

als het toevoegen van quote-tekens helpt helaas niet

[ Voor 3% gewijzigd door Verwijderd op 23-06-2004 23:15 ]

[Superdeboer]

Voor de plaatsing van die Div's in IE:

Verander deze gedeeltes uit je CSS:

code:

/* -------- MAIN-CONTENT DIVS -------- */

#column1 {
    width: 150px;
    position: absolute;
    left: 15px;
}
#column2 {
    width: 150px;
    position: absolute;
    top: 0px;
    right: 15px;
}
#weblog {       
    width: 432px;
    top: 250px;
    margin-left: 173px; 
    border: 1px solid black;
}

in:

code:

#column1 {
    width: 150px;
    position: absolute;
    left: 15px;
}
#column2 {
    width: 150px;
    position: absolute;
    top: 0px;
    left: 613px;
}

#weblog {
    position: absolute;
    width: 432px;
    margin-left: 173px; 
    border: 1px solid black;
}

Het zal dan nog wel niet meteen helemaal goed zijn, je zult nog wel wat aan die afmetingen moeten sleutelen tot je precies hebt wat je hebben wilt.

Als de breedte van #column1 vaststaat, waarom geef je #weblog dan ook geen absolute positioning op? Dan komen die divs al goed te staan. Alleen gaat het dan weer mis bij 2... maar dat komt omdat je bij #column2 position: absolute; right: 15px had staan... en 'right' is niet bekend in dat verband. Dat zou namelijk geen absolute positionering zijn.
Absoluut positioneren gebeurt altijd vanaf de top van je browservenster en vanaf de linkerkant. Je weet namelijk nooit hoe breed iemand z'n venster heeft staan; dus kun je daarvoor alleen maar 'top' en 'left' gebruiken in je CSS.

[Verwijderd]

ik heb er weer even mee gestoeid en er zijn wat interessante dingen gebeurd

alereerst heb ik nu 3 kolommen gemaakt ipv 2, de middelste kolom heeft een div eromheen gekregen (als je inlogt staan er meer items in als alleen de weblog)

eerst een antwoord op de vraag waarom ik de 'middelste kolom' ook niet absoluut gepositioneerd had.
Dit heb ik niet gedaan omdat als ik dat deed, de footer helemaal omhoog 'klapt' tegen de header aan.

ik heb nu 3 kolommen allemaal vanaf "left" gepositioneerd en ik had eerst nog steeds dezelfde problemen in IE TOTDAT!!! ik om de maincontentdiv een border zette van 1px solid yellow. toen stond ineens alles goed .

haal ik deze border weer weg dan is het nog steeds het oude probleem.

verder ben ik er nu bijna uit, behalve dat er nog steeds het gat zit in mozilla tussen de maincontent-div en de footer.

ps. voor de mensen die zich hebben proberen te registreren (sjakie!) registreer email is aangepast en zou nu moeten werken

[David]

Verwijderd schreef op 23 juni 2004 @ 22:44:
plaatje: d'r horen quotes om het path, dus:
background-image: url('img.gif');

wellicht dat dat het is?

Nee, dit is niet waar. Het mag op drie manieren: zonder quotes, met quotes of met dubbele quotes.

Zie: http://www.w3.org/TR/CSS21/syndata.html#uri

[ Voor 11% gewijzigd door David op 24-06-2004 11:21 . Reden: linkje toegevoegd ]

[Verwijderd]

als ik om de #head div een border van 1px zet dan heeft mozilla geen ruimte tussen de bovenste browserrand en de div

zonder border wel

hetzelfde probleem met de onderste rand:

als ik om de #maincontent div en de #foot div een rand van 1 px zet dan ineens sluiten ze mooi aan.


hoe kan dit toch?

[Verwijderd]

Ik heb de code even versimpeld zodat er makkelijker inzicht in het probleem gekregen kan worden:

http://www.madvies.nl/moraalridder/test3.html

het probleem:

als ik de #maincontent GEEN border meegeef zijn de kolommen niet goed gepositioneerd in IE(6). als ik hem wel een rand meegeef is het weer goed. In mozilla wordt het in beide gevallen goed weergegeven.

hoe kan ik dit omzeilen?

en is dit een bekend probleem??

bij voorbaat dank

[Verwijderd]

DiMension schreef op 24 juni 2004 @ 11:19:
[...]


Nee, dit is niet waar. Het mag op drie manieren: zonder quotes, met quotes of met dubbele quotes.

Zie: http://www.w3.org/TR/CSS21/syndata.html#uri

weer wat geleerd ik weet niet waar ik dan vandaan had dat er per se quotes omheen moeten, maar goed.

[JayVee]

Tip: ik zie dat je verschillende kleur borders gebruikt om te kijken wat nou hoe zit?
Als je FireFox hebt moet je de web developer toolbar eens installeren! Daar kan je oa table cols, block level elements en andere dingen highlighten (en nog ZOOO veel meer).

[misfire]

laat maar ik zie dat het er al goed uitziet.

[ Voor 92% gewijzigd door misfire op 28-06-2004 22:52 ]

[Verwijderd]

bedankt voor de tip!

[Spruit_elf]

ik weet niet hoeveel het voor jouw oplost, maar kijk eens hier http://dean.edwards.name/IE7/
dat is een stukje code wat je in je head zet wat valid html is(voor alles behalve IE is het gewoon een comment) en wat een hoop problemen van IE fixt

[ILUsion]

Bosmonster schreef op 23 juni 2004 @ 16:58:
Nou sorry, maar ontwerpen voor 3% van de gebruikers en hacks gebruiken voor de overige 97%

Dat vind ik wel een zeer slechte houding hiertegenover. IE heeft eigen standaarden, en die volgen niet de échte standaarden. Moet je je baseren op IE, dat slecht in elkaar zit, om een site te bouwen zodat je na verloop van tijd geen échte sites meer kan maken?

Het probleem is dat het gewone volk niet overschakelt naar alternatieven (Opera, Gecko) en dat als je site niet werkt is het niet 'stomme browser' maar wel 'stomme site' dat je als reactie krijgt. Met zo'n standpunt werk je natuurlijk IE alles nog meer in de hand, dus ik vind het van de TS zeer mooi dat hij alles juist doet, en daarna ziet: wat kan ik doen om die schaapjes met IE een klein beetje te helpen...

[Verwijderd]

ik heb intussen de zaak aan de gang, de meeste problemen wat betreft de opbouw zijn verholpen.

ik gebruik 1 IE hack, degene gepresenteerd bij de layout-o-matic.

ik ben mondjesmaat de functionaliteit aan het toevoegen die ik eerst had.

crutiaal in deze hack blijkt te zijn

- een onlogische kolomvolgorde (1-3-2) in je html.
- GEEN width opgeven voor de middelste kolom

ik heb de hack dan wel toegpast en hij werkt ook wel, maar ik zou stiekem ook wel graag willen weten WAAROM hij werkt. m.a.w. wat doet ie? en welke verschillen in browsers omzeilt ie.

ik neem aan dat IE de margins anders interpreteerd dan andere browsers, zeker weten doe ik het niet

de site zoals deze tot nu toe (met hack) gevormd is is te bekijken op http://www.demoraalridder.nl

een simpelere versie van de gehackte code is hier te bezichtigen
http://www.madvies.nl/moraalridder/test3.html

[ Voor 15% gewijzigd door Verwijderd op 30-06-2004 17:36 ]

[Verwijderd]

Hier al is gekeken?

[Verwijderd]

nee nog niet, thx voor het extra leesvoer!