Website probleempje

[Anoniem: 481926]

Hallo allemaal!

Om te beginnen wil ik even vermelden dat ik designer ben, en dus geen scripter. Ik vond het ook al heel wat dat ik mijn huidige versie al zo ver heb gekregen.

Ik ben bezig met een website voor een bedrijf dat nodig toe was aan een vernieuwing. Helaas loop ik tegen wat probleempjes op. Zo heb ik een aantal jQuery plugins gebruikt en werken die niet helemaal zoals ik wil. Ook klopt er soms iets niet met mijn uitlijning.

Op firefox lijkt hij het allemaal prima te doen, safari heeft zo zijn uurtjes de ene keer als ik hem opstart doet hij t wel goed en daarna weer niet en laten we het over internet explorer niet eens hebben want daar doet hij het al helemaal niet goed op.

Nu heb ik internet explorer weten te fixen doormiddel van het uitvoeren in compabiliteits-modus o.i.d. , maargoed dat is natuurlijk niet de bedoeling.

Ik heb op het internet gezocht maar ik zou niet weten wat het kan zijn. Het stomme is dat ik de site het hele proces heb getest en het gewoon werkte, maar aan het eind niet meer.

Heeft er iemand toevallig tips, tricks of zou me verder kunnen helpen?

Ik heb hem even tijdelijk hier online gezet.

Alvast bedankt,

Met vriendelijke groeten

Robin

[ViNyL]

Waar je mee zou kunnen beginnen is een template zoals Boilerplate gebruiken. http://html5boilerplate.com/

Veel browserquirks zijn daar al in afgevlakt zodat je er minder of geen last vast hebt.

Als een browser het de ene keer wel goed en vervolgens niet goed laat zien vraag ik me af of dit aan de browser ligt..

[NMe]

En nu moeten we dus zelf opzoeken wát er precies "het niet goed doet"? Begin eens met het omschrijven van je probleem, want het is dus niet de bedoeling dat we gaan raden aan de hand van je complete site.

[Anoniem: 481926]

Hohoho! Dit was niet mijn bedoeling. Natuurlijk heb ik gezocht, sterker nog, ik heb de site 2 keer opnieuw in elkaar gezet om te kijken waar de "aanpassingen" zaten die er voor zorgde dat het ineens niet werkte. Uitsluiten, debuggen of hoe je dat ook noemt.

Dat het niet aan de browser ligt snap ik ook wel, 't zit het 'm in mijn kunnen. En nee je hoeft ook niet de hele site door te spitten, want het probleem bij iedere pagina het zelfde. Ik neem aan dat je aan 1 pagina wel genoeg hebt, home.

Mijn vraag was meer of dit een bekend probleem voor jullie zou kunnen zijn? Want ik kom er gewoon niet uit, iedere keer gaat het weer ergens fout.

Maar hier een nog wat duidelijkere beschrijving:

Firefox zou hem als het goed is fatsoenlijk moeten weergeven. De content staat gecentreerd, jQuery header werkt, jQuery menu werkt, footer staat keurig vast en menubalken staan op de goede plek.

Safari is tot nu toe altijd maar een beetje de vraag, in principe staat daar ook alles prima op z'n plek maar soms klapt de jQuery header er ineens uit. Soms ook heel lang niet, maar ik vind t niet netjes.

Internet Explorer heeft, op het eerste gezicht, een probleem met het centreren. De footer staat al enige keurig op zijn plek. Alles daar boven wordt aan de linker zijde van het scherm geplakt. Ook repeat hij geen achtergrond op de x as. Het rare is, zodra je een andere pagina dan de homepage opent, laat hij weer een "gedeelte" van deze repeat x achtergrond zien. Ook de jQuery header en menu doen 't niet.

Als ik dan rechts in de url balk compabiliteitsweergave aanklik is het probleem ineens opgelost.

Ik weet dus dat het hier iets mee te maken heeft, en ik heb me rot gezocht naar wat. Ook heb ik het dus opnieuw proberen op te bouwen, maar loop steeds tegen dit probleem op. Kortom, ik weet het niet

Normaal post ik niet zo snel wat, als ik een probleem heb, want meestal is het wel terug te vinden met google. Maar dit is net iets te specifiek ben ik bang.

Ik hoop dat dit iets meer duidelijkheid schept.

[Barryvdh]

Wat is dit?

code:

 <!--[if !IE 7]>
    <style type="text/css">
        #wrap {display:table;height:100%}
    </style>
<![endif]-->

Dat voer je dus elke keer uit als je niet in IE7 zit (dus IE8/IE9 wel). Dat wil je sowieso niet. Normaal gesproken gebruik je die tags om te controleren of iets een lagere versie van IE heeft, dus <!--[if lt IE 8]> voor IE6+IE7..
Dat scheelt volgens mij al heel veel met centeren enzo. (Want compabiliteitsweergave is dus IE7)

En ipv

code:

<meta http-equiv="X-UA-Compatible" content="chrome=1">

kan je beter het volgende gebruiken, dat zorgt er voordat hij in de nieuwste IE versie wordt gerenderd, die beschikbaar is (dus niet in comp. modus):

code:

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

En verder, begin even met dit doorlopen:
http://validator.w3.org/c...prang.nl/group/index.html
Je gebruik bijv meerdere id's vaker, kan zijn dat sommige browsers daar over vallen als je javascript gebruikt.

[ Voor 41% gewijzigd door Barryvdh op 30-01-2013 10:37 ]

[ViNyL]

Die meta tag is niet echt aan te raden.

http://alistapart.com/article/beyonddoctype

[Afvalzak]

Heb je de site al door de w3c validator gegooid? Dat kan vaak schelen en als het niets uit maakt is het alsnog netjes

[Barryvdh]

ViNyL schreef op woensdag 30 januari 2013 @ 10:50:
Die meta tag is niet echt aan te raden.

http://alistapart.com/article/beyonddoctype

Dat is een artikel van 5 jaar geleden he.. IE=Edge zorgt er gewoon voor dat je de nieuwste engine krijgt. Als je je gewoon aan de standaarden houdt, hoef je niet bang te zijn dat volgende IE versies de website ineens breken. Chrome/Firefox/Safari updaten zichzelf ook gewoon automatisch.
En html5boilerplate raadt het wel aan, dat is iets recenter als dat artikel; https://github.com/h5bp/h...c/html.md#x-ua-compatible

[Ronnyrr]

Weet verder niet of het heel veel uit maakt, heb er geprobeerd op te zoeken maar je maakt geen gebruik of bent de <html> & </html> tag vergeten.

Na <DOCTYPE> en na </body>

[NMe]

Bij het HTML5-doctype mag je de HTML-tag weglaten, maar bij mijn weten mag je dan wel alleen <head> en <body> tags op het laagste niveau gebruiken. Dus geen conditionele style-tags.

En als je daadwerkelijk iets wil leren dat klopt, blijf dan vooral ver weg bij die idioten van W3Schools. De ene helft van hun informatie is achterhaald, de andere helft feitelijk onjuist.

[ Voor 34% gewijzigd door NMe op 30-01-2013 13:23 ]

[MueR]

Dit is valide HTML5 hoor (ook al zegt de W3C validator van niet):

HTML:

<!DOCTYPE html>
<style type="text/css">
  body { background: black; color: white; }
  p { width:960px; margin:0 auto 3em; }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Het is wel aan te raden om netjes <html>, <head> en <body> te gebruiken, maar niet verplicht.

[ Voor 13% gewijzigd door MueR op 30-01-2013 16:39 ]