CSS and DIV positioning of form elements 1

BDNFLNC · Nov 17, 2002

Hey all...
I have this form that someone asked me to help with. If you view the page at

http://www.badinfluence.com/test.htm

you will see my issue.

I want the form elements to show up in the same place each time. Currently they are showing up below each other. I am not skilled enough in CSS positioningto do this right.

Any help is appreciated.

<html>
<title></title>
<head>
<script>
ns4 = (document.layers) ? true:false
ie4 = (document.all) ? true:false
ng5 = (document.getElementById) ? true:false

function hideSec() {
if (ng5) document.getElementById('sec1').style.visibility = "hidden"
else if (ns4) document.sec1.visibility = "hide"
else if (ie4) sec1.style.visibility ="hidden"

if (ng5) document.getElementById('sec2').style.visibility = "hidden"
else if (ns4) document.sec2.visibility = "hide"
else if (ie4) sec2.style.visibility ="hidden"

if (ng5) document.getElementById('sec3').style.visibility = "hidden"
else if (ns4) document.sec3.visibility = "hide"
else if (ie4) sec3.style.visibility ="hidden"
}
function showSec

{
hideSec();
if (ng5) document.getElementById('sec' + n).style.visibility = "visible";
else if (ns4) document.layers["sec" + n].visibility = "show";
else if (ie4) document.all["sec" + n].style.visibility = "visible";
}
</script>
</head>
<body onload="hideSec()">
<a href="JavaScript:showSec(1)">Search by Lab</a>
<a href="JavaScript:showSec(2)">Search by Model</a>
<a href="JavaScript:showSec(3)">Search by Type</a>

<div ID="sec1" {position: absolute; top: 175px; left:235px;visibility:hidden; z-index: -1;}>
<form method="post" action="searchModels.asp">
Search by Lab<input type="text" name="Lab">
<input type="Submit" value="Submit">
</form>
</div>

<div ID="sec2" {position: absolute; top: 175px; left:235px;visibility:hidden; z-index: -2;}>
<form method="post" action="searchModels.asp">
Search by Model<input type="text" name="Name">
<input type="Submit" value="Submit">
</form>
</div>

<div ID="sec3" {position: absolute; top: 175px; left:235px;visibility:hidden; z-index: -3;}>
<form method="post" action="searchModels.asp">
Search by Type<input type="text" name="Type">
<input type="Submit" value="Submit">
</form>
</div>

</body>
</html>

gollyg · Nov 17, 2002

Try using more standard CSS syntax ie

Code:

<div ID=&quot;sec3&quot; style=&quot;position: absolute; top: 175px; left:235px;visibility:hidden; z-index: -3;&quot;>

rather than

Code:

<div ID=&quot;sec3&quot; {position: absolute; top: 175px; left:235px;visibility:hidden; z-index: -3;}>
<form method=&quot;post&quot; action=&quot;searchModels.asp&quot;>

This should fix things (you will prob have to tweak your positioning coords)

hope it helps

BDNFLNC · Nov 17, 2002

Perfect answer gollyg!

I should have seen that the style wasn't actually ON the DIV.

Now I know why everyone gives me these problems to solve. Tek-tips makes me look pretty good sometimes! Heck, I even tell them where I get teh answers!

Thanks a bunch.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS and DIV positioning of form elements 1

BDNFLNC

Technical User

gollyg

Technical User

BDNFLNC

Technical User

Similar threads

Part and Inventory Search

Sponsor