Different behaviour between Firefox and Chrome using relative position CSS

Please provide a link.

hi,

1) i think min-height: 20px; is creating a problem  just put height:100%; and try
2) if possible put this div on the new row
3) use clear:both at the end of the  previous row

Welcome to the club!  This is always, always, always something we must work through...bugs between IE, FF, Safari, Chrome, etc...

Please post a link so we can help you with your troubleshooting, also...if you check out FF's firebug, that will help a lot.

Thanks for the comments everyone.  Here are the steps to reproduce my problem:

USING CHROME

1.  Visit attardpropertytax.ca and click "Login" in upper-right corner.

2.  Enter any character in the "Email" field.  As you enter the first character, you should see a black band appear at the top of the page as shown in this screenshot:

3.  This black band is part of the #pageoptions div and for some reason it's positioning changes at the moment you enter a character.  If you inspect this element, you will see the following CSS rules:

#pageoptions {
position: relative;
overflow: hidden;
width: auto;
padding: 0;
min-height: 20px;
}

Select allOpen in new window

4.  I have figured out that if you unselect "position: relative" and then select it again, this has the effect of moving the #pageoptions div back into place so that it is not visible again.  Problem is, I don't know why it becomes visible at all.  The only time the #pageoptions div is supposed to become visibile is in response to a javascript effect that is not supposed to be available until after the user has logged in.  

USING FIREFOX

1.  Visit attardpropertytax.ca and click "Login" in upper-right corner.

2.  Enter any character in the "Email" field.  As you enter the first character, you will not see any black band appear at the top of the page.  Instead, the page will remain normal as shown in this screenshot:

3.  In Firefox the page displays correctly and the "position: relative" does not seem to get messed up as it does in Chrome/Safari.

I don't know my way around the developer tools in Chrome that well, so if anyone has any ideas why this might be happening, I would appreciate the help.

I think your login form is somehow pushing the content off the page
Remove the Welcome to and IP stuff and surrounding you have their (but isn't  showing)
Try the login again and you will see the first character you type pushes the support/login up but then thats it - it stays there and stays visible.
You could try moving the whole login section somewhere else - i.e. bottom of the page since it doesnt matter where it is in the code

Thanks for the comment GaryC123.  You said:

You could try moving the whole login section somewhere else - i.e. bottom of the page since it doesnt matter where it is in the code

Would you mind explaining how I could do that?

I tried your suggestion of removing the superfluous text from the #pageoptions div, however, I still get the same result.

Take the whole login div (client-login) and place it after the final div in the page, this way it shouldn't affect the top bar on the page.
Only thing I'm not sure about is your js, don't have to time look now, but should work as is.

When you are trying to load the page the "supportoptions" div is coming as "display:none", but when you are writing anything in the text box the "supportoptions" div is becoming "display:block". This is what causing the problem.

Thanks for the comment yats.  I think you have identified the problem, but do you have a suggestion for me as to how I should solve it?  What would you recommend?

Thanks Yats.  Your suggestion got me pointed in the right direction.  Problem solved.