100% width table cell - html

I have this table layout. I want to align the whole content to the right. So i'm using one cell with width: 100%;. Usually everything looks good and nice.
But there is something, which i don't understand. If the content in cell, which has colspan, becomes bigger than normal cell in this column (you can test this by clicking Click to test button), it brakes whole layout.
This happens on Chrome, Safari 4 and 5, IE8, but on Opera, FF and IE7 is OK.
Any ideas?
<!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>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td><input type="text" value="Field 1" id="field1" size="25"></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;"></td>
<td class="delimiter"> </td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td colspan="3"><input type="text" id="field2" value="Field 2" size="25"></td>
</tr>
</table>
</body>
</html>

I was not surprised when you said it worked in some browsers and not others. Welcome to the real world of developing a web app. I haven't gone down into the nitty gritty of checking why browsers are refreshing their layouts differently, as i've learned that it can be a black hole of time. Instead i put forth the following solution:
<!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>TEST</title>
<style type="text/css">
table { width: 100%; }
table td { border: 1px solid black; white-space: nowrap; }
.delimiter { width: 100%; }
</style>
</head>
<body>
<table>
<tr>
<td><label>Row 1</label></td>
<td> </td>
<td class="delimiter">
<table><tr>
<td><input type="text" value="Field 1" id="field1" size="25" /></td>
<td><input type="button" value="Click to test" onclick="var o = document.getElementById('field2'); o.size = o.size == 25 ? 50 : 25;" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
<tr>
<td><label>Row 2</label></td>
<td> </td>
<td>
<table><tr>
<td><input type="text" id="field2" value="Field 2" size="25" /></td>
<td class="delimiter"> </td>
</tr></table>
</td>
</tr>
</table>
</body>
</html>
I know it's not the prettiest solution, but as raw html it does work. Tested in Chrome and IE10.

Use W3C standards to be more save with crossbrowser coding. Beste solution for javascript code crossbrowser safty is to user jQuery. It's even more handy for this kind of tools/functionalities.

Related

draw a bar in a td cell

I have the following simple code
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
</tr>
which produces
this table.
I want to add a third
<td> ... here draw a bar ... </td>
cell which draws a bar that corresponds to the values of rainfall and which updates automatically when the values in the input change. What would be the easiest way to do this? Code snippets are highly appreciated. The input elements are part of a bigger form.
you can use jqueryUI for this matter. try to download these required jqueryUI files and follow the code below:
<!doctype html>
<html lang="us">
<head>
<meta charset="utf-8">
<title>progress bar in table example</title>
<link href="jquery-ui.css" rel="stylesheet">
<style>
body{
font: 62.5% "Trebuchet MS", sans-serif;
margin: 50px;
}
</style>
</head>
<body>
<h1>progress bar in table example</h1>
<table>
<tr>
<td>20 Apr 1987, 06:00-07:00</td>
<td> <input type=text id=rainfall1 value="28.95">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 07:00-08:00</td>
<td> <input type=text id=rainfall2 value="38.87">mm</input> </td>
<td></td>
</tr>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall3 value="14.89">mm</input> </td>
<!--here is the progress bar div element-->
<td><div id="progressbar" style="width:200px"></div></td>
</tr>
</table>
<button id="plusBtn">+10</button>
<button id="minusBtn">-10</button>
<label id="progressLabel">label</label>
<script src="external/jquery/jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
var progressVal = 20;
//these minus and plus functions are just for an interactive progress bar example.
//you don't have to use them
$("#plusBtn").click(function(){
progressVal += 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
});
$("#minusBtn").click(function(){
progressVal -= 10;
$("#progressLabel").html(progressVal.toString());
console.log(progressVal);
$( "#progressbar" ).progressbar({
value: progressVal
});
//the progressbar() function updates the bar's value
});
$( "#progressbar" ).progressbar({
value: progressVal
});
</script>
</body>
</html>
You can simply make a div inside of your td with some CSS styling. For example, use this:
.bar{
height: 20px;
position: relative;
background-color: lightblue;
}
Then make the HTML like this:
<table id=table>
<tr>
<td>20 Apr 1987, 08:00-09:00</td>
<td> <input type=text id=rainfall0 value="14.89">mm</input> </td>
<td><div class="bar" id="bar0"></div></td>
</tr>
</table>
Now use this JavaScript to make the height of the bar relative tot the value of the input:
var amnt = document.getElementById("table").rows.length;
for(i = 0; i < amnt; i++){
var element = document.getElementById("rainfall" + i);
rainfall = element.value;
var el = document.getElementById("bar" + i);
el.style.width = rainfall;
}
This should work, have not tested it yet, will do so now.

Take ids of text boxes in an html growing table

I have made code for auto generated text boxes in an HTML growing table. I want to save values from these text boxes to a mysql database using netbeans but I don't know how I get the ids of each text box while they are auto generating..
My code is here..please help me if there is any solution for this problem..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="dcterms.created" content="Tue, 24 Mar 2015 06:41:28 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
var rowCount = 1;
function addMoreRows(frm) {
rowCount ++;
var recRow = '<p id="rowCount'+rowCount+'"><tr><td><input name="name" type="text" size="17%" maxlength="120" /></td><td><input name="email" type="text" maxlength="120" style="margin: 4px 5px 0 5px;"/></td><td><input name="mobile" type="text" maxlength="120" style="margin: 4px 10px 0 0px;"/></td></tr> <img src="./image/close.png" /></p>';
jQuery('#addedRows').append(recRow);
}
function removeRow(removeNum) {
jQuery('#rowCount'+removeNum).remove();
}
</script>
</head>
<body>
<table rules="all" style="background:#fff;">
<tr>
<td style="font-size:14px;" >Name</td>
<td style="font-size:14px;">Email</td>
<td style="font-size:14px;">Mobile</td>
<td><span style="font:normal 12px agency, arial; color:blue; text-decoration:underline; cursor:pointer;" onclick="addMoreRows(this.form);">
<img style=" padding-left: 12px;" src="./image/add.png" />
</span>
</td>
</tr>
<form action="" method="POST">
<tr id="rowId">
<td><input type="text" name="name" size="17%"/></td>
<td><input type="text" name="email" /></td>
<td><input type="text" name="mobile" /></td>
</form>
</table>
<div id="addedRows"></div>
</td>
</tr>
<td><input type="submit"></td>
</table>
</body>
</html>

Some css is not working in IE

I am working on the application. Some of the css are not working in IE, whereas working in Firefox, such as Scrollbar, input types, placeholder, required etc. All of the things are working fine in Firefox as well as Chrome, but not in IE. My IE version is 9.
My Firefox view is
whereas my IE view is -
My css code is -
input[type="submit"]{
background:#3399cc;
width:100%;
border:0;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:100%;
color:#fff;
cursor:pointer;
transition:background .3s;
-webkit-transition:background .3s;
}
input[type="submit"]:hover{
background:#EE2C2C;
}
input[type="text"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
input[type="password"]{
width:100%;
background:white;
margin-bottom:2%;
margin-top:2%;
border:1px solid #ccc;
padding:4%;
font-family:'Open Sans',sans-serif;
font-size:95%;
color:black;
}
I tried to figure out the issue by so many ways such as change Compatibility View, try but unsucceed.
My html file is -
<%# page contentType="text/html; charset=UTF-8" %>
<%# page import="java.util.*" %>
<html>
<head>
<link rel="shortcut icon" href="images/imageIcon.png" />
<title> IETM Solutions </title>
<!--[if lte IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/ietmLogin.css" type="text/css"></link>
<%
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.
response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate");
System.out.println("session -- A1 - " + session);
if(session != null)
{
session.invalidate();
session = null;
}
System.out.println("session -- A2 - " + session);
%>
</head>
<body>
<div id="LoginImage">
<div id="login">
<h1>IETM Document Management System</h1>
<form action="Login" method="post">
<table>
<tr>
<input type="text" name="user" placeholder="UserName" required = "true"/>
</tr>
<tr>
<input type="password" name="password" placeholder="Password" required = "true"/>
</tr>
<tr>
<input type="submit" value="Login"/>
</tr>
</table>
</form>
</div>
<%
String error = (String) request.getAttribute("error");
//System.out.println("error : "+ error);
if(error != null)
{
%>
<h4 align="center" style="color: red">Invalid User Name/Password</h4>
<% }
%>
</div>
</body>
</html>
Any suggestion/solution will be very helpful.
Thank you.
You have no doctype.
<!DOCTYPE html>
<html>
...
IE is rendering in Quirks Mode, which doesn't support most styles on <input> elements.
Seeing your HTML one question knocking me repeatedly. You drew a table only with <table> and <tr> tags but where is <td> tag which is equally required for drawing table as well? I just simply rewrote your html and it worked fine for me:
<form action="Login" method="post">
<table>
<tr>
<td>
<input type="text" name="user" placeholder="UserName" required="true" />
</td>
</tr>
<tr>
<td>
<input type="password" name="password" placeholder="Password" required="true" />
</td>
</tr>
<tr>
<td>
<input type="submit" value="Login" />
</td>
</tr>
</table>
</form>
IE9 is not smart enough to understand markup error. If this works fine in your case please don't forget to widen or style and for more room.

margin: 0 auto; in IE9 with struts 1

I have my margin: 0 auto looking good in Chrome but it's not working in IE9. In IE9 the entire site is static against left of the screen. I added a simple reset css statement based on some suggestions but they are not helping.
In main.css:
html, body {
padding:0;
margin: 0;
}
body {
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
}
.wrapper {
width: 1009px;
background-color:white;
border-style:solid;
border-color:#002663;
padding:5px;
margin: 0 auto;
margin-top:25px;
}
Updated: What the css looks like in IE's dev tools panel:
Can anyone see where I can make an improvement for IE? Thanks.
Update: actual html as requested:
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Search Page</title>
<!-- Hostname: VDDP03A-FAEF32A -->
<link rel="stylesheet" href="/CSA/styles/main.css" type="text/css" />
<link rel="stylesheet" href="/CSA/styles/smoothness/jquery-ui-1.8.10.custom.css" type="text/css" />
<script type="text/javascript" src="/CSA/scripts/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery-ui-1.10.3.js" ></script>
<script type="text/javascript" src="/CSA/scripts/jquery.validate.js" ></script>
</head>
<body >
<div class="wrapper">
<table width="100%" border="0" cellpadding="0" style="margin:0;">
<tr>
<td>
<img src="/CSA/images/logo.jpg" width="300" align="top-left" border="0" style="margin:0;" alt="myLogo">
</td>
<td width="50%">
<br />
<h2 style="font-weight:normal;align:right;color:#002663;margin:0;">Title</h2>
</td>
<td>
</td>
</tr>
</table>
<hr color="#002663" style="margin:0;">
<form name="form1" method="post" action="/CSA/web/CSA.do" style="margin:0;">
<input type="hidden" name="searchType" value="myValue">
<table width="1000px" border="0" cellpadding="0" style="margin:0;">
<col width="285px" />
<col width="300px" />
<col width="278px" />
<col width="137px" />
<tr style="margin:0;">
<td colspan="4">
<h4 style="color:#002663;margin-bottom:10;margin-top:3;">Search 1:</h4>
</tr>
<tr style="margin:0;">
<td style=" padding-left:100px; padding-bottom:0px; width:185px;" >
options :
<input type="radio" name="options" value="OP1" style="border:none;">
OP1
<input type="radio" name="options" value="OP2" style="border:none;">
OP2
</td>
<td>
Search Criteria : <input type="text" name="criteria" maxlength="20" size="20" tabindex="1" value="" id="searchField1">
</td>
<td style="min-width: 268px;">
Date :
<input type="text" name="lossDate" maxlength="10" size="11" value="07/19/2013" id="datepicker">
</td>
<td style="min-width: 138px;">
<input type="submit" name="submit" tabindex="3" value="Search" id="submit" style="margin-top:5;">
<input type="reset" name="reset" tabindex="4" value="Reset" id="reset" style="margin-top:5;">
</td>
</tr>
</table>
</form>
<!-- Three more forms similar to the above -->
<hr color="#b0b1b2" style="margin:3;">
<table table width="1000px" border="0" cellpadding="0">
<tr style="margin:0;">
<td style="margin:0;">
<h4 style="color:#002663" style="margin-bottom:8;margin-top:3;">Search Results:</h4>
</td>
</tr>
<div styleId="errors" style="margin:0;">
</div>
</table>
</div>
</body>
</html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
The Doctype has to be the first thing in the document. It goes before the <html> start tag.
Putting it where you have it is both invalid and triggering of quirks mode (and in quirks mode, all sorts of things break).
Try adding margin:0 auto on your body tag
body {
/* background-position: 5px 5px;
background-repeat: no-repeat; */
background-color: gray;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
width: 1010px;
margin: 0 auto; /* <--*/
}
Try
body, html {
padding: 0;
margin: 0;
}
Look up reset css when you get a chance http://www.cssreset.com/
Update:
I would suggest you take the width off of the body tag and put it in a div.
http://jsfiddle.net/KMDuw/2/
My fiddle shows a fixed width div using auto margin. If you take off the body css, you will see some space.
Can you also post your html please

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.