Webdesign doet moeilijk in IE6 (/7/8)

[Aloys]

Beste medetweakers,

Ik ben bezig momenteel bezig om een nieuwe layout te maken voor de website van de kerk waar ik naar toe ga, maar ik zit vast bij het cross-browser compatible maken van de layout.

In Firefox 1-3, Safari 3/4 en Chrome ziet de website er goed uit, maar in IE natuurlijk niet, voornamelijk IE6.
Hier even 4 screenshots:
IE7 -> http://api.browsershots.o...f7d0c652afdb55f5dc8c2.png
IE6 -> http://dl.dropbox.com/u/337710/screenshot.PNG
IE8 -> http://api.browsershots.o...a0428f3e7f42a02cd6c64.png
Safari (Mac) -> http://dl.dropbox.com/u/337710/design.png

Het moet er dus uitzien zoals in de derde vierde screenshot. IE7 doet het al duidelijk beter dan IE6, maar pakt JQuery blijkbaar (gedeeltelijk) niet. IE6 is al helemaal een ramp. IE8 snapt het centreren niet? WTH

Heeft iemand enig idee hoe ik dit kan fixen? Ik heb al van alles geprobeerd met mijn CSS en HTML, maar ik kom er niet uit. Het enige dat mij duidelijk werd is dat IE6 de border-style: inset; niet begrijpt, dat zou nog wel op te lossen zijn, maar de jquery-pngfix werkt ook niet en de sticky-footer is wel sticky, maar dan begrijpt de rest van de pagina niet dat deze naar boven moet schuiven.

Mijn HTML is XHTML valid en de css bevat ook bijna geen fouten (behalve opacity-fixes voor de verschillende browsers).

De HTML en CSS posten lijkt mij nogal een grote startpost opleveren, dus ik heb even relevante delen van de CSS gezocht, en de HTML kan je evt via de bron bekijken.

Cascading Stylesheet:

body
{
    margin: 0px;
    padding: 0px;
}

#site_container 
{
    margin: 0px;
    margin-left: auto;
    margin-right: auto;
    
    padding: 0px;
    
    border: 0px;
    background-color: transparent;
    
    width: 960px;
    height: 100%;
}

#wrap 
{ 
background-color: transparent; 
border: 0px; 
}

Als er meer nodig is zal ik dat posten.

Wie kan mij helpen?

[Bosmonster]

Heb je misschien een link naar een compleet voorbeeld zoals je in de screenshots hebt?

[sariel]

Bosmonster schreef op maandag 19 april 2010 @ 13:44:
Heb je misschien een link naar een compleet voorbeeld zoals je in de screenshots hebt?

Zie screenshots? http://www.dedeurgroningen.nl/nieuw_design/

@TS: Erg mooi design. Ziet er in FF3.6 heel goed uit (als ik tenminste javascript activeer)

[Bosmonster]

sariel schreef op maandag 19 april 2010 @ 13:52:
[...]

Zie screenshots?

De opzet is redelijk eenvoudig. Had er ooit eens een xbrowser voorbeeldje van in elkaar gefrutseld:
http://bosmonster.nl/html/centered_with_footer.html

[Aloys]

Bosmonster schreef op maandag 19 april 2010 @ 13:44:
Heb je misschien een link naar een compleet voorbeeld zoals je in de screenshots hebt?

Zoals al hierboven ergens vermeld, het staat in de screenshot. Ik heb de link maar niet gepost, want dat wordt hier snel als spam gezien .

sariel schreef op maandag 19 april 2010 @ 13:52:
[...]
@TS: Erg mooi design. Ziet er in FF3.6 heel goed uit (als ik tenminste javascript activeer)

Bedankt, ik gebruik indd veel javascript (Jquery), zoals voor de afbeeldingen en de afgeronde hoeken etc, het scheelt een hoop werk, want dat allemaal met plaatjes fixen is een gekkenboel.

Bosmonster schreef op maandag 19 april 2010 @ 13:54:
[...]
De opzet is redelijk eenvoudig. Had er ooit eens een xbrowser voorbeeldje van in elkaar gefrutseld:
http://bosmonster.nl/html/centered_with_footer.html

True, maar dat maakt mijn probleem niet minder lastig .

[sariel]

Paar dingetjes:

gebruik geen mega-plaatjes voor je website. Je huidige website is 1.7 megabyte groot. Je background kan bijvoorbeeld heel makkelijk x en y getiled worden waardoor je maar iets van 10k overhoudt in plaats van 700k
Idem voor je slide-plaatjes, doe wat aan compressie.

Wat betreft je positionering-issues onder IE[678], negeer IE6. Focus op IE7 en 8. Misschien heb je iets aan de volgende sites:

http://jhop.me/ie8-bugs
http://www.positioniseverything.net/ie-primer.html

http://www.google.com/sea...=f&aqi=&aql=&oq=&gs_rfai=

[Bosmonster]

sariel schreef op maandag 19 april 2010 @ 15:03:
Paar dingetjes:

Wat betreft je positionering-issues onder IE\[678], negeer IE6. Focus op IE7 en 8. Misschien heb je iets aan de volgende sites:

Waarom zou je IE6 negeren voor iets dat eenvoudig in IE6 te maken is?

[MueR]

Aloys schreef op maandag 19 april 2010 @ 14:00:
Bedankt, ik gebruik indd veel javascript (Jquery), zoals voor de afbeeldingen en de afgeronde hoeken etc, het scheelt een hoop werk, want dat allemaal met plaatjes fixen is een gekkenboel.

Ik ben zelf meer van het gebruik van border-radius. Browsers die het niet ondersteunen hebben gewoon pech.

[macciez]

MueR schreef op maandag 19 april 2010 @ 15:26:
[...]

Ik ben zelf meer van het gebruik van border-radius. Browsers die het niet ondersteunen hebben gewoon pech.

En aan je screenshots te zien doen de ronde hoekjes het toch al niet in IE7 en IE8, dan is border-radius eenvoudiger als een javascript oplossing imo.

sariel schreef op maandag 19 april 2010 @ 15:03:
Wat betreft je positionering-issues onder IE\[678], negeer IE6. Focus op IE7 en 8.

Nu heb ik geen onderzoek naar de doelgroep oid gedaan, maar mn gevoel zegt dat het percentage IE6 onder kerkbezoekers nog best hoog kan liggen (dan denk ik aan wat oudere mensen met oudere pc's). Wanneer dit niet het geval is, heb ik niks gezegd.

[remco_k]

macciez schreef op maandag 19 april 2010 @ 15:30:
[...]
Nu heb ik geen onderzoek naar de doelgroep oid gedaan, maar mn gevoel zegt dat het percentage IE6 onder kerkbezoekers nog best hoog kan liggen (dan denk ik aan wat oudere mensen met oudere pc's). Wanneer dit niet het geval is, heb ik niks gezegd.

Ik geloof niet dat sariel bedoeld om helemaal niet op IE6 te letten:

sariel schreef op maandag 19 april 2010 @ 15:03:
...
Wat betreft je positionering-issues onder IE\[678], negeer IE6. Focus op IE7 en 8.
...

Volgens mij bedoeld hij (en daar kan ik dus voor 100% in mee gaan) dat je wél op IE6 moet letten maar dat je geen / niet teveel tijd moet steken in het oplossen van positionerings probleempjes en kleine details.

In het kort: Enkel zorgen dat de boel leesbaar kan worden getoond en de rest laten zitten / geen tijd besteden aan lullige details in IE6.

Eventueel ergens op de pagina tonen dat men een verouderde browser gebruikt en dat daardoor de opmaak kan afwijken.

[ Voor 17% gewijzigd door remco_k op 19-04-2010 15:40 ]

[Aloys]

sariel schreef op maandag 19 april 2010 @ 15:03:
Paar dingetjes:

gebruik geen mega-plaatjes voor je website. Je huidige website is 1.7 megabyte groot. Je background kan bijvoorbeeld heel makkelijk x en y getiled worden waardoor je maar iets van 10k overhoudt in plaats van 700k
Idem voor je slide-plaatjes, doe wat aan compressie.

Het is nog een W.I.P, om het design om te zetten naar HTML/CSS, dus ik ben nog helemaal niet met compressie ed. bezig geweest, maar bedankt voor je scherpe opmerking .

Wat betreft je positionering-issues onder IE\[678], negeer IE6. Focus op IE7 en 8. Misschien heb je iets aan de volgende sites:

http://jhop.me/ie8-bugs
http://www.positioniseverything.net/ie-primer.html

http://www.google.com/sea...=f&aqi=&aql=&oq=&gs_rfai=

Waarom IE6 negeren? Er zijn imo teveel mensen die het nog gebruiken, dus negeren lijkt me geen optie.

MueR schreef op maandag 19 april 2010 @ 15:26:
[...]

Ik ben zelf meer van het gebruik van border-radius. Browsers die het niet ondersteunen hebben gewoon pech.

Dat zal ik eens uitzoeken, dat is sowieso netter dan deze "ranzige" (dat is het toch eigenlijk wel) oplossing.

remco_k schreef op maandag 19 april 2010 @ 15:36:
[...]

Ik geloof niet dat sariel bedoeld om helemaal niet op IE6 te letten. Volgens mij bedoeld hij (en daar kan ik dus voor 100% in mee gaan) dat je wél op IE6 moet letten maar dat je geen / niet teveel tijd moet steken in het oplossen van positionerings probleempjes.

In het kort: Enkel zorgen dat de boel leesbaar kan worden getoond en de rest laten zitten / geen tijd besteden aan lullige details in IE6.

Mee eens, de afgeronde hoekje kunnen mij bevoorbeeld gestolen worden in IE6, maar de content moet toch wel goed geplaatst worden. Overal zijn scrollbars zichtbaar en de javascript bij de zoek-input werkt niet. Het ergste is toch nog wel dat de plaatjes niet eens geladen worden met Jquery, maar misschien is dat een bug in de plugin.

Bedankt voor alle reacties tot nu toe. Ik ga kijken naar border-radius, elke tip blijft welkom, want ik denk niet dat de border-radius het positionerings-probleem oplost.

[peterkuli]

Ik denk dat je problemen gaat krijgen met border-radius aangezien de browser CSS3 moet ondersteunen. Ik gebruik Nifty Corners Cube en werkt goed.

Voor je andere probleem heb ik helaas geen oplossing.

[Verwijderd]

Aloys schreef op maandag 19 april 2010 @ 13:19:
IE8 snapt het centreren niet? WTH

Beste TS,

Centreren in IE is altijd nog wat apart; probeer eens in je body toe te voegen "text-align: center;" en vervolgens in je container weer "text-align: left;"

Left en right margins in "auto" werkt goed in browsers al Firefox... IE on the other hand .

[Bosmonster]

Verwijderd schreef op maandag 19 april 2010 @ 15:56:
[...]


Left en right margins in "auto" werkt goed in browsers al Firefox... IE on the other hand .

Margin: 0 auto werkt prima in alle browsers, zelfs IE6.

[Verwijderd]

Tenzij in Quirks Mode; ik ken de HTML van de TS niet *druk druk druk* .

[Bosmonster]

Wie werkt er anno 2010 nu nog in quirksmode

De html is xhtml strict, dus daar ligt het niet aan.

IE geeft wel Javascript errors, zal wel iets raars zitten in een van die 'IE-fixes'.

Snap sowieso niet zo goed waarom mensen die wazige PNGfix gebruiken. Datzelfde is namelijk 2 regels te doen wat WEL goed werkt.

[ Voor 55% gewijzigd door Bosmonster op 19-04-2010 16:34 ]

[Aloys]

Bosmonster schreef op maandag 19 april 2010 @ 16:31:
Wie werkt er anno 2010 nu nog in quirksmode

De html is xhtml strict, dus daar ligt het niet aan.

IE geeft wel Javascript errors, zal wel iets raars zitten in een van die 'IE-fixes'.

Snap sowieso niet zo goed waarom mensen die wazige PNGfix gebruiken. Datzelfde is namelijk 2 regels te doen wat WEL goed werkt.

Ik werk indd niet in Quirksmode. Maar vertel over jouw 2 regels voor die png-fix? Klinkt reuze interessant.

[Bosmonster]

Dit deel van die PNGfix:

JavaScript:

var ie55 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 5.5") != -1);
    var ie6 = (navigator.appName == "Microsoft Internet Explorer" && parseInt(navigator.appVersion) == 4 && navigator.appVersion.indexOf("MSIE 6.0") != -1);

    if (jQuery.browser.msie && (ie55 || ie6)) {

        //fix images with png-source
        jQuery(this).find("img[src$=.png]").each(function() {

            jQuery(this).attr('width',jQuery(this).width());
            jQuery(this).attr('height',jQuery(this).height());

            var prevStyle = '';
            var strNewHTML = '';
            var imgId = (jQuery(this).attr('id')) ? 'id="' + jQuery(this).attr('id') + '" ' : '';
            var imgClass = (jQuery(this).attr('class')) ? 'class="' + jQuery(this).attr('class') + '" ' : '';
            var imgTitle = (jQuery(this).attr('title')) ? 'title="' + jQuery(this).attr('title') + '" ' : '';
            var imgAlt = (jQuery(this).attr('alt')) ? 'alt="' + jQuery(this).attr('alt') + '" ' : '';
            var imgAlign = (jQuery(this).attr('align')) ? 'float:' + jQuery(this).attr('align') + ';' : '';
            var imgHand = (jQuery(this).parent().attr('href')) ? 'cursor:hand;' : '';
            if (this.style.border) {
                prevStyle += 'border:'+this.style.border+';';
                this.style.border = '';
            }
            if (this.style.padding) {
                prevStyle += 'padding:'+this.style.padding+';';
                this.style.padding = '';
            }
            if (this.style.margin) {
                prevStyle += 'margin:'+this.style.margin+';';
                this.style.margin = '';
            }
            var imgStyle = (this.style.cssText);

            strNewHTML += '<span '+imgId+imgClass+imgTitle+imgAlt;
            strNewHTML += 'style="position:relative;white-space:pre-line;display:inline-block;background:transparent;'+imgAlign+imgHand;
            strNewHTML += 'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;';
            strNewHTML += 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader' + '(src=\'' + jQuery(this).attr('src') + '\', sizingMethod=\'scale\');';
            strNewHTML += imgStyle+'"></span>';
            if (prevStyle != ''){
                strNewHTML = '<span style="position:relative;display:inline-block;'+prevStyle+imgHand+'width:' + jQuery(this).width() + 'px;' + 'height:' + jQuery(this).height() + 'px;'+'">' + strNewHTML + '</span>';
            }

            jQuery(this).hide();
            jQuery(this).after(strNewHTML);

        });

Kan ook zo (als jquery plugin):

JavaScript:

;(function($){
$.fn.pngfix = function () { 
    if ($.browser.msie && $.browser.version < 7) {
        return this.each (function () {
            $(this).css({
                filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+this.src+"')"
            });
            this.src = 'blank.gif';
        });
    } else {
        return this;
    }
};
})(jQuery);

Blijkbaar wist de schrijver niet dat img-tags ook een background-image konden hebben ofzo. Zo voeg je ook geen andere elementen toe en kopieer je allemaal eigenschappen die weer allerlei rare bugs tot gevolg kunnen hebben.

Voor CSS gebruik ik zelf geen PNG-fix, maar GIF-alternatieven voor graceful degradation in IE6.

[ Voor 3% gewijzigd door Bosmonster op 19-04-2010 16:54 ]

[Aloys]

Inmiddels heb ik de website bijna volledig correct in IE6, IE7/8 weet ik niet, daarvoor moet ik browsershots inschakelen.

De border werken nog niet netjes, overigens is het me wel duidelijk dat de javascript gewoon in alle browser de css-properties gebruikt, maar in IE kan dat niet, dus wordt er vanalles en nog wat gedaan.

Overigens JQuery is heel leuk en aardig, maar IE wil dat niet combineren met de pngFix die ik had. Nu laat ik slechts 1 png fixen, dat werkt tenminste . Ik denk dat ik de ronde borders etc gewoon in de Css ga zetten en mensen met IE dan voor de rest lekker in de kou laat staan.

Als iemand nog tips heeft hoor ik het graag .

En nu ga ik slapen, want ik ben het helemaal zat

[RobIII]

Aloys schreef op maandag 19 april 2010 @ 14:00:
Ik heb de link maar niet gepost, want dat wordt hier snel als spam gezien .

Zo lang als de link verwijst naar een WIP (en dus geen volledige, in productie zijnde zeg maar, site) die gewoon het probleem illustreert en dus als testcase dient en die niet bedoeld is als sitecheck of om bezoekers te lokken dan zullen wij niet snel iets voor spam aan zien hoor

[ Voor 5% gewijzigd door RobIII op 20-04-2010 00:57 ]

[Bosmonster]

Aloys schreef op dinsdag 20 april 2010 @ 00:43:

Overigens JQuery is heel leuk en aardig, maar IE wil dat niet combineren met de pngFix die ik had. Nu laat ik slechts 1 png fixen, dat werkt tenminste . Ik denk dat ik de ronde borders etc gewoon in de Css ga zetten en mensen met IE dan voor de rest lekker in de kou laat staan.

Goh laat dat nou precies de reden zijn dat ik een hekel heb aan die PNGfix Die rommelt wat aan met de elementen in sommige browsers, waardoor je gewoon niet meer aankan op een consistente DOM. Mijn versie laat gewoon de img-tag intact en voegt niks extra's toe.

[ Voor 5% gewijzigd door Bosmonster op 20-04-2010 09:57 ]

[Aloys]

Ik kon jouw versie anders niet werkend krijgen, en als ik dat ooit toch voor elkaar krijg, laat hij dan repeating background intact? Als dat zou is ga ik nog even opnieuw proberen/uitzoeken.

Offtopic: Nu moet ik mijn MBP even rust geven, want een geheugenverdubbeling kan niet tijdens het denken .

[Bosmonster]

Aloys schreef op dinsdag 20 april 2010 @ 10:12:
Ik kon jouw versie anders niet werkend krijgen, en als ik dat ooit toch voor elkaar krijg, laat hij dan repeating background intact? Als dat zou is ga ik nog even opnieuw proberen/uitzoeken.

Offtopic: Nu moet ik mijn MBP even rust geven, want een geheugenverdubbeling kan niet tijdens het denken .

Nee, dat zei ik juist.

A. Gebruik deze simpele PNG-fix voor img-tags.
B. Gebruik voor PNG's in CSS (zoals backgrounds etc), GIF-alternatieven in IE6 stylesheet

En de code is een jQuery-plugin. Als je weet hoe je jQuery plugins gebruikt weet je ook hoe dit werkt.

[Verwijderd]

MueR schreef op maandag 19 april 2010 @ 15:26:
[...]

Ik ben zelf meer van het gebruik van border-radius. Browsers die het niet ondersteunen hebben gewoon pech.

Dat vind ik altijd een lastige. Er zijn namelijk heel veel IE gebruikers op het internet (lees: nog steeds bijna het merendeel van de gebruikers) die dus allemaal rechte hoeken zien i.p.v. ronde hoeken. Pas in de 9e versie van IE wordt CSS3 volledig ondersteund terwijl FF, Chrome, Safari en Opera al bijna direct volledig standard-compliant waren.
Wat voor de laatstgenoemde browsers 2 regels CSS code is voor de ronde hoekjes, is voor IE een heel nieuw avontuur met bergen DIV's, transparante PNG's (tenzij je IE6 gebruikt, waarbij zelfs transparante plaatjes niet worden ondersteund) voor de hoekjes en allerlei extra CSS code om ervoor te zorgen dat de website ook onder IE hetzelfde eruit ziet.

Voor custom webapplicaties voor intern gebruik ben ik er overigens heel simpel in: enkel standard-compliant code in de webapplicaties.

[Xantios]

offtopic:
Hihi,een kerk en een Wip?

Hoe dan ook,Mooi design!
deze post voegt verder dan ook niks toe.