Layout op acceptatie/productie anders dan ontwikkel

[Jan_V]

Ik ben bezig om een site wat meer compatibel te maken met FF en IE8 en loop nu tegen iets heel raars aan.
We hebben een pagina met meerdere tabellen onder elkaar. Deze hebben wel verschillende stijlen en inhoud, maar dat heb ik inmiddels allemaal goed werkend gekregen, zodat in de genoemde browsers de rendering goed gaat.
Nu heb ik m'n wijzigingen op de acceptatie omgeving geplaatst, maar de klant merkte op dat de tabellen in IE8 niet helemaal goed uitgelijnd werden. Dat vond ik raar, omdat ik het zelf heb gecontroleerd op de ontwikkel omgeving. Nu heb ik de genoemde pagina in de acceptatie omgeving ook even bekeken en de klant heeft echt gelijk. De tabellen zijn niet helemaal goed uitgelijnd, zie alhier:

Op m'n ontwikkelomgeving, in dezelfde browser, ziet het er zo uit:


Om er zeker van te zijn dat dit niet komt door een wijziging in de code heb ik de code van de acceptatie omgeving bij mij lokaal geplaatst. Nu bezoek ik weer deze pagina (acceptatie omgeving die lokaal staat) en dan ziet het er weer goed uit, dus zoals op de onderste afbeelding.

Het enige verschil in de omgevingen is, volgens mij, dat de acceptatie (en productie) omgeving op Windows 2003 draaien met IIS6. Op dit ontwikkelstation draai ik met Windows XP en IIS 5.1.
Kan het zijn dat IIS er voor zorgt dat de rendering anders plaats vind? Rare gedachte, maar aangezien dat het enige verschil is, kwam dat als eerste bij mij op.
De HTTP Headers binnen IIS zijn op beide systemen gelijk, dus daar zou het niet aan kunnen liggen.

Iemand een goede suggestie voor oplossing?

[moozzuzz]

Best even wat code plaatsen, op basis van plaatjes kan je enkel slogans verwachten. Kan het aan je select liggen?

[Zakkenwasser]

Ik denk dat het em in de CSS code zit.

Zou je wat relevante CSS en HTML code kunnen neerplempen van dat stuk?

[MoietyMe]

Veranderd de doctype op de exterene locatie-toevallig (of lokaal).

[Verwijderd]

Kan het te maken hebben met de compabiliteitsweergave van IE8 (en dan de instellingen van de compabiliteitsweergave)?

De compabiliteitsweergave kan aan/uit staan voor intranetsites (default aan) en aan/uit staan voor alle websites (default uit). Wat onder een intranetsite wordt verstaan hangt af van het gebruikte domein in de ontwikkelomgeving en acceptatieomgeving. Hierdoor kan bijvoorbeeld in de ontwikkelomgeving de compabiliteitsweergave in IE8 aan staan en in de acceptatieomgeving niet, met als mogelijk resultaat een andere weergave met exact dezelfde broncode.

Een lokale ontwikkelomgeving (localhost) valt weer niet onder een intranetsite, hetgeen mogelijk ook het verschil met de acceptatieomgeving kan verklaren.

[ Voor 12% gewijzigd door Verwijderd op 09-06-2010 09:52 ]

[Jan_V]

moozzuzz schreef op woensdag 09 juni 2010 @ 09:16:
Best even wat code plaatsen, op basis van plaatjes kan je enkel slogans verwachten. Kan het aan je select liggen?

Daar was ik al een beetje bang voor. Jammergenoeg is de HTML en CSS niet echt eenvoudig leesbaar.
Op deze link: http://opleveren.leones.mobi/style.htm heb ik de relevante stijlen geplaatst (let op: meer dan 2000 regels). Niet alles is trouwens relevant, zal kijken of ik dit nog kan verminderen.
De code heb ik iets kleiner weten te maken, zie alhier:

HTML:

<div class="content" id="content">
<BR>
<TABLE class=clsTblExplorer cellSpacing=0 cellPadding=2 width=570>
<TBODY>
<TR>
<TD class=clsRowExplorer><A title="Algemeen: Hier treft u algemene informatie aan in de vorm van nieuwsberichten, persberichten, links, etc. " href="http://leones-vxp/vgn_acc/atoom.asp?atoom=11&amp;atoomsrt=9&amp;actie=2" name=11>Algemeen </A>&nbsp;-&nbsp; <A title=Vereniging href="http://leones-vxp/vgn_acc/atoom.asp?atoom=4980&amp;atoomsrt=9&amp;actie=2" name=4980>Vereniging</A> <BR></TD></TR>
<TR>
<TD class=cel-line colSpan=2>&nbsp; <BR></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 cellPadding=2 width=570>
<TBODY>
<TR>
<TD align=right>
<FORM id=form1 method=post name=form1 action=http://leones-vxp/vgn_acc/explorer/subdomeinexplorer.asp><INPUT id=atoom value=4980 type=hidden name=atoom> <INPUT id=atoomsrt value=10 type=hidden name=atoomsrt> <INPUT id=actie value=2 type=hidden name=actie> 
<TABLE cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD style="PADDING-TOP: 3px" vAlign=bottom align=right>sorteren:&nbsp; </TD>
<TD noWrap align=right><SELECT id=weergave onchange="javascript:document.getElementById('form1').submit();" name=weergave> <OPTION value=kennissoort>kennissoort</OPTION> <OPTION selected value=groepering>categorie</OPTION></SELECT> <SELECT id=sortering onchange="javascript:document.getElementById('form1').submit();" name=sortering> <OPTION selected value=recentheid>recentheid</OPTION> <OPTION value=alfabetisch>alfabetisch</OPTION></SELECT> <SELECT id=sorttype onchange="javascript:document.getElementById('form1').submit();" name=sorttype> <OPTION value=asc>oplopend</OPTION> <OPTION selected value=desc>aflopend</OPTION></SELECT> </TD></TR></TBODY></TABLE></FORM></TD></TR></TBODY></TABLE>
<TABLE class=table cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD vAlign=top width="100%"><BR><!-- 5650: 6 -->
<TABLE class=clsTblExplorer cellSpacing=0 cellPadding=2 width="100%">
<TBODY>
<TR>
<TD class=clsRowExplorer colSpan=2><A name="">Branchegegevens</A> </TD></TR>
<TR id=hblock_Branchegegevens_0>
<TD class=cel-line vAlign=top><A href="http://leones-vxp/vgn_acc/atoom.asp?atoom=5650&amp;atoomsrt=6&amp;actie=2">Brancherapporten</A> </TD>
<TD class=cel-line vAlign=top noWrap align=right>(24-11-06) <IMG title=Weblink border=0 alt="" src="http://leones-vxp/vgn_acc/images/icons/icon-6.gif"> <IMG border=0 alt=Geconsolideerd src="http://leones-vxp/vgn_acc/images/icons/ikoon-geconsolideerd.gif"> <IMG border=0 alt=Openbaar src="http://leones-vxp/vgn_acc/images/icons/ikoon-openbaar.gif"> </TD></TR>
<TR id=rowmeer_Branchegegevens>
<TD class=clsExplorerMeer>&nbsp; </TD>
<TD class=clsExplorerMeer align=right>&nbsp; </TD></TR></TBODY></TABLE><BR><!-- 8349: 2 -->
<TABLE class=clsTblExplorer cellSpacing=0 cellPadding=2 width="100%">
<TBODY>
<TR>
<TD class=clsRowExplorer colSpan=2><A name=Branchegegevens>Communicatie</A> </TD></TR>
<TR id=hblock_Communicatie_0>
<TD class=cel-line vAlign=top><A href="http://leones-vxp/vgn_acc/atoom.asp?atoom=8349&amp;atoomsrt=2&amp;actie=2">Markant zoekt nieuwe leden redactiecommissie</A> </TD>
<TD class=cel-line vAlign=top noWrap align=right>(25-10-07) <IMG title=Artikel border=0 alt="" src="http://leones-vxp/vgn_acc/images/icons/icon-2.gif"> <IMG border=0 alt=Geconsolideerd src="http://leones-vxp/vgn_acc/images/icons/ikoon-geconsolideerd.gif"> <IMG border=0 alt=Openbaar src="http://leones-vxp/vgn_acc/images/icons/ikoon-openbaar.gif"> </TD></TR>
<TR id=rowmeer_Communicatie>
<TD class=clsExplorerMeer><SPAN id=meer_Communicatie><A title="geef alle items weer" href="javascript:fnDisplayItems2('Communicatie', 8);">meer &gt;&gt;</A> </SPAN><SPAN style="DISPLAY: none" id=minder_Communicatie><A title="geef de eerste5&nbsp;items weer" href="javascript:fnDisplayItems2('Communicatie', 5);">&lt;&lt; minder</A> </SPAN></TD>
<TD class=clsExplorerMeer align=right>&nbsp; </TD></TR></TBODY></TABLE><BR><!-- 8339: 8 -->
<TABLE class=clsTblExplorer cellSpacing=0 cellPadding=2 width="100%">
<TBODY>
<TR>
<TD class=clsRowExplorer colSpan=2><A name=Communicatie>Governance Code</A> </TD></TR>
<TR id="hblock_Governance Code_0">
<TD class=cel-line vAlign=top><A href="http://leones-vxp/vgn_acc/atoom.asp?atoom=8339&amp;atoomsrt=8&amp;actie=2">Leergang 'Governance van zelfstandige uivoeringsorganisaties en maatschappelijke ondernemingen'</A> </TD>
<TD class=cel-line vAlign=top noWrap align=right>(25-10-07) <IMG title=Gebeurtenis border=0 alt="" src="http://leones-vxp/vgn_acc/images/icons/icon-8.gif"> <IMG border=0 alt=Geconsolideerd src="http://leones-vxp/vgn_acc/images/icons/ikoon-geconsolideerd.gif"> <IMG border=0 alt=Openbaar src="http://leones-vxp/vgn_acc/images/icons/ikoon-openbaar.gif"> </TD></TR>
<TR id="rowmeer_Governance Code">
<TD class=clsExplorerMeer>&nbsp; </TD>
<TD class=clsExplorerMeer align=right>&nbsp; </TD></TR></TBODY></TABLE><BR><!-- 3438: 2 -->
<TABLE class=clsTblExplorer cellSpacing=0 cellPadding=2 width="100%">
<TBODY>
<TR>
<TD class=clsRowExplorer colSpan=2><A name="Governance Code">Lidmaatschap VGN</A> </TD></TR>
<TR id="hblock_Lidmaatschap VGN_0">
<TD class=cel-line vAlign=top><A href="http://leones-vxp/vgn_acc/atoom.asp?atoom=3438&amp;atoomsrt=2&amp;actie=2">Nieuwe overeenkomst tussen VGN en Buma</A> </TD>
<TD class=cel-line vAlign=top noWrap align=right>(01-03-06) <IMG title=Artikel border=0 alt="" src="http://leones-vxp/vgn_acc/images/icons/icon-2.gif"> <IMG border=0 alt=Geconsolideerd src="http://leones-vxp/vgn_acc/images/icons/ikoon-geconsolideerd.gif"> <IMG border=0 alt=Openbaar src="http://leones-vxp/vgn_acc/images/icons/ikoon-openbaar.gif"> </TD></TR>
<TR id="rowmeer_Lidmaatschap VGN">
<TD class=clsExplorerMeer>&nbsp; </TD>
<TD class=clsExplorerMeer align=right>&nbsp; </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><!-- TextFooter binnen contentframe-->
</div>

[edit]
Compatibiliteits modus aan of uit zetten haalt niets uit. Heb ook geprobeerd om de compatibiliteits modus via een header aan en uit te zetten, maar dat haalde niets uit, tenminste niet positief.

De doctype wordt in de html gedefinieerd en is:

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

[Janoz]

Het belangrijkste lijkt mij om te kijken wat nu exact de verschilen zijn. Daarvoor hoef je niet handmatig je code door te werken. Zeker wanneer het om 2000 regels gaat is het veel handiger om daar tooling voor te gebruiken. Gewoon een diff tussen beide resultaten en je kunt precies zien waar de verschillen zitten. Vanaf daar heb je, lijkt mij, een goed startpunt om uit te zoeken waar die verschillen vandaan komen.

[crisp]

Jan_V schreef op woensdag 09 juni 2010 @ 09:52:
[...]
De doctype wordt in de html gedefinieerd en is:

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">

Dat levert quirksmode op; dan maakt compatibility mode inderdaad niet uit en heb je waarschijnlijk meer issues in non-IE browsers dan enkel dit renderverschil in IE

[Jan_V]

Het vervelende is dat er geen verschil is tussen de code.
Ik heb de code (en ook de css) van de acceptatie omgeving lokaal neergezet en deze lokaal in IIS geplaatst. Wanneer ik deze 'lokale acceptatie' omgeving benader met IE8 worden de tabellen goed gerendered (afbeelding 2). Diezelfde pagina benaderen (met dus dezelfde code en css) op de acceptatie omgeving levert een ander resultaat op (afbeelding 1).

Heb nog het een en ander zitten proberen met compatibility, zones, etc. maar ben nu een beetje uit m'n ideeen gelopen.

Dat levert quirksmode op; dan maakt compatibility mode inderdaad niet uit en heb je waarschijnlijk meer issues in non-IE browsers dan enkel dit renderverschil in IE

Levert inderdaad problemen op in andere browsers. Gelukkig wordt de site dan ook uitgefaseerd, waardoor er een nette site gemaakt kan worden. Het onderhoud van dit systeem is ondoenbaar, altijd leuk, legacy systemen van oud-ex-collega's

Heb je de code ook vergeleken nadat die geserveerd is, dus de code zoals die aan je browser gevoerd wordt, of alleen de code zoals je die als broncode op de servers plaatst?

Goed idee! Ga ik nu controleren. Eerst even zorgen dat ze van dezelfde db gebruik maken, zodat de inhoud ook gelijk is.

[ Voor 42% gewijzigd door Jan_V op 09-06-2010 10:19 ]

[Orion84]

Heb je de code ook vergeleken nadat die geserveerd is, dus de code zoals die aan je browser gevoerd wordt, of alleen de code zoals je die als broncode op de servers plaatst?

[crisp]

Jan_V schreef op woensdag 09 juni 2010 @ 10:04:
[...]

Levert inderdaad problemen op in andere browsers. Gelukkig wordt de site dan ook uitgefaseerd, waardoor er een nette site gemaakt kan worden. Het onderhoud van dit systeem is ondoenbaar, altijd leuk, legacy systemen van oud-ex-collega's

Moet je je dan ueberhaupt wel druk maken om een paar pixels verschil?

[Jan_V]

Orion84 schreef op woensdag 09 juni 2010 @ 10:06:
Heb je de code ook vergeleken nadat die geserveerd is, dus de code zoals die aan je browser gevoerd wordt, of alleen de code zoals je die als broncode op de servers plaatst?

Nou, dit heeft goed geholpen! Beetje jammer dat ik er zelf niet aan had gedacht om dit te proberen.

Heb nu de acceptatie code op een server gezet in de ontwikkelomgeving waar dus ook Win2k3 en IIS6 draait. Vanaf die server maak ik verbinding met dezelfde database als op m'n lokale omgeving, waardoor er dus dezelfde content komt te staan.
De pagina ziet er nu wel goed uit! Fout zit dus ergens in de stijlen/content van de acceptatie en productie omgeving.
Moet nog wel uitzoeken waar het aan kan liggen, maar daar kom ik nu vanzelf wel achter. Zal eens kijken wat de inhoud voor invloed heeft op de stijlen in de pagina. Normaal zou je zeggen 'geen', maar sta nergens meer versteld van.

Moet je je dan ueberhaupt wel druk maken om een paar pixels verschil?

Ik niet, ben eigenlijk al lang klaar met dit systeem. Maar vind het niet echt chic om over de gemaakte beslissing me hier negatief uit te laten.