CSS issue, when filling in a form the header goes up

Question

I have a strange CSS issue, I'm not quite sure how to fix this.

When I press the "Sign In" button on my website and I start to type in the Username, the header goes up. I really don't know what is causing this.

Any ideas?

Thanks!

Here is some code:

The form:

.tooltip-wrap {
  position: fixed;
  display:none;
}

.tooltip-wrap .corner {
    position:relative;
    z-index:100;
    margin-left:-5px;
    width:0;
    height:0;
    border:5px solid transparent;
    border-bottom-color:#fff;
}

.tooltip-text { 
    float:left;
    margin-left:-50%;
    padding:1em 15px;
    background:#fff;
    color:#333;
}

This is the part that goes up:

.header-navigation.back {
    z-index:-1;
    position:absolute;
    margin-left:0;
    margin-top:-6px;
    border:none;
display:block; height:137px; width:1171px; padding:0px; outline:none; text-indent:-9999px;
background-image:url('xhttp://frenchegg.com/images/backmenu.png');
}

You need to click on Username and start typing something.

Answer 1

I think the solution is along these lines:

Set .header-wrap to have overflow:visible (well, remove overflow hidden!) - this will mean you have to slice those character graphics to have flat bottoms.

Then, change .tooltip-wrap to be position:absolute;z-index:2; (not fixed).

I also noticed that you have the placeholder polyfill in your head. This means you could use that attribute on the input rather than value; like so:

<input type="text" name="user_login" placeholder="Username">

Very cute site!

Answer 2

Very strange bug, and I can't explain what's going on. But it is related to your div.header-navigation.back. If you remove that, the behaviour disappears.

As far as I can tell, you are only using that element for your background image, so it's not a good idea to include it in the markup anyway. If you amend your .site-header you can achieve the same effect without the extra div:

.site-header {
   background: #0894ff url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat;
   background: url('http://frenchegg.com/images/backmenu.png') 50% 20px no-repeat,
               linear-gradient(to bottom, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0) 100%);
}

I couldn't quite work out what you're trying to achieve with your gradient, but the idea would be to provide multiple backgrounds for those browsers that support them, with a fallback to a solid colour.

Answer 3

Change the line-height of the input box - fixes the issue.

HTML to change:

<input type="text" id="text-user" name="user_login" value="Username" style="
    line-height: 15px;
">

CSS:

#text-user{
    line-height: 15px;
}

The reason is because the line-height of the input was much smaller without text, than it was with text. So when you typed something into the box, the line-height expanded which is what caused the header to be pushed up.

Edit

I see you're having no luck with the code, so do these two more things and you're sure to be up and running - it's working here for me.

Remove the following from .site-header:

padding: 2em 0;

Next, change the row style to look like this:

.row{ 
margin: 0 auto; 
padding: 0 30px; 
width: 1171px; 
height: 137px; 
}

Answer 4

You could give it a z-index instead of a fixed position, and give it an absolute position.