Why do some browsers automaticall "resize" the text area on a page?

3450 views html
-2

Here is my website: sanyigarazs.atw.hu And at the "Kapcsolat" page, there is a text area. In google chrome it resizes to the right size, but in some browsers (edge, mozilla) the other elements of the page are wider than the text area and it is annoying. Here are my codes:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Kapcsolat</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Quicksand">
        <link rel="stylesheet" type="text/css" href="mainn.css">
    <body>
        <div class="container">
            <nav class="navbar navbar-inverse navbar-fixed-top">
                    <div class="container">
                        <div class="navbar-header">
                            <a href="index.html" class="navbar-brand">Sanyigarázs</a>
                        </div>
                        <div class="nav navbar-nav">
                            <li><a href="rolunk.html">Rólunk</a></li>
                            <li><a href="#">Kapcsolat</a></li>
                            <li><a href="weboldalrol.html">Weboldalról</a></li>
                        </div>
                        <!-- <form class="form-inline">
                            <input class="form-control mr-sm-2" type="search" placeholder="Ide írja keresését." aria-label="Keresés">
                            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Keresés</button>
                        </form> -->
                    </div>
            </nav>
            <div>
                <h3 align="center">Hívjanak telefonon: 06999999999</h3>
                <hr>
                <h5 align="center">Vagy üzenjenek e-mailen keresztül:</h5>
                <form id="uzenetes" action="emailtest.php" method="post">
                    <table border="0">
                        <tr>
                            <td align="center"><input type="text" placeholder="Az ön neve" name="username"
                            size="20" maxlength="150" width="150"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input placeholder="Az ön e-mail címe" type="text" name="address"
                            size="20" maxlength="150" width="150"/></td>
                        </tr>
                        <tr>
                            <td align="center"><input type="text" placeholder="Az üzenet tárgya" name="subject"
                        size="20" maxlength="150"/></td>
                        </tr>
                        <tr>
                            <td><textarea id="message" name="message" placeholder="Ide írja üzenetét..."  size="20" maxlength="150"></textarea></td>
                        </tr>
                            <td colspan="2" align="center"><input id="button" type="submit"
                            value="Elküldés"/></td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>

    </body>
    </html>

form { 
    margin: 0 auto; 
    width:240px;
    font-size: 150%;
    }
    td {
        display: block;
        padding: 5px;
    }



    textarea {
        width: 230px;
        margin-top: 0%;
        resize: vertical;
    }
    #mobile {
        padding: 30px;
    }
    body {
    font-family: 'Quicksand', sans-serif;
    }
    .thumbnail {
    transition: all 0.2s;
    }
    .thumbnail:hover {
    transform: scale(1.1);
    }
    p {
    text-align: center;
    }
    .jumbotron {
    border: 1px solid black;
    }
    .tested {
    font-size: 140%;
    }
    .bug {
    padding: 15px;
    border-top: 1px solid black;
    }
    .navbar-inverse {
    transition: all 0.2s;
    }
    .navbar-inverse:hover {
    transform: scale(1.03);
    } 
    .weboldalroltext {
    padding-bottom: 3px;
    }
    body { 
    padding-top: 70px; 
    }
    .mainHeader {
    padding-bottom: 50px;
    }
    .navbar {
    padding-top: 5px;
    font-size: 20px;
    }
    .navbar-brand {
    font-size: 20px;
    }
    a:after {
    display: block;
    content: '';
    border-bottom: solid 3px #fff;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    padding: 5px 0px 0px 0px;
    }
    a:hover:after {
    transform: scaleX(1);
    }
    .helloka {
    width: 300px;
    font-size: 25px;
    }
    hr {
    height: 10px;
    border: 0;
   

answered question

Note that <meta> and <input> tags do not use and do not need a closing slash in HTML.

1 Answer

2

Every browser have their own predefined css stylesheet. To standardize it use "reset css" snippet. You can find some code in google.

Put it in reset.css file and link it in head section before including mainn.css.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

posted this

Have an answer?

JD

Please login first before posting an answer.