Avatar

Člen
Avatar
:

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):

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

Nahoru Odpovědět  +1 31.1.2014 21:10
Nesnáším {}, proto se jim vyhýbám.
Avatar
Marek Z.
Redaktor
Avatar
Marek Z.:

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  +1 31.1.2014 22:29
Chybami se člověk učí, běžte se učit jinam!
Avatar
Marek Z.
Redaktor
Avatar
Odpovídá na Marek Z.
Marek Z.:

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.