.NET/CSS Background Image wont go past bottom of browser window - html

I'm fairly experienced with .NET programming, usually with C#, though the controls I'm using for this project are VB. Usually I work with programming backend robust applications, but of course when I do a simple website for a friend is when I cant figure out the problem.
I'm using a VB master page for the site. The "wood" div is supposed to be a background image that repeats dynamically as far down as the page goes, but for some reason it only goes as far as the browser window height. The background-repeat:repeat-y doesnt seem to do anything, so I feel like the problem has to do with the CSS. Here's the master page:
<%# Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D&M Official Site</title>
<link runat="server" rel="stylesheet" type="text/css" href="Styles/Main.css" />
</head>
<body onload="MM_preloadImages('images/swaps/swap1.jpg','images/swaps/swap2.jpg','images/swaps/swap3.jpg')">
<div id="wood" >
<div id="mediaButtons">
</div>
<div id="wrapper">
<div id="logo"><asp:Image Height="200" runat="server" ImageUrl="~/images/logo.png" /></div>
<div id="menu"><img src="images/menu.jpg" width="560" height="373" border="0" usemap="#Map" id="Image1" />
<map name="Map" id="Map">
<area shape="poly" coords="43,266,49,296,59,279,68,290,83,294,87,295,95,297,97,298,95,299,99,298,103,299,105,297,114,320,131,343,143,358,141,368,152,369,152,356,157,360,156,355,158,354,159,354,160,354,163,351,167,350,189,365,195,353,173,333,168,315,161,290,157,271,152,247,147,240,159,206,162,193,161,157,161,139,150,110,130,100,117,91,118,84,126,75,129,52,122,39,108,37,92,49,91,61,94,71,94,93,76,103,62,116,53,134,42,188,48,255" href="Default.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap1.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="223,24,244,37,252,48,245,62,239,72,247,83,261,100,270,108,273,158,273,203,271,232,259,241,254,278,252,308,259,330,268,344,255,351,241,360,229,367,217,366,207,349,198,310,197,249,181,243,172,210,169,179,170,158,171,141,182,112,190,96,201,94,211,83,205,59,208,36" href="tourdates.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap2.jpg',1)" onmouseout="MM_swapImgRestore()" />
<area shape="poly" coords="309,35,328,38,338,51,335,66,329,77,329,90,355,100,364,133,368,154,357,207,353,223,349,255,341,295,338,332,335,343,340,360,334,369,324,352,317,337,301,333,286,343,273,351,272,341,284,330,283,311,285,289,285,241,281,209,277,179,275,143,275,112,296,103,303,91,303,75,297,65,299,46" href="media.aspx" onmouseover="MM_swapImage('Image1','','images/swaps/swap3.jpg',1)" onmouseout="MM_swapImgRestore()" />
</map>
</div>
</div>
<div id="Main">
<div style=" left:10px; position:relative; top:10px;">
<form id="MainForm" style="position:relative" runat="server">
<asp:contentplaceholder id="ContentPlaceHolder" runat="server"></asp:contentplaceholder>
</form>
</div>
</div>
</div>
</body>
</html>
Here's the CSS:
html
{
height: 100%;
}
body
{
margin: 0;
padding: 0;
height: 100%;
background-image: url(../Images/wallpaper.jpg);
}
#mediaButtons
{
position:relative;
text-align:center;
z-index:101;
padding-bottom:0;
margin-bottom:0;
}
#Main
{
position:relative;
background-color:#ffe4b5;
top:430px;
left:20px;
width:640px;
height:100%;
}
#wood
{
margin: 0;
padding: 0;
height:100%;
background-repeat:repeat-y;
background-image:url(../Images/wood.jpg);
z-index:1;
text-align: left;
width:695px;
margin-right:auto;
margin-left:auto;
background-position:center;
}
#wrapper
{
margin-top:0;
top:-20px;
text-align: left;
width: 695px;
margin-right: auto;
margin-left: auto;
position: relative;
}
#logo
{
position:absolute;
left:-69px;
top:-27px;
width:200px;
height:200px;
z-index:100;
}
#menu
{
position:absolute;
left:62px;
top:35px;
width:560px;
height:373px;
z-index:2;
}
My CSS skills are pretty lacking, so sorry if this is a dumb problem :(


Probally due to the fact that you have
<%# Master Language="VB" CodeFile="Normal.master.vb" Inherits="Normal" %>
Before your DOCTYPE which cause the browser to display the page in quirks mode.

Related

Scroll bar not displaying all content

I’m somewhat of a newbie with HTML and CSS, trying to replicate a more 90s CSS style by using iframes for a simple test site I’ve been working on recently. However, the text that I’m attempting to display within the iframe is always cut off, despite a scroll bar being coded in and visible. The scroll only adjusts a short way and doesn’t allow you to see the full contents of the text. Please advise. I’m sure I’ve made a simple error that you’ll notice in a few seconds, thanks in advance!
My html for the index (iframe and base)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pen and Parchment</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="mapp">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://img.nickpic.host/5woiL6.png" usemap="#image-map">
<map name="image-map">
<area target="_pnp" alt="my homepage" title="my homepage" href="/home.html" coords="616,500,655,507,683,513,688,494,639,481,610,476" shape="poly">
<area target="_pnp" alt="about me" title="about me" href="/about.html" coords="600,535,648,535,683,545,695,526,637,515,611,511" shape="poly">
<area target="_pnp" alt="who i'm showing off right now" title="who i'm showing off right now" href="/showing.html" coords="613,559,685,571,691,555,613,543" shape="poly">
<area target="_pnp" alt="my whole crew" title="my whole crew" href="/crew.html" coords="608,588,680,597,677,581,607,567" shape="poly">
<area target="_pnp" alt="what's coming next" title="what's coming next" href="/plans.html" coords="600,618,671,626,667,607,602,599" shape="poly">
<area target="_pnp" alt="your way outta here" title="your way outta here" href="/links.html" coords="595,653,664,656,664,636,600,631" shape="poly">
</map>
<div id="cont"><iframe width="500px" height="260px" name="_pnp" frameborder="0" scrolling="auto" src="/home.html"></iframe></div>
<div id="bernard"><img src="https://img.nickpic.host/5wv65b.png"></div>
</div>
</div>
</body>
</html>
CSS
body {
position:fixed;
}
#mapp {
width: 450px;
height: 400px;
position: relative;
margin: auto;
left: 0;
right: 300px;
top: 0;
bottom: 0;
z-index: 1;
}
#cont {
height: 250px;
width: 500px;
position: relative;
margin: 10px;
top: -630px;
left: 150px;
z-index: 2;
overflow-y: scroll;
overflow-x: clip;
}
#bernard {
height: 245px;
width: 196px;
position: relative;
margin: auto;
top: -830px;
left: 472px;
z-index: 3;
}
#text {font-size:12pt; color:#000; font-family: courier, serif; z-index: 10; padding-bottom: 10px; min-height:250px; height:100%}
#text img {max-width:500px;}
#text h1 {text-align:center;font-size:25pt;border-bottom:1px solid #819176;color:#a7b487;text-shadow:1px 1px 0px #819176;margin-top:-15px; letter-spacing:3px;}
#text h2 {font-weight:normal;text-align:center;font-size:20pt;letter-spacing:-1.5px;color:#8A906E;text-decoration:underline;}
#text a {text-decoration:none;color:#a7b487;}
#text a:hover {font-style:italic;}
#text b {font-size:10pt;letter-spacing:0.5px;}
#text i {font-size:12pt;}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #EFEFEC;
}
::-webkit-scrollbar-thumb {
background: #000;
}
And then then HTML that I’m trying to get to show on the main page (within the iframe)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pen and Parchment</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
</head>
<div id="text">
<h1>W E L C O M E </h1>
<p> to <b>Pen and Parchment</b> a site catalogging the various pets and goings-on of various catz, dogz, horzes, and hexiez projects. I'm Ink - the proprietor and owner of PnP, and we're happy to have you here. As always, please excuse any construction mess. </p>
<center><p> Don't know what Petz is? <br>
check out these resources and forums for more information! Welcome to the Petz Community<br>
<img src="https://i.ibb.co/BGMtdL9/petzforum-banner-tiny.gif"> <img src="https://i.ibb.co/F3WSBCJ/wwbeach.gif"> <img src="https://i.ibb.co/kSZK6YJ/pugzlink.png"> <img src="https://i.ibb.co/b7YJbyz/sy-Sikuum-o.png"> <img src="https://i.ibb.co/JqMV9dr/23-PJyih-I-o.png"> <img src="https://i.ibb.co/t8KHSWr/3-Ivdp-Oj-G-o.png"> <img src="https://i.ibb.co/q9mQ0YL/Petzcord.png">
I don't play babyz myself, but if you think that might be your cup of tea, feel free to also check out:<br>
<img src="https://i.ibb.co/jzPHv27/1-UFYIsl0-o.png"><br>
for more information!</p></center>
<p>
<h2> recent updates:</h2>
<p><b>06.20.21</b> PnP is officially back up and running! While the dust settles, please excuse the site changing a fair bit. </p>
</div></div>
</html>
Edit: thanks for editing my grammar, and not helping with the question, I guess...

Scalable side scroll trouble

I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}
What is the most efficient way to do this?
Many thanks in adavnce
EDIT
On page load
On scroll
On 75% decrease window

How about something like these changes to your CSS for the "#images" and "img" sections...
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
border: 2px ridge gray;
width: 90%;
display: inline-block;
overflow: scroll;
white-space: nowrap;
}
img {
padding:10px;
width:50%;
height:95%;
}
You can play around with those values but you should get a horizontally scrolling image section that changes on resizing the window...
You can take the gray border off if you'd like - I was just using it for testing...
EDIT
Uploaded a code sample with absolute positioning instead of relative as that keeps the image section 30px off the bottom...

I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}
edit
Using part of Zack's answer, I would change your css img rule to:
img {
padding:10px;
width:3.799;
height:100%;
}
That will give you an image that adjusts with the browser window size.
However you will need to use percents (%) to adjust your positioning rules (i.e. left, top, padding, margin, etc.) to keep all proportions the same.
Note
At this point I am only adjusting the example, so for the record Zack's design is more efficient, and would be better if the look satisfies you.

Horizontal image scrolling with scalability

I want to create a horizontal scrolling image panel that consists of large images with a max height of 800px. When the browser is resized I want the entire selection of images to get smaller/bigger according to the size of the browser window. I want the top of the images to hang 200px at the top with a 30px margin at the left (when page is loaded) and 30px at the bottom.
I am really new to this so any help whatsoever would be greatly appreciated
What is the most efficient way to do this?
Many thanks in adavnce
The HTML looks like this so far:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dean Pauley — Recent work</title>
<link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="infoleft">
<ul>
<li>Dean Pauley</li>
<li>Graphic Design</li>
</ul>
</div>
<div id="inforight">
<ul>
<li>Information</li>
</ul>
</div>
<div id="images">
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
<img src="images/NFN800.jpg" width="948" height="800" id="fullsize" />
</div>
</body>
</html>
The css:
#charset "UTF-8";
/* CSS Document */
body {
font-family: 'Questrial', sans-serif;
}
#infoleft {
position:fixed;
top:20px;
left:0px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#infoleft ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#infoleft ul li {
display: inline;
padding: 30px;
}
#inforight {
position:fixed;
top:20px;
right:30px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
}
#inforight ul {
height:20px;
font-weight:normal;
font-size: 15px;
letter-spacing: 0.13em;
text-decoration:none;
margin: 0;
padding: 0;
list-style-type: none;
}
#images {
position:absolute;
left:20px;
bottom:30px;
top:200px;
width:25000px;
height:800px;
padding-top:100px;
padding-bottom:30px;
}
img {
padding:10px;
}
a {
text-decoration:none; color:#000;
}
a:hover {
color:#0080ff;
}

I would change the image-related size measurements to % rather than px. That way the size of your images, paddings, margins, etc. will change with the size of the browser window although the proportions will stay the same.
example: img {width:80%; height:60%; etc.}

How do I line up CSS elements? Is there a tool I can use?

In light of the answers to the original question I had, I have amended my code. I was hoping if someone could tell me if this is a better approach in comparison. My original post and code is below.
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
float: right;
margin-top: 50px;
margin-right: 1250px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
ORIGINAL POST
I am new to the world of coding as well as CSS. I am attempting to line up CSS elements however unaware how I can place some sort of lines to get the exact line-height, position, etc. I attempted to use FireBug however to no avail. Is there some of tool I can use that possible places a grid over the canvas?
EDIT
Here is a sample of the code I am working with.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content= "" />
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#wrapper {
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
position: relative;
top: 50px;
left: 100px;
}
#topnav {
width: 500px;
position: relative;
top: 14px;
left: 150px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>

It is generally inadvisable to do pixel-by-pixel layout in webpages. You can never tell with which browser, which resolution on which platform and with which fonts installed your future customer will view the page.
Use HTML and CSS to specify a logical layout of the document. Tell the rendering machine, which parts have enphasis, which are less important and so on and let the renderer decide how to represent it the best way on the target display and UI-theme.
If you start worrying about pixel-exact line heights, your page most probebly will look swell on one browser, in one resolution on one platform and in the rest of the world like turd.
Move from physical mark-up to logical mark-up.

The Web Developer Extension for firefox ( http://chrispederick.com/work/web-developer/ ) has a grid function.
Alternatively, in html/css, you can create an overlaying, full-screen div with a grid background to give you the visual, but its not the best solution since you'd also have to make it the highest z-index element, or make all other elements have a background of transparent, which could screw with your design.
Highly suggest just using the plug in, you don't want to mix in html/css just as a developer tool too much.
<subjective>Whilst I agree with the sentiment of "don't do pixel-level design", sometime the requirements of the project demand it. Using a reset css like YUI-reset is one of the better ways to have most browser renderings consistent, but also requires you have stye declarations for all the elements from the ground up. </subjective>

I agree with Hyperboreus above, trying to make the site exactly the same in all browsers is a recipe for a headache.
But, I've often used xscope (http://iconfactory.com/software/xscope) to overlay guidelines and grids on my mac to line things up. It's not free, but it's well worth the $25.
Edit: Just saw your code. If you're just trying to get the logo and nav on the same line, try something like this:
<title>Example</title>
<base href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css">
body {
margin: 0;
padding: 0;
}
#header {
background-image: url('images/bg-inner-page.gif');
height: 200px;
}
#logo {
width: 20px;
float: left;
margin-top: 50px;
margin-left: 100px;
}
#topnav {
width: 500px;
margin-left: 150px;
margin-top: 14px;
}
#topnav ul {
word-spacing: 10px;
}
#topnav ul li {
list-style-type: none;
display: inline;
word-spacing: 10px;
}
#content {
background-color: orange;
}
#footer {
background-color: blue;
}
</style>
<div id="wrapper">
<div id="header">
<div id="logo">
logo
</div>
<div id="topnav">
<ul>
<li>home</li>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
You can see it here: http://jsfiddle.net/BRKrx/

How come my form input sometimes moves when I refresh the page?

On a page that I'm designing I have a form with one input of type text. Normally, this form and input render properly in my browser, Chrome, but occasionally, it renders about 20 pixels to the left of where it is supposed to be. When I refresh the page, it goes back to the original, correct place.
I have only tested in Chrome so far, so this isn't a cross-browser issue (it happens in the same browser). Is there anything wrong with my code below?
Here's my HTML code:
<!DOCTYPE htmls>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Test Site</title>
</head>
<body >
<div id="supercontainer" class="style1">
<img class="floater" src="top.jpg" alt="Top" />
<img class="floater" src="left.jpg" alt="Left" />
<div id="content">
<p id="theText">
Welcome. Please type a username.
</p>
<form id="prompt">
<div><input type="text" name="promptLine" autocomplete="off" id="promptLine" onkeypress="return submitenter(event);" value="% " /></div>
</form>
</div>
<img class="floater" src="right.jpg" alt="Right" />
<img class="floater" src="bottom.jpg" alt="Bottom" />
</div>
Here's my CSS code:
#supercontainer {
margin: 0 auto;
width: 900px;
display: block;
}
img.floater {
display: inline;
float: left;
}
#content {
background-color:black;
display: inline;
float: left;
padding-left:5px;
padding-right:5px;
min-height:458px;
max-height:458px;
min-width: 803px;
max-width: 803px;
color: lime;
}
#theText {
text-align:left;
margin-bottom:0;
margin-top:0;
line-height: 0.3;
font-family:"Courier New", Courier, monospace;
}
#prompt {
position: fixed;
top: 470px;
}
#promptLine {
width: 100%;
background-color: black;
color: lime;
border: none;
outline:none;
}

Try closing your BODY and HTML tags? Also, doctype "htmls"?