[CSS] Stylesheet-wissel in Internet Explorer bug?

[Freak_NL]

Ik heb voor mijn werkgever een simpele webpagina gebouwd met XHTML en CSS. Op zich niets spannends, gewoon een pagina met contactinformatie. De pagina heeft twee stylesheets beschikbaar:

HTML:

<link rel="stylesheet" type="text/css" title="DCF Kleuren" href="dcfkleur.css" />
<link rel="alternate stylesheet" type="text/css" title="Zwart Wit" href="dcftekst.css" />

Dit is de betreffende site: http://www.datacenter-friesland.nl

De default stylesheet geeft een opgemaakt en kleurrijk digitaal visitekaartje en de alternatieve stylesheet een zwart wit pagina zonder plaatjes en kleuren.

Geen probleem met de meeste browsers, je kan gewoon een stylesheet selecteren.


Stylesheet keuze in browser Galeon

Nu ondersteunt Microsoft's Internet Explorer nog geen alternatieve stylesheets, dus heb ik een linkje gemaakt die verwijst naar de "printklare" zwart witte pagina. Met een klein beetje JavaScript wisselt deze de stylesheet om. Dit werkt op zich goed, maar bij Internet Explorer ben ik tot nu toe op elke geteste computer het probleem tegen gekomen dat in eerste instantie de stylesheet wel omgewisseld word, maar dat niet de hele pagina hertekend wordt door de browser. Ik blijf dus met een aantal blauwe vlakken zitten. (Internet Explorer gebruikers kunnen dit nagaan door op de "Printklare versie" link te klikken)

Zodra je de Internet Explorer window resized of op een andere manier laat hertekenen is alles weer in orde.

Kan er om deze bug heen gewerkt worden zonder het concept van alternatieve stylesheets op te geven? Zijn er meer mensen bekend met deze fout of zit er bij mijn pagina iets niet goed in de haak?

[Woudloper]

Wellicht kan je in dit topic kijken:

• [rml][ JS/CSS] een meervoudige stylesheet switcher mogelijk?[/rml]

of anders in dit artikel op A List Apart waar het concept van Alternate Stylesheet gebruik goed staat beschreven.

[Freak_NL]

Aan de hand van dat "AListApart" heb ik dat stukje JavaScript neergezet. Aan de hand van die GoT thread kwam ik daar weer terecht eigenlijk.

Ik zie alleen nergens een referentie naar dit specifieke probleem (of ik lees er overheen). Het wisselen gaat goed, maar Internet Explorer hertekend slechts een deel van de pagina.

[Annie]

doe een resize via javascript.
lekker ranzig, maar werkt wel

[Blaise]

Ik heb dat probleem ook, en bij mij is het vooral de padding en margin die gedeeltelijk niet vernieuwt bij het veranderen van style. Ik denk dat het gewoon een bug is.

[BtM909]

Annie schreef op 19 februari 2004 @ 10:25:
doe een resize via javascript.
lekker ranzig, maar werkt wel

Idd, gewoon resizen naar de huidige width en height

[Freak_NL]

Opgelost.

Niet met een ranzige resize hack overigens:

code:

function setActiveStyleSheet(title)
{
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++)
  {
    if(a.getAttribute("rel").indexOf("style") != -1
    && a.getAttribute("title"))
    {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
    
  // Hack voor gebroken cq. hersendode browsers:
  var objBody = document.getElementById("paginaBody");
  objBody.style.backgroundColor = "white";
  var objHTML = document.getElementById("paginaHTML");
  objHTML.style.backgroundColor = "white";
}

Na het omwisselen van de stylesheet worden het html en body element expliciet nog eens wit gemaakt van achtergrondkleur..

[BetuweKees]

mare.. als je dit alleen voor het printklaar maken doet kan je toch een goed media="print" gebruiken

[Verwijderd]

Inderdaad: http://alistapart.com/articles/goingtoprint/

[Freak_NL]

Het was ook deels bedoeld als test (het stylesheetwissel gebeuren).

Ik zal de beide stylesheets markeren als "screen" en "screen, print" respectievelijk.

Edit:
Goed, dat werkt. Internet Explorer negeert de stylesheet voor het printen wel, maar dat gedrag zijn we op zich wel gewend.

[ Voor 51% gewijzigd door Freak_NL op 19-02-2004 14:45 ]

[Blaise]

Bij mijn sites en internet explorer werkt media=print gewoon

[Freak_NL]

Dubbel post..

[ Voor 89% gewijzigd door Freak_NL op 19-02-2004 19:16 ]

[Freak_NL]

Internet Explorer valt bij mij terug op een stylesheetloze print. Doe ik iets fout? (http://www.datacenter-friesland.nl)

[Verwijderd]

Freak_NL schreef op 19 februari 2004 @ 19:16:
Internet Explorer valt bij mij terug op een stylesheetloze print. Doe ik iets fout? (http://www.datacenter-friesland.nl)

Is het teveel gevraagd om even te spelen met je stylesheets, en dus even op het idee te komen om het volgende toe te voegen?

<link rel="stylesheet" type="text/css" media="print" title="Print" href="dcftekst.css" />

[Freak_NL]

Als je met je post bedoelt dat het niet werkt als de stylesheet is aangegeven als "alternate" dan heb je me mogelijk geholpen (dat was me niet opgevallen, maar ik kan het morgen pas uitproberen), maar als je dat niet bedoelt dan snap ik de strekking van je post niet helemaal.

[Verwijderd]

Dat bedoelt hij. En het is ook redelijk logisch, omdat het geen _alternate_ style sheet is, maar een style sheet voor een ander medium.

Niet getest, maar ik geloof dat het zo werkte:

code:

<link rel="stylesheet" media="screen" href="/screen.css" title="Default"/>
<link rel="stylesheet" media="print" href="/print.css" title="Default"/>
<link rel="alternate stylesheet" media="screen" href="/a-screen.css" title="Alternate"/>
<link rel="alternate stylesheet" media="print" href="/a-print.css" title="Alternate"/>

Niet geheel zeker, ik zal het vandaag is testen.