Pagina met CSS geschikt maken voor veel browsers [Opgelost]

Ik ben bezig met het ontwerp van een HTML pagina die bestaat uit een 5-tal frames. Hiervoor heb ik via CSS de layout gedefinieerd met boxes. In die boxes heb ik wat Lorum Ipsum teksten gezet om aan te geven hoe de pagina moet worden gevuld. In de linkerkolom zit een geintje met uitklapbare tekst. Door op "klik op mij" te klikken verschijnt/verdwijnt die tekst.

Het probleem dat ik op dit moment heb is dat de pagina in diverse browsers anders wordt getoond.

  • Safari doet het goed

  • Netscape 7 OS X toont geen scrollbars en het klikken werkt niet

  • IE 5 OS X laat de “klikbare tekst” onder de scrollbar verschijnen

  • IE 6 Win XP toont de boxen niet op de juiste plaats.

  • Netscape 7 Win XP reageert ook niet op het klikken.

De pagina zelf staat hier:

http://homepage.mac.com/imacpro/css/css-uitdaging.html

Wie o wie heeft tips voor mij om het layout gedeelte werkend te krijgen in IE 6 Win XP en het klik probleem in Netscape op te lossen?

Uitgangspunt: de pagina MOET via 1 HTML file worden opgebouwd. Hier kan/mag/wil ik niet van afwijken.

Ik ben geen CSS goeroe dus verwacht eventueel nog wat extra vragen van mij als jullie een oplossing aandragen.

Mijn dank is bij voorbaat zeer groot.

Beste Macpro,

Niet helemaal en antwoord op je vraag maar ik heb net een site gemaakt die precies hetzelfde is op brouwser en OS’sen (vraag me niet hoelang ik erover gedaan heb)

Ik maakt twee css’jes, één voor pc en één voor mac. D.m.v. een javascripje kiest hij welke die moet pakken.

http://www.initiumnet.nl/smartsupport/home.htm (tabelloos en nog niet geheel af)
http://www.initiumnet.nl/smartsupport/_styles/pages_win.css
http://www.initiumnet.nl/smartsupport/_styles/pages_mac.css

Misschien dan je op deze manier in ieder geval je OS verschil kunt oplossen.

Dat van het javascript is dus een slecht idee, want wanneer er een nieuwe of andere versie van een browser uitkomt moet je weer de sniffer aanpassen.

In CSS zijn er genoeg workarounds (hacks) bekend, waarmee je prima kan filteren en die toekomstzeker zijn.

De beste methode is om alles helemaal perfect voor Safari of Mozilla of Opera te maken, en vervolgens de aanpassingen door te voeren voor IE5Mac (de commented backslash hack)
en middels Tantecks Midd Pass filter kan je een aparte stylesheet (met gecorrigeerde waarden voor de items in je gewone stylesheet) voor IE 5.x op de PC doorvoeren.

Ik snap dat je nu iets hebt van ‘what the …’, maar google maar eens op de volgende trewoorden:

  • Tanteck midd pass filter
  • commented backslash hack IE Mac

[quote:a46b71a0c1="tennapel"]Ik snap dat je nu iets hebt van 'what the ...', maar google maar eens op de volgende trewoorden: - Tanteck midd pass filter - commented backslash hack IE Mac[/quote:a46b71a0c1] Van die commented backslash hack had ik al wat gehoord en ik begin 'm ook een beetje te begrijpen. Dat Tanteck filter is totaal nieuw voor mij.

In ieder geval allebei al bedankt voor de reacties.

Vanmorgen nog wat geklooid en opeens viel de puzzel inelkaar.

Het layout probleem met IE op de PC heb ik opgelost door “postion: fixed” te vervangen door “position: absolute”.

Het probleem met de uitklappende teksten die elkaar overlapten en onder de scrollbalk doorliepen heb ik (per ongeluk :slight_smile: ) opgelost door de inhoud van dat klikbaar blok in een tabel te zetten. Dat deed ik om ervoor te zorgen de tekst niet tegen de linker kantlijn aan zou lopen. En om aan de rechterkant marge te maken zodat scrollbar in de ruimte van die rechter marge zou vallen.
Dus links een tabel cel van 1 pixel breed en rechts van 15 breed. Alles wat overbleef in het midden voor de tekst.
En tot mijn uiterste verbazing en zeer grote vreugde was mijn tekst flip probleem opgelost.

Toen heb ik het klikken in Netscape op kunnen lossen door de <span onClick> te vervangen door een echte <a onClick>.

Kortom, ik ben een flink stuk verder.

Het enige echte probleem dat ik op dit moment nog heb is dat de pagina in Internet Explorer op de Mac helemaal scrollt als je klikt op de link “ga een stukje naar beneden”.
En in Safari werkt die link helemaal niet.

Zie de inmiddels aangepaste pagina: http://homepage.mac.com/imacpro/css/css-uitdaging.html

Mocht iemand nog tips hebben voor deze twee problemen, dan ben ik ontzettend geholpen.
Morgen ga ik zelf ook verder kijken, maar helaas zit ik met grote tijdsdruk :frowning:

:lol: :lol: :lol: :lol: IT WORKS!!!!!!! :lol: :lol: :lol: :lol:

Dankzij een PB tip van Tennapel is het gelukt om alles aan de praat te krijgen.

Het scrollen in IE 5 is opgelost door niet position: absolute, maar position: fixed te kiezen.
Maar daardoor liepen de andere browsers weer in puin.
Dus de commented backslash hack toegepast om dit voor elkaar te krijgen:

[code:1:f5fc8a3f5e] position: fixed;
/* commented backslash hack v2 /
position: absolute;
/
end hack */
[/code:1:f5fc8a3f5e]