CODEWITHSUNDEEP
htmlcssinternet-explorer
Martin Johansson
Martin Johansson

Reputation: 798

IE centers screen on textbox when starting to type in it

I'm designing a part of a website that is supposed to have no scrolls on it. Very simple design and it works very well in Chrome and FF. But when I test it in IE and start to write in a textbox, the content jumps up and seems to center the screen on that input and I have no idea why.

See this JSFIDDLE

This is my HTML:

<div class="container">
        <div>
            <h1>
                Enter your name
            </h1>
        </div>
        <div>
            <p>
                Enter your name here!
            </p>
        </div>
        <div class="input-container">
            <input type="text" id="msisdn" />
        </div>
        
        <div class="button-container">
            <a href="#" class="button inactive" id="send-button">SUBMIT NAME</a>
        </div>
  </div>

And this is my CSS:

html, body {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

.container {
    width: 40%;
    display: block;
    text-align: center;
    margin: 0 auto;
}

body {
    background: #0f5082;
    color: #FFF;
}

h1 {
    margin-top: 20%;
    font-size: 56px;
    font-weight: bold;
    color: #FFF;
}

p {
    margin-top: 20px;
    padding-left: 15%;
    padding-right: 15%;
    font-size: 26px;
    word-spacing: 0.1em;
    font-weight: 300;
    color: #FFF;

}

.caps {
    text-transform: uppercase;
}

.input-container > input {
    background: transparent;
    margin-top: 40px;
    padding-top: 5px;
    padding-bottom: 6px;
    border: 1px solid #FFF;
    -ms-border-radius: 5px;
    border-radius: 5px;
    font-size: 24px;
    color: #FFF;
    text-align: center;
}

.button-container {
    margin-top: 40px;
    text-align: center;
}

.button {
    padding: 15px 20px;
    text-decoration: none;
    color: #FFF;
    font-size: 20px;
    background-color: #FA8845;
    -ms-border-radius: 5px;
    border-radius: 5px;
    letter-spacing: 0.03em;
}

.button:hover {
    color: #0f5082;
    -webkit-transition: all ease 0.2s;
    -moz-transition: all ease 0.2s;
    -ms-transition: all ease 0.2s;
    -o-transition: all ease 0.2s;
    transition: all ease 0.2s;
}

What I want is simple, have the screen stay just as it was before I typed in the textbox. Does anyone know, first off, why it does this, and secondly how I can avoid it?

Thanks in advance! Martin Johansson

Upvotes: 1

Views: 36

Answers (1)

Kunal Kakkad
Kunal Kakkad

Reputation: 653

Issue is due to 

h1
{
   margin-top: 20%;
}

Replace this as below

h1
{
   margin-top: 90px;
}

I hope it will resolve it.!

Upvotes: 1

Related Questions