Avatar of DanielAttard
DanielAttard
Flag for Canada asked on

Different behaviour between Firefox and Chrome using relative position CSS

I need some help to try and develop a workaround for a CSS problem I am having.  My problem is that I have some code that works perfectly in Firefox, but the page renders slightly differently in Chrome and Safari and causes a problem.

Difficult to explain my problem, but I will try.  I have a div called #pageoptions and it displays perfectly fine in Firefox.

Here is the CSS:

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

Open in new window


For some reason, when I begin typing in a certain input box in Chrome, it causes this div move and become partly visible.  When I do the same thing in Firefox, the div does not move at all and remains put as it should.

I know this is not a very good description, but hopefully it is enough to give you an idea of where I am stuck.  Any ideas would be appreciated.
CSSWeb DevelopmentHTML

Avatar of undefined
Last Comment
DanielAttard

8/22/2022 - Mon
Hagay Mandel

Please provide a link.
shivakanthbexpert

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
Carlos Llanos

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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
DanielAttard

ASKER
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:
Incorrect display of upper-right corner of page
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;
}

Open 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:
Correct display of upper-right corner of page
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.
Gary

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
DanielAttard

ASKER
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.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Gary

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.
yats

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.
DanielAttard

ASKER
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?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER CERTIFIED SOLUTION
yats

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
DanielAttard

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