NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.
Avatar

Člen
Avatar
:31.1.2014 20:14

Nevíte někdo co na tom mám špatně? V každém prohlížeči se to zobrazuje jinak. Např.: v ei je tlačítko menší než má být a v Chromu je textarea větší než inputy. Jen ve firefoxu se zobrazuje správně.
HTML:

<form method="post">
                                                                                <table>
                                                                                        <tr>
                                                                                                <td><input class="policka" type="text" name="jmeno" required="required" placeholder="Jméno" value="<?= htmlspecialchars($jmeno) ?>" /></td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                                <td><input class="policka" type="email" name="email" required="required" placeholder="E-mail" value="<?= htmlspecialchars($email) ?>" /></td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                                <td><input class="policka" name="rok" type="number" required="required" placeholder="Aktuální rok (spam kontrola)"/></td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                                <td><textarea name="zprava" required="required" placeholder="Obsah zprávy"><?= htmlspecialchars($zprava) ?></textarea></td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                                <td><input id="form_tlacitko" type="submit" value="Odeslat"/></td>
                                                                                        </tr>
                                                                                </table>
                                                                        </form>

CSS:

form table {
        position: relative;
  }

.policka {
        color: #0078A6;
        width: 400px;
        height: 25px;
        border: 2px solid #B3B3B3;
        transition: border 0.5s;
        font-family: Georgia;
  }

.policka:hover {
        border: 2px solid #3098BF;
  }

table tr td textarea {
        color: #0078A6;
        width: 400px;
        height: 150px;
        border: 2px solid #B3B3B3;
        font-family: Georgia;
        transition: border 0.5s;
  }

table tr td textarea:hover {
        border: 2px solid #3098BF;
  }

#form_tlacitko {
        color: #FFFFFF;
        width: 404px;
        height: 50px;
        border: 0px solid #00BBFF;
        background-color: #00BBFF;
        font-family: Georgia;
        cursor: pointer;
        font-size: 17px;
        transition: background 0.5s;
  }

#form_tlacitko:hover {
        background-color: #3098BF;
  }
 
Odpovědět
31.1.2014 20:14
Avatar
Michal Žůrek - misaz
Tvůrce
Avatar
Michal Žůrek - misaz:31.1.2014 21:10

Kdyby někdo ten první kód neviděl, tak musíte použít scrollbar.

 
Nahoru Odpovědět
31.1.2014 21:10
Avatar
Uživatel sítě
Tvůrce
Avatar
Uživatel sítě :31.1.2014 22:29

Každý prohlížeč má jiné vlastnosti pro dané elementy, avšak ty si můžeš lehce přizpůsobit ke svému obrazu jako to má zde devbook ty modré buttony..

Často doporučuji hromadně dát nulovou hodnotu margin, padding a border.

tedy:

<style>
div, span, input, form, textarea {
    margin: 0;
    padding: 0;
    border: 0;
}
</style>

Například.. :)

Nahoru Odpovědět
31.1.2014 22:29
Chybami se člověk učí, běžte se učit jinam!
Avatar
Uživatel sítě
Tvůrce
Avatar
Odpovídá na Uživatel sítě
Uživatel sítě :31.1.2014 22:32

Textarea má třeba ve výchozí hodnotě pro chrome padding 2px.

Nahoru Odpovědět
31.1.2014 22:32
Chybami se člověk učí, běžte se učit jinam!
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 4 zpráv z 4.