Page displays in odd way
Something is messed uo with my <div>...........</div> pairs, or something else. Here is the code:
This code produces the attached result.
Obviously, I don't want that, I want the text 4 US GPM to 12,750 US GPM to be in a div right after (on the same line) as the input test box. Then everything below is screwed up too. It's like HTML thinks I'm only using a narrow part of the middle of the page.
Can someone look at the HTML & tel me what's wrong? My guess is unmatched <div>'s, but I can't find them
flow_rate_page.JPG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<title>Lakos IND Configurator - Select Flow Rate</title>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.wrapper{
max-width:1100px;
min-width:900px;
margin:0 auto;
}
</style>
<script type="text/javascript">
ac = "";
function chk_vals() {
if (ac == "b") {
document.st.action = "applinfo.php";
document.st.submit();
}
if (! isnumeric(document.st.flow.value)) {
alert("Flow Rate must be numeric.");
return false;
}
if (document.st.flow.value < 4) {
alert("Flow rate too small. 4 GPM minimum.")
return false;
}
if (document.st.flow.value > 12750) {
alert("Flow rate too large. 12,750 GPM maximum.")
return false;
}
return true;
}
function isdigit(test) {
if (test == "0" || test == "1" || test == "2" ||
test == "3" || test == "4" || test == "5" ||
test == "6" || test == "7" || test == "8" ||
test == "9" || test == ",")
return true;
else {
return false;
}
}
// Function to determine if a field is numeric
function isnumeric(field) {
len = field.length;
for (i = 0; i < len; i++)
if (isdigit(field.charAt(i)) == false) {
return false;
}
return true;
}
function prof_window() {
window.open("profile.php", "profile", "width=1000, height=600, left=800, top=300, scrollbars=yes, menubar=yes, resizable=yes");
return false;
}
</script>
<!-- Global site tag (gtag.js) - Google
Analytics -->
<script async
src="https://www.googletagmanager.com
/gtag/js?id=UA-96994211-3"></script>
<script>
window.dataLayer = window.dataLayer
|| [];
function
gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-96994211-3');
</script>
</head>
<body>
<div class="wrapper">
<form method="post" name="st" action="microns_choice.php" onSubmit = "return chk_vals();">
<input type="hidden" name="hvtype">
<div class="container-fluid" >
<script>
page = location.pathname.substring(1);
pq = page.indexOf("?");
if (pq != -1) {
page = page.substr(0,pq);
}
if (page.substr(0,4) == "dev/") {
ln = page.length;
page = page.substr(4,ln-4);
}
function chk_link_msg() {
ok = false;
if (page == "projects.php" || page == "main.php" || page == "summary.php") {
ok = true;
}
if (! ok) {
jj = confirm("Going to My Projects will loose the current configuration. OK?");
if (!jj) {
return false;
}
}
return true;
}
</script>
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo.jpg" class="img-responsive"></a></div>
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="main.php"><h4>Home</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="projects.php" onClick="return chk_link_msg();"><h4>My Projects</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h4>Contact LAKOS</h4></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h4>Profile</h4></a></div>
<div class="col-sm-1 col-xs-1 text-center" style="color:#0C63A9;"><a href="logout.php"><h4>Logout</h4></a></div>
</div>
<div class="row visible-xs">
<div class="col-sm-4 col-xs-4"><a href = "http://www.lakos.com/hvac.htm" border="0" target="_blank"><img src="images/logo_sm.jpg" ></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="main.php"><h5>Home</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="http://www.lakos.com/About/contact-us" target="blank"><h5>Contact LAKOS</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="profile.php" onClick="return prof_window();"><h5>Profile</h5></a></div>
<div class="col-sm-2 col-xs-2 text-center" style="color:#0C63A9;"><a href="logout.php"><h5>Logout</h5></a></div>
</div><div class="row">
<div class="col-sm-12 col-xs-12" style="padding-top:3px;"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12 text-center" style="padding-top:2px; padding-bottom:2px; background-color:#0A2F98; color: white; font-size:20px"><b>IND Product Configurator</b></div>
</div>
<div class="row hidden-xs">
<div class="col-sm-1 col-xs-1 text-right"> </div>
<div class="col-sm-11 col-xs-11" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Select Flow Rate:</b></div>
</div>
<div class="row visible-xs">
<div class="col-sm-1 col-xs-1 text-right"> </div>
<div class="col-sm-10 col-xs-10" style="padding-top:10px; padding-bottom:20px; padding-left:50px; font-size:20px"><b>Select Flow Rate:</b></div>
</div>
<div class="row">
<div class="col-sm-1 col-xs-1"> </div>
<div class="col-sm-3 col-xs-3 text-right" style="font-size:20px;">Enter Flow Rate:</div>
<div class="col-sm-3 col-xs-3" style="font-size:20px;"><input type="text" name="flow" maxlength="6" style="width:80px;" value=""><div>
<div class="col-sm-5 col-xs-5" style="font-size:20px;">4 US GPM to 12,750 US GPM</div><br><br>
</div>
<div class="row">
<div class="col-sm-6 col-xs-6" style="padding-top:10px;"> </div>
</div>
<map name="nav">
<area shape="circle" coords="20,20,20" href="#">
</map>
<div class="row hidden-xs">
<div class="col-sm-12 col-xs-12 text-center nopadding"><span style="padding-right:30px;"><input type="image" src="images/back.jpg" style="vertical-align:bottom;" onMousedown="ac='b';"></span><img src="images/nav_left_7_onrrr.png"><img src="images/nav_right_7_rrr.png"><span style="padding-left:30px;"><input type="image" src="images/next.jpg" style="vertical-align:bottom;"></span></div>
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center"><span style="padding-right:200px;"><input type="image" src="images/back.jpg" onMousedown="ac='b';"></span><span style="padding-left:10px;"><input type="image" src="images/next.jpg"></span></div>
</div>
<div class="row hidden-xs">
<div class="col-sm-12 col-xs-12 text-center nowrap"><img src="images/nav_ind_left_cook.png"><img src="images/nav_ind_right.png"></div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-10" style="padding-top:4px;"> </div>
</div>
<div class="row">
<div class="col-sm-12 col-xs-12" style="font-size:15px;">Please email any questions, comments, or feedback to <a href="mailto:lit@lakos.com">lit@lakos.com</a></div>
</div>
<div class="row">
<div class="col-sm-10 col-xs-10" style="padding-top:4px;"> </div>
</div>
<br><br>
</div>
</form>
</div>
</body>
</html>This code produces the attached result.
Obviously, I don't want that, I want the text 4 US GPM to 12,750 US GPM to be in a div right after (on the same line) as the input test box. Then everything below is screwed up too. It's like HTML thinks I'm only using a narrow part of the middle of the page.
Can someone look at the HTML & tel me what's wrong? My guess is unmatched <div>'s, but I can't find them
flow_rate_page.JPG
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Sometimes even simple needs a second pair of eyes.
You are welcome, as always.
You are welcome, as always.
ASKER
Thanks.