Table fields hiding behind each other

I’m using a table to create a form for gathering data to put into a database. I realize that’s “old school”, but for now, just go with it. :sunglasses:

There are 6 fields (2 radio buttons, 3 text fields, and 1 checkbox) and a button in the row. When the browser window is wide enough, all is fine. When the browser window is shrunk below 15", the third text field seems to slip “behind” the second text field. It’s still accessible, you just can’t see it. If you put your cursor in the second field, type something, then tab to the third field, you can see the cursor but it still appears to be in the second field. Type something (which you can not see, but you can see the cursor move) and hit the submit button and all the data (including what you couldn’t see) is added to the database.

What do I need to change to make all the fields always be visible? It’s OK if they change sizes as the browser is resized. Or, maybe, you have a better solution.

Thanks.

Hi rmossman. Welcome to the forums. :slight_smile:

It would be really helpful if you could post the HTML and CSS you have so far. Paste them both into a template like this:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
	
<style media="all">

[COLOR="#FF0000"][I]your CSS here
[/I][/COLOR]
</style>
	
</head>
<body>

[I][COLOR="#FF0000"]your HTML here
[/COLOR][/I]
</body>
</html>