Why do my text boxes layer above my HTML elements?

  • 0
  • 1
  • Problem
  • Updated 5 years ago
  • In Progress
Archived and Closed

This conversation is no longer open for comments or replies and is no longer visible to community members. The community moderator provided the following reason for archiving: We have archived this topic as it has either reached a resolution or has become inactive.  If you believe this topic should not have been archived, please let us know, and we would be happy to review it.  You may continue to access this topic as needed fo

I have two pages on my site with registration forms that have text boxes in them. I have my navigation in an HTML box at the top of the page (custom dropdown menu). Even though I have set my text boxes to be sent to the back and my HTML to be brought to the front, my text boxes are in front of my HTML menu. How do I fix this?
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
  • frustrated!

Posted 5 years ago

  • 0
  • 1
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
I am looking in to this. I have requested a developer take a look.
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
Thank you!
Photo of Blue Moon Plays

Blue Moon Plays

  • 430 Points 250 badge 2x thumb
I have the same problem.  My html is in my Page Setting as an h1.  I want it to appear over a text box. 
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
Any news on this? It is making things difficult for my client.
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
Sorry, not yet. I have sent another inquiry
Photo of Drew N

Drew N, Alum

  • 262,816 Points 100k badge 2x thumb
Now I have an update.

The developers added some code that should fix this, at least temporarily. The problem is in the way elements and layering works. HTML boxes are not subjected to the same rules as we would have to make assumptions about your code that may cause other problems. We can't promise this code will work forever, and may need to be changed in the future, so take a look and let us know if this works for you for now.
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
OK. I now have one page that works, but I have two other pages that do not work. I deleted my HTML, inserted it again, sent everything else to the back, brought my HTML to the front, and checked the "Lock size and position" for my HTML. What do I do now? Actually, on the one page, I keep trying to move the text box to the back, but it won't move. 

http://www.americanwayuniversity.com

The pages "Registration" and "Blog" are the ones that are not working. "Assessment" DOES work.

Kate
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
Anything new on this?
Photo of William S

William S

  • 18,878 Points 10k badge 2x thumb
Hello Karrie,

Unfortunately there is not a long term fix for this at the time. I have fixed the two pages you mentioned, but this is only for those pages and if you change any of the elements on the page it could undo the fix. If you know about HTML or comfortable with it, I can make a write up on how I fixed it. It is advanced steps to fix it, but if you are comfortable you should be able to follow. 

I added this to your head tag section and it fixed it. This only works on those two pages however, and probably will not work for others.
#element51, #element50 {
z-index: 0 !important;
}
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
I am very comfortable with HTML and CSS. In fact, this site is the only one that I use a template for. All the others I code myself. If you could tell me how you fixed it, I would greatly appreciate it.

Thanks!

Kate
Photo of William S

William S

  • 18,878 Points 10k badge 2x thumb
Sure. So first, using Google Chrome, I went to your website and right clicked the registration form text boxes. Then I clicked inspect element. This pulls up the bottom bar(can be on the side) that will display the HTML of the page. If you notice, every element on your page is created as [<div id="elementXX ...."]. The text boxes that were on top of the navigation menu is element50 and element51.



 
Once you identify the elementXX of the object that is on top of the menu, we just have to update the z-index of that element. The z-index specifies the stack order of an element(more info on z-index http://www.w3schools.com/cssref/pr_pos_z-index.asp). 

Adding the code I gave above 

#element51, #element50 {
z-index: 0 !important;
}

Making the item with a z-index of 0 will make it on the bottom of every element. Be careful if you have an object behind it as it will be in front. I added this code in your HTML <head> section under the already there <styles> tag and above the rest of the code you already had in there. You can use this to manually change the z-index of any element outside using Sitebuilder's 'bring forward' and 'send backwards'
Photo of Karrie4690

Karrie4690

  • 176 Points 100 badge 2x thumb
OK. Thanks! Because I am so used to NOT using HTML for this site, I never even thought of the z-index. Thanks for the help!

Kate
Photo of William S

William S

  • 18,878 Points 10k badge 2x thumb
No problem! Let me know if you have any other issues.

This conversation is no longer open for comments or replies.