in HTML5 bij IE bullet extreem klein - Softwareontwikkeling

donderdag 28 maart 2013 14:59

Acties:

Topicstarter

Ik ben overgestapt naar HTML 5.
Wat er gebeurt bij unordered lists is dat de bullets plotseling heel klein worden.
Het enige wat ik verander is

HTML:

1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

vervangen door

HTML:

1	<!DOCTYPE html>

.
Dat effect doet zich alleen voor bij IE.
Ik vind dat foeilelijk, te meer daar de blockbullet wel heel groot is.
Weet iemand wat je er aan kunt doen?
Bij Safari, Firefox en Chrome doet het zich niet voor, dus een oplossing alleen werkt voor IE zou het mooiste zijn.

rein van der meij

donderdag 28 maart 2013 15:05

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

As always: begin eens bij 't begin:

HTML5 DTD
HTML4 Transitional DTD
(Zie linkerbalk onder "fiddle options")

Ik zie geen verschil. Dus: er is een CSS of iets anders in 't spel die invloed heeft op je bullets. Die CSS (of "iets anders") werkt in HTML5 en HTML4 klaarblijkelijk verschillend. Nu ga je dus speuren naar wat dat kan zijn.

Begin dus eens met een jsFiddle (of lege HTML op je lokale harde schijf of whatever...) en plak daar alle relevante(!) CSS/JS/HTML etc. in om je probleem te reproduceren en ga van daar uit terug 1 voor 1 zaken verwijderen totdat je probleem is opgelost. Et voila; probleem pinpointed.

[ Voor 9% gewijzigd door RobIII op 28-03-2013 15:10 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 28 maart 2013 15:08

Acties:

Gusev

In welke IE heb jij het getest dan RobIII? Ik zie namelijk wel verschil.

In IE9 (standaard modus) worden de bullets bij mij kleiner weergegeven dan in Chrome 26 bij jouw eigen voorbeeld.

donderdag 28 maart 2013 15:11

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Gusev schreef op donderdag 28 maart 2013 @ 15:08:
In welke IE heb jij het getest dan RobIII? Ik zie namelijk wel verschil.

IE10 (W8). Heb eerlijk gezegd niet gekeken naar dat "compatibiliteitsmode" icoontje. Maar als 't daar aan ligt: heb je dus ook meteen de veroorzaker gevonden. Basic troubleshootwerk

[Edit]
Even gechecked: compatibilteitsmodus uit: Geen verschil:

Compatibiliteitsmodus aan: geen verschil:

Er is wél een onderling verschil (1⇔a en 2⇔b) tussen compatibilteitsmodus aan/uit, maar als ik op TS afga zie ik daar 't probleem niet want beide DTD's uit de TS zouden (ook in oudere IE's dan IE10) beiden gewoon de quirksmode moeten uitgooien (a.k.a. compatibiliteitsmodus uit "forceren") en dus een 1⇔2 vergelijk moeten opleveren i.p.v. 1⇔b.

[ Voor 94% gewijzigd door RobIII op 28-03-2013 15:36 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 28 maart 2013 16:00

Acties:

Gusev

OK, hier IE9 op W7 dus. Overigens is het (naar mijn idee) niet een CSS probleem, maar een browser specifiek gedrag.

Het is dan wel weer eventueel op te lossen met conditional formatting, en dan zoiets toepassen: http://jsfiddle.net/6qm3d/90/

[ Voor 7% gewijzigd door Gusev op 28-03-2013 16:01 ]

donderdag 28 maart 2013 16:33

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Gusev schreef op donderdag 28 maart 2013 @ 16:00:
OK, hier IE9 op W7 dus. Overigens is het (naar mijn idee) niet een CSS probleem, maar een browser specifiek gedrag.

In die zin dat er een verschil zit in de "default bullet size"; als je die zou kunnen forceren in CSS (wat helaas, AFAIK althans, niet kan) zou dat mooier zijn.
Ik bedoel dus dat, bijv., een H1 ook in verschillende browsers / browserversies een verschillende look/margins/paddings/whatnot heeft. Met een reset.css (of gewoon in je eigen CSS de values allemaal te specificeren) los je dat op. Dat gaat dus echter helaas niet met de grootte van 't bolleke (AFAIK). En dan kom je dus inderdaad hacks aan 't toepassen zoals jij doet: met een :before en content e.d. Ik vrees echter dat dat net zo problematisch is als je in verschillende browsers op verschillende platforms kijkt i.v.m. specifieke fonts (en versies daarvan, laat staan fallbacks e.d.) waardoor je alsnog verschillende bolletjesafmetingen kunt krijgen. En dan vraag ik me af: is 't al die poeha/hacks wel waard? Neem dan of gewoon een PNG'tje oid, of "zeur niet" over die anderhalve pixel verschil en ga door met belangrijke(re) zaken

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 28 maart 2013 16:43

Acties:

Gusev

Het laatste als je het mij vraagt

en inderdaad het ena laatste als je het toch wilt doen. Met een plaatje is het inderdaad makkelijker eenduidig door te voeren.

vrijdag 29 maart 2013 11:41

Acties:

livingtale

Topicstarter

Beste Rob,

Je schrijft: "En dan vraag ik me af: is 't al die poeha/hacks wel waard?"

Het is voor mij wel degelijk een groot probleem omdat een unordered list met de 3 standaard soorten bullets erg lelijk wordt (de blokbullet is wel groot):

moordspelen sitemap

Ik begrijp dat het probleem zich niet voordoed in IE9 (ik heb IE8 ). Mijn website statistiek geeft alleen de browser aan, niet de versie.
IE is voor mij nog steeds de belangrijkste browser (ook al haat ik die zelf): dus belangrijk. En volgens mij is de meerderheid van de IE gebruikers 8 en lager. Je zult de vraag wel dom vinden: maar klopt dit. Zo ja, dan heb ik toch echt een probleem.

Dan de oplossing die jullie noemen: plaatjes gebruiken. Volgens mij worden plaatjes niet geschaald (ik gebruik ze ook in elementen met groter/kleiner lettertype), dus dan werkt het niet naar tevredenheid. En kost het niet veel extra laadtijd?

rein van der meij

vrijdag 29 maart 2013 11:50

Acties:

Sebazzz

3dp

Ik krijg wel een aantal keer in het IE10 console:

HTML1508: Unmatched end tag. 
sitemap.html, line 49 character 1
HTML1503: Unexpected start tag. 
sitemap.html, line 54 character 2
HTML1508: Unmatched end tag. 
sitemap.html, line 55 character 1
HTML1508: Unmatched end tag. 
sitemap.html, line 71 character 2

Controleer eens of je HTML valide is.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]