7 berichten aan het bekijken - 1 tot 7 (van in totaal 7)
  • Q:

    Bijdrager
    Brac

    Submit button in Safari

    Ik ben op dit moment bezig met het maken van een nieuwe layout voor een website. Het ontwerpwerk is gedaan en nu ben ik bezig met het omzetten in html/css/js. Dit gaat allemaal redelijk, ik wil de website in Firefox, Internet Explorer en Safari hetzelfde uit laten zien. Vaak is er na een tijdje wel een oplossing om dat voor elkaar te krijgen.

    Ik ben nu bezig met het stylen van de submit-buttons. Ik heb in mijn css file het volgende:[code:1:35064d0819].button {
    width: 96px;
    background-image: url(’images/button.gif’);
    height: 21px;
    font-weight: bold;
    cursor: pointer;
    float: left;
    text-decoration: none;
    margin-right: 4px;
    border: 0px;
    }[/code:1:35064d0819]En een button in de html:[code:1:35064d0819]<input class="button" href="red.htm" type="submit" value="Reageer">[/code:1:35064d0819]Werkt prachtig in Firefox. Maar helaas. Safari weigert op elke manier om ook maar iets te veranderen aan de buttons. Leuk, zo’n Aqua-interface, maar het moet zo zijn grenzen kennen. Op de website die ik aan het bouwen ben staan de Aqua-buttons totaal niet.

    Is er een mogelijkheid om toch (eventueel met css-hacks) de buttons een ander uiterlijk te geven? Of is de enige mogelijkheid er geen button meer van maken (waar ik geen zin in heb).


    Bijdrager
    wout3r

    Dat is niet mogelijk met HTML/CSS of JavaScript. Wat je wel kan doen is gewoon in Photoshop een button ontwerpen als image en dan een submit button van maken.

    [code:1:3ba9c3a85e]
    <input type="image" src="../hierjelink.gif" name="verzend">
    [/code:1:3ba9c3a85e]


    Bijdrager
    benj1989

    Bijdrager
    Brac

    @wout3r: dan moet ik voor elke andere tekst op de button een nieuw plaatje maken in PS, ook niet echt praktisch

    Een button werkt erg goed, alleen komt de tekst dan niet in het midden maar bovenaan de button. Vertical-align: middle doet niks. In Firefox word de tekst gewoon verticaal gecentreerd dus met padding-top werken geeft problemen in Firefox… iemand een oplossing voor dit probleem?


    Bijdrager
    Jean-Jacques

    Bijdrager
    wout3r

    Maar dit geldt toch niet alleen voor Safari? Firefox op Mac is volgens mij de enige die custom buttons aankan..


    Bijdrager
    Brac

    Met de <button tag kun je aanpasbare buttons maken. Er is alleen totaal niet mee te werken omdat Safari de tekst niet verticaal centreert en daarnaast een andere grote aanhoud voor de button (bij opgegeven hoogte/breedte). Ik heb er dus maar voor gekozen om toch gewoon inputbuttons te gebruiken en op dit punt maar schijt aan Safari te hebben. Hopelijk lossen ze dit in volgende versies op, want eerlijk gezegd vind ik het een beetje van de gekken:roll:

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

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