[CSS] divs minimiem verschil in IE9 vs Chrome 17

[gizmo9003]

Ik heb een layout voor een website, vrij standaard.
Maar de precieze vorm van de div's gedraagt zich net iets anders in Chrome (1 a 2 pixels verschuiving), dan in IE9. En ik kan maar niet bedenken hoe dat komt.

Het gaat om deze pagina:
http://www.fysiotherapieameidepark.nl/index.html

De blauwe menubalk bovenin, heeft in chrome een witte streep van 1 pixel breed aan de rechterkant.
Ook zie je in het grijze menu aan de linkerkant, dat het bovenste stukje van dat menu net iets te breed is naar rechts toe, en onderin net iets te breed naar links toe.

Weet iemand waar dit fout gaat?
De stylesheet staat hier
http://www.fysiotherapieameidepark.nl/style.css

[Jey]

Pixelperfect designen jadat is oefenen. Als internet explorer <10 gebruiker zie je de helft van het internet al niet zoals de designer het bedoeld heeft. Moet je je dan druk maken om een paar pixels.
Wen er maar aan dat er verschillen tussen de browsers zitten, zorg gewoon dat het op elke browser goed werkt. Een mindere browser ziet er dan wat minder uit, dan moet de bezoeker maar een moderne browser gebruiken.

[BramVroy]

Ik ga niet akkoord met hierboven. Het hangt er ook van af wat je wilt bereiken.

Wil je geld verdienen met websites bouwen? Ben je zelfstandige en moet je klanten lokken? Dan is het mooi dat je kan zeggen 'mijn website ziet er op elke browser hetzelfde uit!' Ben je echter gewoon een hobbyist of heb je zelf gewoon een websiteje opgezet en beoog je niet om veel bezoekers te krijgen? Dan kan je hier al eens overheen kijken. Zelf ben ik meer een 'pietje precies', en ik wil het in zo veel mogelijk browsers correct hebben.

Een zeer goed begin is al een CSS reset. De bedoeling hiervan is om de storende waarden van padding, margin en what-not van alle browsers gelijk te stellen (want dat zijn ze by default niét!).

Hoe werkt het? Zoek een CSS reset op het internet. Dit zijn er al twee goeie: http://meyerweb.com/eric/tools/css/reset/index.html en http://yuilibrary.com/yui/docs/cssreset/ Zorg dat je deze stylesheets dan include vóor je huidige stylesheet. Op die manier overschrijf je dan alle values naar de value die jij wilt.

Let wel op: het kan zijn dat je sommige dingen nu gaat moeten aanpassen die eerst geen probleem vormden (bv. de line-height), maar het helpt je in de toekomst wel vééél verder!

[CH4OS]

BramVroy schreef op zondag 15 april 2012 @ 14:00:
Ik ga niet akkoord met hierboven. Het hangt er ook van af wat je wilt bereiken.

Wil je geld verdienen met websites bouwen? Ben je zelfstandige en moet je klanten lokken? Dan is het mooi dat je kan zeggen 'mijn website ziet er op elke browser hetzelfde uit!'

Het is niet zozeer wát, maar wíe je wil bereiken. Daarnaast vind ik dat je als je websites bouwt vóór bedrijven of mensen tegen betaling, dat je dan ook best weder eisen mag stellen, die leg je vast in het contract die je maakt met het bedrijf of de persoon. Willen ze desondanks meer, goed, maar dan wel met een extra zak(je) met geld, sim-pel, omdat het jou dan ook méér tijd kost om te zorgen dat de website in kwestie op nog meer browsers goed werkt. Test daarom de website nooit zelf, laat dit altijd doen, o.a. door de klant, maar ook door iemand vanuit de doelgroep zelf.

Oude browsers moet je namelijk niet eeuwig willen blijven ondersteunen, dan hou je de techniek alleen maar tegen en zal HTML5 en CSS3 nooit mainstream gaan worden. Technieken die het imo juist makkelijker moeten maken.

Ben je echter gewoon een hobbyist of heb je zelf gewoon een websiteje opgezet en beoog je niet om veel bezoekers te krijgen? Dan kan je hier al eens overheen kijken. Zelf ben ik meer een 'pietje precies', en ik wil het in zo veel mogelijk browsers correct hebben.

Dat maakt imo geen verschil. Helemaal correct zal het nooit worden, omdat Chrome een totaal andere engine (webkit) gebriukt dan IE dat doet (trident). Dáár zitten hem de minieme verschillen in en dat zul je nóóit weggewerkt krijgen.

Een zeer goed begin is al een CSS reset. De bedoeling hiervan is om de storende waarden van padding, margin en what-not van alle browsers gelijk te stellen (want dat zijn ze by default niét!).

Hoe werkt het? Zoek een CSS reset op het internet. Dit zijn er al twee goeie: http://meyerweb.com/eric/tools/css/reset/index.html en http://yuilibrary.com/yui/docs/cssreset/ Zorg dat je deze stylesheets dan include vóor je huidige stylesheet. Op die manier overschrijf je dan alle values naar de value die jij wilt.

Let wel op: het kan zijn dat je sommige dingen nu gaat moeten aanpassen die eerst geen probleem vormden (bv. de line-height), maar het helpt je in de toekomst wel vééél verder!

En dat levert alleen maar overhead op en ik vraag me af of je dat nou wel zou willen op een website.

[ Voor 8% gewijzigd door CH4OS op 15-04-2012 14:14 ]

[crisp]

Ben je toevallig ingezoomed in Chrome? Dat levert soms namelijk wel eens wat pixelfoutjes op. Een keertje op ctrl+0 drukken lost het dan voor je op

[BramVroy]

Dat hangt nogal samen hé. Als je dat wat je wilt bereiken 'geld' (werkgelegenheid etc.) is, dan moet je uiteraard rekening houden met de 'wie'. Omgekeerd ook. Als je voor grote bedrijven gaat werken, ga je ook andere dingen bereiken en gebruiken dan wanneer je voor een paar vrienden een websiteje ineen steekt.

Ik zeg ook niet dat je IE6 moet ondersteunen. Zelf twijfel ik vaak nog. Basisfunctionaliteit moet voor ie7 en hoger er zijn. Design pas vanaf IE8, degenen die minder hebben, hebben pech. Inderdaad om moderne technieken (HTML5 en CSS3) een voorsprong te geven op alternatieven (JS (m.s. jQuery)).

Over CSS reset: geen idee waarom jij tegen css reset bent. Zéker voor beginnende webdevs is een CSS reset gemakkelijk. Als je wat gevorderd bent, weet je wat je wilt en wat niet (bv.: je wilt enkel default margins, maar al de rest niet: oké! Dat type je dan even uit). Ik zeg niet dat iedereen het altijd moet gebruiken, maar het kan je vaak wel helpen. Overhead: tgoh. Imo is dat verwaarloosbaar. Meyer's reset is +-1kB groot. Als je dit samenvoegt bij je huidige css file maakt dat écht niet zo'n groot verschil.

Maar goed: sommigen (vooral beginners) zullen er veel aan hebben - en het bespaart veel tijd met cross-browser problemen. Anderen zullen het vervelend vinden omdat je veel terug gaat moeten editen (list bullets, line-height, fonts etc.) Ik gaf het daarom ook maar aan als hint, niet als een must-have.

EDIT: OT: als je je width van #container verandert naar 751px is het ook opgelost. Heb niet getest in andere browsers.

[ Voor 4% gewijzigd door BramVroy op 15-04-2012 14:40 ]

[Patriot]

crisp schreef op zondag 15 april 2012 @ 14:30:
Ben je toevallig ingezoomed in Chrome? Dat levert soms namelijk wel eens wat pixelfoutjes op. Een keertje op ctrl+0 drukken lost het dan voor je op

Dat lijkt niet het probleem te zijn.

Ik vind het een bijzonder probleempje. Het is 'op te lossen' in Chrome door het navlist element even op 751 pixels breed te zetten. Ik dacht dat het misschien een afrondingsdingetje was, maar je gebruikt eigenlijk nergens relatieve afstanden/groottes. Alleen in de padding gebruik je em, maar als je daar een aantal pixels van maakt is het probleem er nog.

[CH4OS]

BramVroy schreef op zondag 15 april 2012 @ 14:37:
Over CSS reset: geen idee waarom jij tegen css reset bent. Zéker voor beginnende webdevs is een CSS reset gemakkelijk. Als je wat gevorderd bent, weet je wat je wilt en wat niet (bv.: je wilt enkel default margins, maar al de rest niet: oké! Dat type je dan even uit). Ik zeg niet dat iedereen het altijd moet gebruiken, maar het kan je vaak wel helpen. Overhead: tgoh. Imo is dat verwaarloosbaar. Meyer's reset is +-1kB groot. Als je dit samenvoegt bij je huidige css file maakt dat écht niet zo'n groot verschil.

Het gaat mij niet zozeer om het gewicht qua dataverkeer, maar de ellende die het op kán leveren als je een simpele aanpassing wil doen in je CSS. Zo'n reset is leuk, maar je hebt er imo niks aan als je later toch weer bepaalde instellingen gaat doen met CSS, het overrulen dus. Voor fonts werk ik veel met pt als formaat en ik neig eigenlijk naar em te gaan, de meer vaste maten dus. Dan heb je namelijk ook geen 'CSS reset' meer nodig.

Maar goed: sommigen (vooral beginners) zullen er veel aan hebben - en het bespaart veel tijd met cross-browser problemen. Anderen zullen het vervelend vinden omdat je veel terug gaat moeten editen (list bullets, line-height, fonts etc.) Ik gaf het daarom ook maar aan als hint, niet als een must-have.

Zoals in mijn voorbeeld: gebruik pt of em en je hebt qua fonts ook geen problemen meer. Voor de groottes van div (e.d.) kun je niet anders dan met pixels gaan werken, dat werkt het nauwkeurigst. Dat een andere browser dan een div net 2 pixels breder laat... Tja... Is dat zó'n groot probleem dan?

[BramVroy]

CptChaos schreef op zondag 15 april 2012 @ 14:49:
Dat een andere browser dan een div net 2 pixels breder laat... Tja... Is dat zó'n groot probleem dan?

Waar gaat dit topic over?

Ja dus. Eén of zeker 2px kunnen zeker een groot probleem vormen op vlak van design. Dat was eigenlijk heel mijn punt

[CH4OS]

Als 2 pixels werkelijk zó'n groot probleem zijn zou ik zeggen dat er ergens in het design (of eigenlijk de markup ervan) iets niet helemaal lekker loopt, normaliter heb je er namelijk niet zó veel last van. Ikzelf had daar in het verleden wel eens last van iig. Mede hierdoor bouw ik sites op vanuit Firefox, die is over het algemeen redelijk standaard, browser specifieke aanpassingen doe ik daarna dan wel.

[ Voor 22% gewijzigd door CH4OS op 15-04-2012 15:00 ]

[BramVroy]

Nee, dat weet ik. 'Normaal' heb je er geen last van. Maar, stel dat het toch gebeurt en je niet weet hoe het komt, kan je altijd eens een css reset gebruiken om te controleren.

[CH4OS]

Maar dan los je het werkelijke probleem niet op en loop je het risico meer problemen te introduceren.

[BramVroy]

In dit geval waarschijnlijk wel. Maar in vele andere gevallen niet. Je zegt zelf 'wat maken die 2px's nu uit?' Wel, in een gelijkaardig scenario kunnen die twee pixels ook een 'openingetje' laten in je design en dat is ook maar lelijk. Vandaar.

[gizmo9003]

Ik vind de ontstane discussie best interessant! Maar los daarvan:

crisp schreef op zondag 15 april 2012 @ 14:30:
Ben je toevallig ingezoomed in Chrome? Dat levert soms namelijk wel eens wat pixelfoutjes op. Een keertje op ctrl+0 drukken lost het dan voor je op

Dit was het inderdaad! Hoe simpel kan het zijn zeg.... bedankt!

Het is overigens geen super belangrijke website ofzo, maar als de kantlijn van een menu op een plek met 1 pixel verspringt, stoort mij dat persoonlijk gewoon. Dus dat wil ik graag opgelost hebben

[Patriot]

gizmo9003 schreef op zondag 15 april 2012 @ 15:46:
Ik vind de ontstane discussie best interessant! Maar los daarvan:


[...]


Dit was het inderdaad! Hoe simpel kan het zijn zeg.... bedankt!

Het is overigens geen super belangrijke website ofzo, maar als de kantlijn van een menu op een plek met 1 pixel verspringt, stoort mij dat persoonlijk gewoon. Dus dat wil ik graag opgelost hebben

Zeker weten? Ik kijk nu net, en ik zie hier nog een stukje wit. Het is overigens wel iets dat lijkt te verdwijnen/verschijnen afhankelijk van het zoomniveau.

[BramVroy]

Heb wat zitten testen en vond iets zeer vreemd:

De 1px white space is er pas als je window een resolutie heeft van >1280px (width). Je background-image heeft ook een width van 1280px. Ik zou het daar gaan zoeken. Iets loopt fout met de positionering: het verschuift een pixel naar links.

Oplossing: weg met die background-image (vond het al vreemd dat je die gebruikte) en gebruik gewoon css:

Cascading Stylesheet:

body {background: #7F7F7F;}
#container {background: white; box-shadow: 0 0 50px rgba(0,0,0,0.5);}

Voor <ie9 kan je dan nog een apart stylesheet maken dat wél gebruik maakt van die background-image.