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.
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
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.
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:
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.
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.
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?