HTML not linking to CSS file - html

TL;DR: My HTML isn't linking to a stylesheet.
Right off the bat, sorry for so much code.
I have checked other questions, but none had such a strange circumstance as I did.
I have a file, loggedIn.html:
<html>
<head>
<title>Logged in!</title>
<link rel="stylesheet" href="cgi-bin/style.css">
</head>
<body>
You are now logged in!
Logout
</body>
</html>
Which uses the stylesheet style.css:
body { font-family: Georgia, Goudy, Sabon, serif; }
Along with loggedIn.html, index.html uses style.css:
<html>
<head>
<title>Welcome!</title>
<link rel="stylesheet" href="cgi-bin/style.css">
</head>
<body>
<h2>Welcome to That Guy's Fileshare Server!</h2>
<hr/>
Please log in.
<br/>
<form action="cgi-bin/login.php" method="POST">
<p>
<table border="0">
<tr>
<td> <label for="username">Username: </label> </td>
<td> <input type="text" name="username"/> </td>
</tr>
<tr>
<td> <label for="password">Password: </label> </td>
<td> <input type="password" name="password"/> </td>
</tr>
<tr>
<td> <input type="submit" value="Submit"> </td>
</tr>
</table>
</p>
</form>
<br/>
Register
<br/>
Contact information
</body>
</html>
Since both loggedIn.html and index.html use the same stylesheet, shouldn't they both be rendered in Georgia, Goudy, Sabon, or a serif font? Apparently not. The file structure is:
┌ index.html
├ loggedIn.html
└ cgi-bin/
└─────────── style.css
The file structure shouldn't be a problem either, since both .html files are in the same directory and use href="cgi-bin/style.css". I've never had a problem like this before. Very strange!

forgot your type.
Also check the location of the css file.
I believe leaving out the type will cause problems.
<link rel='stylesheet' type='text/css' href='cgi-bin/style.css'/>

Or you can do
<style type="text/css"> #import "cgi-bin/style.css"; </style>

Related

HTML file change to REACT

I'm wondering if it's possible to change this HTML code to make it fit into React.For example is if I try to put this HTML code into the REACT app. I also included the code for Node.js and MongoDB. Does it require a lot of change for the HTML code to make it fit in React? Is it necessary to include script and import DOM in the method to include it in REACT App?
This is home.ejs code use for upload and download files.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic"><br>
<input type="submit" value="Upload">
</form><br><br><br><br>
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>
image
</td>
<td>
download
</td>
</tr>
</thead>
<tbody>
<% for(var i=0; i < data.length > 0; i++) {%>
<tr>
<td><img src="<%= data[i].picspath %>" style="width:100px; height:100px;"></td>
<td>
<form action="/download/<%= data[i]._id %>" method="GET">
<input type="submit" value="Download">
</form>
</td>
</tr>
<% } %>
</tbody>
</table>
</body>
</html>
sure just follow the following steps
Replace the opening and closing < html > tags with a < div > tag.
Replace the opening and closing < head > tags with a <React.Fragment>
tag.
Replace the opening and closing < body > tags with a < div > tag.
Replace the <% and %> tags with curly braces { and } to indicate
that the code between them is JavaScript.
Replace the <%= and %>tags with curly braces { and } to indicate that the code between them is an expression that should be rendered as a string.
<div>
<React.Fragment>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</React.Fragment>
<div>
<h2>Upload Files</h2>
<form action="/" method="POST" enctype="multipart/form-data">
<input type="file" name="pic" /><br />
<input type="submit" value="Upload" />
</form>
<br /><br /><br /><br />
<h2>Download Files</h2>
<table>
<thead>
<tr>
<td>image</td>
<td>download</td>
</tr>
</thead>
<tbody>
{data.map((item) => {
return (
<tr>
<td>
<img src={item.picspath} style={{ width: "100px", height: "100px" }} />
</td>
<td>
<form action={`/download/${item._id}`} method="GET">
<input type="submit" value="Download" />
</form>
</td>
</tr>)
})}
</tbody>
</table>
</div>
</div>

HTML width rendered ramdomly on IE

I have been debugging the following html code and it has a weird behavior.
Everytime, when I load the page in IE, the browser seems doesn't pickup the width attribute initially. However, it is working fine after a refresh. This page works on all browser but IE. Could you please give me some tips what's going on here?
Thank you very much
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<title>Money_market</title>
</head>
<body lang="3DEN-US" style="3D'tab-interval:.5in'">
<div id="IDMS_container">
<div style="text-align:right;" id="logout">User: <b></b> Logout</div>
<div class="tabs">
<ul>
<li>Cusip Entry Lookup</li>
<li>Corp/Gov.<br>Bond Lookup</li>
<li>Muni Bond<br>Lookup</li>
<li class="selected">Money Market<br>Lookup</li>
<li>Help</li>
<div class="clear"></div>
</ul>
</div>
<br>
<div id="symbol">
<h1>Money Market Lookup:</h1>
<table>
<tbody><tr>
<form method="GET"></form>
<td class="valign">Issuer:</td>
<td class="valign"><input type="text" value="" id="form" size="9" name="desc"></td>
<td class="valign">Coupon:</td>
<td style="width:100px;" class="valign"><input type="text" value="" id="form" size="4" name="coupon"></td>
<input type="hidden" value="money" name="s_pageid">
<td class="valign"><input type="submit" value="Lookup" id="button" name="button"></td>
</tr>
</tbody></table>
<!--span class="date_form">(Enter Date: MM/DD/YYYY)</span-->
</div>
<div id="quote">
<table>
<tbody><tr>
<th>Issue Name</th>
<th>Coupon</th>
<th>Maturity Date</th>
<th>Bid Evaluation</th>
<th>Bid Evaluation Date</th>
</tr>
</tbody></table>
</div>
<link type="text/css" rel="stylesheet" media="screen" href="http://www.federated.test.idmanagedsolutions.com/css/IDMS_styles.css"> </div>
</body></html>

Table disappears in Firefox and Chrome

I have a table and when I load the page in Firefox or chrome its shifted off the screen to the the right leading to most of the table disappearing, the table should be located in the middle of the screen and seems to be overlapping on the right outside of the page area.
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Small North Run</title>
<meta name="description" content=" ">
<meta name="keywords" content=" ">
<link rel="stylesheet" href="default.css" type="text/css">
<link rel="stylesheet" href="sponsor.css" type="text/css">
</head>
<body>
<div id="wrapper">
<header>
<h1>SMALL NORTH RUN</h1>
</header>
<nav>
<ul id="navlist">
<li>HOME</li>
<li>TRAINING REGIME</li>
<li>FORUM</li>
<li>SPONSOR</li>
<li>CONTACT</li>
</ul>
</nav>
<hr id="hrnav" />
<div id="content">
<p>This page allows you to sponsor a particular runner. Just simply select the name of the runner you wish to sponsor from the drop down list, then enter the amount you wish to donate followed by a brief message for the runner and then your name. Once making a donation the runner you have sponsored will be notified by email that you have made a donation.</p>
<br/>
<br/>
<br/>
<br/>
<form method="post" action="test.php">
<table>
<tr><td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr><td><label>Donation (£):</label></td><td><input type="text" maxlength="9" value="0.00" name="donation"/></td></tr>
<tr>
<td>
<label>Message:</label>
</td>
<td>
<textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea>
</td>
</tr>
</tr>
<tr><td><label>Your Name:</label></td><td><input type="text" maxlength="30" name="donator"/></td></tr>
<tr>
<td>
<tr><td><input id="submit" type="submit" value="Confirm Donation"/></td></tr>
</table>
</form>
</div>
</div> <!-- END WRAPPER -->
</body>
</html>
CSS
#content { text-align: left; margin: 2px; padding: 10px; }
#content p { font: font: 12px/1.5 Verdana, sans-serif; float: left; }
try to add a doctype :
for example, here is the HTML5 doctype
<!DOCTYPE html>
It seems to work fine for me.
Maybe you have a problem in your css?
EDIT:
The float style on your P tag is causing the trouble.
A simple solution could be to use a defloating-break-div (I'm not sure what the proper name is) underneath your P tag:
<div style="float:none;">
<br />
</div>
This causes the rest of your code to resume the normal layout
1) You have some errors in table structure
2) If you need to center table, you can setup it margin-left and margin-right auto.
There is possible table code with align:
<table style='margin: 0 auto;'>
<tr>
<td><label>Runner:</label></td>
<td>
<select name="fullname">
<?php do{?>
<option value="<?php echo $rsNames['user_ID']; ?>"> <?php echo $rsNames['first_Name'];?> <?php echo $rsNames['last_Name'];?></option>
<?php } while ( $rsNames= mysql_fetch_assoc($names_query))?>
</select>
</td>
</tr>
<tr>
<td><label>Donation (£):</label></td>
<td><input type="text" maxlength="9" value="0.00" name="donation"/></td>
</tr>
<tr>
<td><label>Message:</label></td>
<td><textarea name="donationmessage" maxlength="200" cols="25" rows="6"> </textarea></td>
</tr>
<tr>
<td><label>Your Name:</label></td>
<td><input type="text" maxlength="30" name="donator"/></td>
</tr>
<tr>
<td><input id="submit" type="submit" value="Confirm Donation"/></td>
<td> </td>
</tr></table>
If you still have troubles: post somewhere full HTML and CSS code for detailed analysis.

Aligning a Button with a Select Box (HTML Forms)

I am trying to create a Search panel on a page, consisting of three select boxes (dropdowns) and a button. however I am unable to get them to line-up. This must have been doen thousands of times before yet it is giving me so much grief.
In an effort to simplify it and understand what is going on, I created the following minimalist page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
<form action="<?php echo $_SERVER['PHP_SELF'] ?>" method="post" name="search1" id="search1">
<td bgcolor="#FF0000">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
</td>
<td bgcolor="#FF0000">
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" width="35px" height="30px" style="background-color:#00C">
</td>
</form>
</tr>
</table>
</body>
</html>
The result looks like this in Firefox,
this in Chrome,
this in IE9,
and this in IE9 Compatibiity View.
Sorry, I'm not allowed to post images as I'm a newbie, but take it from me, they're all different. I haven't even dared to look at it in older versions of IE!
How can I get the select box to vertically align centrally with the button in all browsers? I must be missing something obvious: it's not rocket surgery!
http://i.stack.imgur.com/LI9vf.gif
http://i.stack.imgur.com/HcCKN.gif
http://i.stack.imgur.com/bHAkP.gif
http://i.stack.imgur.com/PUXkl.gif
You need to play with line-height and vertical-align...
And theres no real need for a table there, well at least not in the simplified example you posted:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<form action="" method="post" name="search1" id="search1">
<div style="background-color:red;padding:0;height:30px;line-height:30px;">
<select class="searchbox" name="type" style="width:140px">
<option value="">choose a style.....</option>
<option value="beach">Beach</option>
<option value="city">City</option>
</select>
<input type="image" name="submit" id="submit" alt="submit" src="../images/transparent.png" style="background-color:#00C;margin:0;padding:0;width:35px;height:30px;vertical-align:bottom;">
</div>
</form>
</body>
</html>

html page with frameset tag not working

Can any one tell me whats wrong with the following code..
managerhomepage.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<frameset row="20%,80%">
<frame src="managerhomepage.jsp">
<frame src="signup.html">
</frameset>
</body>
</html>
managerhomepage.jsp
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ManagerHomePage</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<% String[] name={"Raviteja","Pramod","Aadinarayana","Anusha","Ramireddy","Surendhra","Rajesh","Aruna"};%>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<h1>MANAGER'S HOME PAGE</h1>
Select a SalesPerson from here <select name="salespersons">
<option></option>
<% for(int i=0;i<name.length;i++){
%><option><%=name[i]%></option><%
}%>
</select>
<input type="button" value="OK"/>
</center>
</body>
</html>
signup.html
<html>
<head>
<title>SIGNUP</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="ts_picker.js">
</script>
</head>
<body>
<center>
<div id="border"><div id="header">
<div id="logo-bg">
<div class="name">Ayansys</div>
<div class="tag">COMPANY SLOGAN</div>
</div>
</div>
<div>
<h1>SIGNUP FORM</h1>
<form action="managerhomepage.html">
<table>
<tr><td>FIRST NAME</td><td><input type="text" name="fname" size="50"/></td></tr>
<tr><td>LAST NAME</td><td><input type="text" name="sname" size="50"/></td></tr>
<tr><td>DESIRED LOGIN NAME</td><td><input type="text" name="login" size="50"/></td></tr>
<tr><td>PASSWORD</td><td><input type="password" name="pwd" size="50"/></td></tr>
<tr><td>RE-TYPE PASSWORD</td><td><input type="password" name="repwd" size="50"/></td></tr>
<tr><td>GENDER</td><td><input type="radio" name="gender" value="Male"/>Male<input type="radio" name="gender" value="FeMale"/>Female</td></tr>
<tr><td>DATE OF BIRTH</td><td><form name="tstest">
<input type="text" readonly size="47" name="timestamp" value="">
<img src="cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the timestamp">
</form></td></tr>
<tr><td>MAIL ID</td><td><input type="text" name="mail1" size="30">#<input type="text" name="mail2" size="11"></td></tr>
<tr><td>EMPLOYEE ID</td><td><input type="text" name="eid" size="50"></td></tr>
<tr><td>TYPE OF USER</td><td><input type="radio" name="manager"/>Manager<input type="radio" name="seniormanager"/>SeniorManager</td></td></tr>
<tr><td>ADDRESS</td><td><textarea rows="9" cols="40"></textarea></td></tr>
<tr><td>MOBILE NUMBER</td><td><input type="text" size="50" name="mobile"></td></tr>
<tr><td></td><td><input type="SUBMIT" name="submit" value="SUBMIT"> <input type="button" name="cancel" value="CANCEL"/></td></tr>
</table>
</div>
</form>
</br><div>Designed by:STUDY CENTER</div>
</div>
</center>
</body>
frameset is used instead of body, not inside it.
The attribute is rows, not row.
Validating would have told you this.
A frameset is used to establish a BODY, and should not be used inside of one.
Plus: You don't have a BASE target="" in your framed pages head(s).
And DIVS can be used to establish what you are trying to acheive, but referencing them can become complex quickly.
Also, naming your frames makes them much easier to deal with, and I see you've left their name references out of their declarations. There was alot of frameset debate when it was standardized, and if you are a professional author, I would suggest reading some of that information so you can see the advantages and disadvantages of framesets.
Now, with that being said, I would offer this suggestion:
IFRAME might work for you in this case, but because of the resourses and load times, esp. with building data tables, I would suggest another approach.