24 berichten aan het bekijken - 1 tot 24 (van in totaal 24)
  • Q:
    Bijdrager
    The JM

    Vage sponsorbug in Safari

    Dit is echt heel erg vaag! Als ik dit in Safari laat zien:

    [code:1:d70df3a8fc]<tbody class="hoog">
    <tr>
    <td>Ik wil me graag aamelden als:</td>
    </tr>
    </tbody>
    <tbody class="sub">
    <tr>
    <td><input type="checkbox" id="lid" value="lid" onClick="checkLid()"><label for="lid" id="label">Lid</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="donateur" value="donateur"><label for="donateur" id="label">Donateur</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="vrijwilliger" value="vrijwilliger"><label for="vrijwilliger" id="label">Vrijwilliger</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="sponsor" value="sponsor"><label for="sponsor" id="label">Sponsor</label></td>
    </tr>
    </tbody>[/code:1:d70df3a8fc]

    Dan krijg ik dit te zien:

    Het sponsor-veld is dus helemaal opgeschoven en de checkbox er voor is veel te groot, terwijl Firefox het veld wel goed laat zien.
    En nu komt het, als ik het woord sponsor (met kleine letter) vervang door het woord fiets dan laat hij het wél goed zien:

    Nou is dat natuurlijk een oplossing voor het probleem, maar dan vraag ik me wel nog steeds af waarom het woord ‘sponsor’ fouten maakt en een ander woord niet. En ik gebruik liever het woord ‘sponsor’, dat voorkomt dat ik simpele fouten ga maken in het script.

    Bijdrager
    Janozua

    Hij doet het toch gewoon?

    Bijdrager
    The JM

    In de Snippeteditor wel ja, maar op de pagina niet.

    Bijdrager
    MrTeal

    misschien is het omdat het woord sponsor te lang is, dat hij het daarom opschuift? lijkt me nogal onlogisch maar wie weet is het dat.

    Bijdrager
    The JM

    Nee dat is het niet;) ‘vrijwilliger’ werkt wel gewoon.

    Bijdrager
    arri

    misschien iets in je css?
    justified-text?
    ontbrekende tag ergens?

    kan vanalles zijn

    Bijdrager
    kay-tong

    probeer dit:

    [code:1:62fe26d480]<tbody class="hoog">
    <tr>
    <td>Ik wil me graag aamelden als:</td>
    </tr>
    </tbody>

    <tbody class="sub">
    <tr>
    <td><input type="checkbox" id="lid" value="lid" onClick="checkLid()"><label for="lid" id="label">Lid</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="sponsor" value="sponsor"><label for="sponsor" id="label">Sponsor</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="donateur" value="donateur"><label for="donateur" id="label">Donateur</label></td>
    </tr>
    <tr>
    <td><input type="checkbox" id="vrijwilliger" value="vrijwilliger"><label for="vrijwilliger" id="label">Vrijwilliger</label></td>
    </tr>
    </tbody>[/code:1:62fe26d480]

    Bijdrager
    GrizzDesign

    De lengte van het woord dat word weergegeven op de pagina is sowieso niet belangrijk hier, want als TS het woord “sponsor” (met de kleine letter)

    <tr>
    <td><input type=”checkbox” id=”sponsor” value=”sponsor”><label for=”sponsor” id=”label”>Sponsor</label></td>
    </tr>
    </tbody>

    …als dat woord een ander woord word, dan werkt het script naar behoeven. Plus dan is er nog het feit dat Firefox het wel goed laat zien.


    Just my observations,

    Grizz

    Bijdrager
    The JM
    ”kay-tong”

    probeer dit:

    Dat had ik ook al geprobeerd, maar daar schiet ik niks mee op:

    Het ligt echt aan het woord ‘sponsor’, maar ik heb geen idee waarom.

    Bijdrager
    MegaChriz

    Misschien maakt Safari gebruik van een opmaaksjabloon waar ergens ‘#sponsor’ in voorkomt.
    Kijk eens bij de voorkeuren van Safari, tabblad ‘Geavanceerd’, opmaaksjabloon.

    Als er geen opmaaksjabloon is geselecteerd, zou ik goed je css doorkijken om te zien of daar ergens ‘#sponsor’ in voorkomt.

    Bijdrager
    Rub3n

    en je moet je inputs sluiten met [code:1:9c6640f54c] />[/code:1:9c6640f54c]

    Bijdrager
    dev10
    ”Rub3n”

    en je moet je inputs sluiten met [code:1:5cd389e4a0] />[/code:1:5cd389e4a0]

    Als je gewoon normale HTML 4.01 Strict gebruik niet.;)

    Bijdrager
    Deceipher
    ”MegaChriz”

    Als er geen opmaaksjabloon is geselecteerd, zou ik goed je css doorkijken om te zien of daar ergens ‘#sponsor’ in voorkomt.

    Lijkt me niet, want dan zou het in firefox ook aangepast weer gegeven moeten worden…

    Net even een paginaatje gemaakt, en hier werkt dat stukje gewoon. Zie link.
    Dus of het ligt aan jouw omgeving (safari template/plugins?), of aan de server waar je het op draait die er iets mee doet, óf aan evt. andere code die zich nog in je pagina bevind.

    Bijdrager
    kaydie

    Twee tbody’s in één tabel? :?

    Alle label elementen dezelfde id? :o

    Logisch dat dat fout gaat…

    Bijdrager
    Deceipher
    ”kaydie”

    Twee tbody’s in één tabel? :?

    Alle label elementen dezelfde id? :o

    Logisch dat dat fout gaat…

    Mwoah. Die 2 foutjes zijn eigenlijk enkel stijlfoutjes in deze context.
    ID’s kunnen ook gebruikt worden als css hooks, al kom je er niet mee door de validatie heen.
    (sowieso zie ik hier niet waarom er uberhaupt label tags gebruikt worden?)

    en die 2 tbodies, tja, kan eigenlijk ook niet, maar het geeft geen errors in principe. Je krijgt pas problemen zodra je bijv. css aanschrijvingen naar tbody’s gaat doen.

    Bijdrager
    MegaChriz
    ”Deceipher”
    ”MegaChriz”

    Als er geen opmaaksjabloon is geselecteerd, zou ik goed je css doorkijken om te zien of daar ergens ‘#sponsor’ in voorkomt.

    Lijkt me niet, want dan zou het in firefox ook aangepast weer gegeven moeten worden…

    Er zijn wel verschillen tussen Firefox en Safari. Zo geeft Safari bepaalde teksten op dit forum een schaduw, terwijl Firefox dat niet doet. En voor Firefox kun je bijvoorbeeld een rechthoek maken met afgeronde hoeken door in de css ‘-moz-border-radius’ te gebruiken. Dus het kan zijn dat er in de css ergens #sponsor staat met daarin stijleigenschappen specifiek voor Safari (of juist specifiek voor Firefox). Ik ken niet alle verschillen tussen Firefox en Safari.

    Bijdrager
    Deceipher

    Geen enkele browser geeft standaard bepaalde ID of CLASS-waarden op, tenzij gespecificeerd in een CSS die geladen is als template.

    Bijdrager
    Rub3n

    Als meneer een Live-view geeft, heeft meneer een veel grotere kans op meneren die de fout voor hem kunnen opsporen.

    Bijdrager
    kaydie
    ”Deceipher”

    Mwoah. Die 2 foutjes zijn eigenlijk enkel stijlfoutjes in deze context.
    ID’s kunnen ook gebruikt worden als css hooks, al kom je er niet mee door de validatie heen.
    (sowieso zie ik hier niet waarom er uberhaupt label tags gebruikt worden?)

    en die 2 tbodies, tja, kan eigenlijk ook niet, maar het geeft geen errors in principe. Je krijgt pas problemen zodra je bijv. css aanschrijvingen naar tbody’s gaat doen.

    Sorry…
    Twee tbodys in een tabel… ff gechecked… schijnt dus toch legaal te zijn:o
    Weer wat geleerd…

    Id’s horen uniek te zijn. Één gelijke id gebruiken op meerdere elementen kan serieus voor problemen zorgen bij het renderen van de pagina. Zeker als je ze met css gaat stylen.

    Met het label element kan je overigens de checkbox ernaast selecteren door op te tekst te klikken. Handig toch?

    Bijdrager
    The JM

    De site draait lokaal, dus een live voorbeeld is op het moment niet meteen mogelijk. Ik ben nu ook niet thuis, maar als ik thuis ben dan zal ik ‘m wel even online zetten.

    De id’s zijn niet uniek omdat ze allemaal dezelfde opmaak moeten hebben, dan is dat toch niet zo gek? Of moet ik dan met classes gaan werken omdat het werken met id’s niet verstandig is? Maar dat terzijde.

    Een oude versie van de CSS staat wel online en die heb ik net even bekeken en je raad het nooit: Er staat #sponsor tussen:P Is niet zo slim van mij;) Wel raar dat de checkbox dan ook vergroot wordt…Maar goed, dat is dus hopelijk zo opgelost.

    EDIT
    Over die labels: dat is makkelijker voor de gebruiker. Als je op het label klikt dan wordt de geassocieerde checkbox aan dan wel uit gevinkt.

    Bijdrager
    kaydie
    ”The

    De id’s zijn niet uniek omdat ze allemaal dezelfde opmaak moeten hebben, dan is dat toch niet zo gek?

    Ja, dat is het wel. id’s horen voor elk element op de pagina uniek te zijn.

    Of moet ik dan met classes gaan werken omdat het werken met id’s niet verstandig is? Maar dat terzijde.

    Nee, in dit geval helemaal niet nodig… Als alle labels binnen de table er hetzelfde uit moeten zien doe je dat het beste zo…
    Geef het table element een unieke id en style je labels als volgt…
    [code:1:d89f53aa77]table#tableid label{

    hier je css opmaak

    }[/code:1:d89f53aa77]

    Geen classes meer nodig voor je labels… :wink:

    Bijdrager
    The JM

    Dat is een goeie, ga ik dat doen. Hoe zit het dan met de id’s van de tbody’s? Want die komen ook vaker voor. Want iedere vraag in de form is id ‘hoog’ en dan het invoerveld is ‘sub’ (zoals in de code van de startpost staat). Mag dat dan wel of is het ook beter om anders te doen?

    Bijdrager
    kaydie

    In je openingspost zijn het classes…
    Volgens mij snap je nog niet helemaal waar ‘cascading’ voor staat in css?
    [code:1:39c9f98c48]table{

    }

    table#tableid{

    }

    table#tableid tbody{

    }

    table#tableid tbody.hoog{

    }

    table#tableid tbody.sub{

    }

    table#tableid label{

    }[/code:1:39c9f98c48]
    Neem dat als basis en begin dan met stylen.
    De kunst is om de css properties binnen de selectors zo weinig mogelijk te herhalen. Dat houdt het overzichtelijk. :)

    Bijdrager
    The JM

    Aha. Dat is inderdaad veel overzichtelijker, bedankt.

24 berichten aan het bekijken - 1 tot 24 (van in totaal 24)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.