Jump to content
ameliabob

Missing display

Recommended Posts

I am just getting restarted and am having problems finding syntax problems

<code>

<!DOCTYPE html >
<html >
<head>
 
<style>
body {margin:0;font-family:"Trebuchet MS", "Arial Black", "Verdana", "Helvetica", sans-serif;}
#seltype {font:36px}
#header {background:blue; color:white; position:absolute; top:0;left:0px;right:0;margin:0;text-align:center;font-family:"Trebuchet MS", "Arial Black", "Verdana", "Helvetica", sans-serif;font-weight:bold; white-space: nowrap;}
#header h1, #header p {padding:2px 20px 2px 100px;margin:0}
#hdgline {text-align:center; font-size:1.875em;}
button {font:24px "Trebuchet MS", "Verdana", sans-serif;background:#F9CC7D;border:outset #F9CC7D}
</style>
<title>Year to Date P/L</title>
</head>
<body>
 
<div id="header">
<p><br /></p>
<h1 id="hdgline" style="font-size:36px">Year to Date P/L</h1>
<p><br /></p>
 
<button onclick='AddTrade()' >Enter Trade</button>
<button onclick='ExitTrade()' >Exit Trade</button>
<button onclick='ShowPL()' >Show P/L</button>
 
</div>
 
<div id="cond">
<p>
<input type="text" name="first" value="me"></br>
</p>
</div>
</body>
 
</html>
 
</code>
 
The input line does not display. The buttons do. What am I missing??
Thanks

Share this post


Link to post
Share on other sites

Don't use position: absolute; unless you can't achieve same result using float, margins, padding, display instead.

header using position: absolute; occupies no space, so other elements move in to occupy that space instead, your input parent div has moved up behind the header content.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×