Hello everyone I have a very strange bug - Text in select option goes in two lines see screenshot (Only in IE8 and IE7 ) Does anyone know solution ?
You can access this table on web topairlines.info and choose tab registration (Please open with IE7 or IE8 to see the bug)
http://jsfiddle.net/DVyVj/1/
<table class="form-tabs" width="780" border="0px">
<tr>
<td class="td-right"><span class="red-star">*</span>שם פרטי:</td>
<td><input style="width: 250px; height:30px;" type="text" name="#"></td>
<td class="td-right"><span class="red-star">*</span>שם משפחה:</td>
<td><input style="width: 250px; height:30px;" type="text" name="#"></td>
</tr>
<tr>
<td class="td-right">תחום עסק:</td>
<td><input style="width: 250px; height:30px;" type="text" name="#"></td>
<td class="td-right"><span class="red-star">*</span>דוא"ל:</td>
<td><input style="width: 250px; height:30px;" type="text" name="#"></td>
</tr>
<tr>
<td class="td-right"><span class="red-star">*</span>טלפון:</td>
<td class="td-left">
<div class="select-right-tabs">
<select style="width: 75px; height:34px;">
<option value="1">054</option>
<option value="2">055</option>
<option value="3">056</option>
<option value="4">057</option>
</select>
</div>
<div class="input-left-tabs">
<input style="width: 169px; height:30px;" type="text" name="#">
</div>
</td>
<td class="td-right">נייד:</td>
<td class="td-left">
<div class="select-right-tabs">
<select style="width: 75px; height:34px;">
<option value="1">054</option>
<option value="2">055</option>
<option value="3">056</option>
<option value="4">057</option>
</select>
</div>
<div class="input-left-tabs">
<input style="width: 169px; height:30px;" type="text" name="#">
</div>
</td>
</tr>
<tr>
<td class="td-right">הערות:</td>
<td colspan="3">
<textarea class="textarea-tabs"></textarea>
</td>
</tr>
<tr>
<td class="td-right"></td>
<td class="extra-table-text">
<input type="checkbox" name="#" value="#">מעוניין/ת לקבל בדוא’’ל עדכונים לגבי אירועים
</td>
<td colspan="2" class="last-obligatory td-left">* שדות חובה למילוי</td>
</tr>
<tr>
<td colspan="4" class="td-left">
<button type="button" onclick="switchImg('../img/arrow/png')">שלח</button>
</td>
</tr>
</table>
I think its due to the height is 34px; and if you do not specify explicit style it will take different default style with different line-height;
I think this will do just replace this
<select style="width: 75px; height:30px; line-height:30px;">
I have updated the fiddle, pleases refer fiddle this link,
I hope this will do :)
you might try to add white-space: pre-line; on option elements!
Related
I'm trying to create a "register" page in HTML and I made the table to the center. But when I moved the table to the center there was a huge gap between 's.
I tried "cellspacing" but it doesn't work since im working with HTML5.
I also tried "border-spacing:0px;" but it doesn't work either.
I'm using latest version of Chrome and Sublime Text
Code:
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 650px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Sometime when any style issue is there the reason can be style of parent control. In this case Table is nested inside Form control, so need to change style of form control first,after changing style of form position has change and for space little change in padding of table.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 650px;
padding: 50px;
}
form {
margin-top:20%;
margin-left:10%;
margin-right:10%;
margin-bottom:20%;
width: 80%;
}
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
Are you looking for this result?
Edit
removed height: 650px; from table.table
The height for each row was too high because You set the height of the table to a specific value [in your case 650px] and row heights were evenly distributed.
The solution is either to remove the height property or adjust the height according to your need.
Please note, this will not guarantee browser compatibility. It will be good to go with proven CSS frameworks like bootstrap to achieve the same result with responsiveness and browser compatibility.
body {
background-color: #8F3985;
}
table.tablo {
background-color: #07BEB8;
margin-left: auto;
margin-right: auto;
width: 600px;
border-spacing: 0px;
}
table {
border-spacing: 0px;
}
<form>
<table class="tablo">
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td width="20%">
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
In your css code, you have fixed the height = 600px, which actually takes control of the inner size of the table and stretches table to become 600px in size. To use border-spacing, you can just remove the height of table and update the value of border-spacing, then it will show you the actual spacing that you want to use in it.
I have updated your code below, just run and enjoy ;)
<!DOCTYPE html>
<html>
<style type="text/css">
body{
background-color:#8F3985;
}
table.tablo{
background-color:#07BEB8;
margin-left:auto;
margin-right: auto;
width:600px;
border-spacing: 5px;
}
</style>
<head>
<title></title>
</head>
<body>
<form>
<table class="tablo">
<tr>
<td>
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
<tr>
<td>
Adı:
</td>
<td>
<input type="text" name="">
</td>
</tr>
<tr>
<td>
Soyadı:
</td>
<td><input type="text" name=""></td>
</tr>
<tr>
<td>
Cinsiyeti:
</td>
<td>
<input type="radio" name="durum">Erkek
<input type="radio" name="durum">Kadın
</td>
</tr>
<tr>
<td>
Doğum Yeri:
</td>
<td>
<select>
<option>Bulgaristan</option>
<option>İstanbul</option>
<option>Ankara</option>
</select>
</td>
</tr>
<tr>
<td>
Doğum Tarihi:
</td>
<td>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<select>
<option>Ocak</option>
<option>Şubat</option>
<option>Mart</option>
</select>
<select>
<option>2000</option>
<option>2001</option>
<option>2002</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="submit" name="" value="Kaydet">
<input type="reset" name="" value="Temizle">
</td>
</tr>
</table>
</form>
</body>
</html>
These properties should work.
table {
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
tbody, tr {
width: 100%;
}
table.tablo, table.tablo * {
box-sizing: border-box;
}
table.tablo {
width: 600px;
margin-right: auto;
margin-left: auto;
background-color: #07beb8;
}
table.tablo td {
width: 50%;
vertical-align: top;
padding: 0; /* change in whitespace you like */
}
table.tablo td:first-child {
width: 100%;
}
and use for the header
<tr>
<td colspan="2">
<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
</td>
</tr>
I have some issues with my tables. It seems that the distance between the field name and text boxes are a bit big.
Are there any issues that I am making which causing this? How can I reduce the spaces? Check out the image below.
Here's my HTML:
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table border="0" border-collapse:collapse; width:80% colspan="3">
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td>[text* client-name] </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> [text* phone] </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td>[email* email]</td>
</tr>
<tr>
<td>Best time to call: </td>
<td>[select best-time "Morning" "Afternoon" "After 5pm"] </td>
</tr>
<tr>
<td>Address:</td>
<td> [text address]</td>
</tr>
<tr>
<td>City</td>
<td>[text city]</td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td>[text zip]</td>
</tr>
<tr><td colspan="2">Questions/Comments
[textarea questions id:questions]
</td></tr>
<tr><td colspan="2">[submit "Submit"]</td>
</tr>
</tbody>
</table>
Here is a JSFiddle demonstrating the issue: https://jsfiddle.net/sLv3e8f5/
The way the browser lays out tables by default, each column is sized to try to fit the width of its largest child element. In this case the largest child element is the table cell with the value "best time to call", which is causing the column to expand in width to accommodate that length.
You can give the first column of your table a fixed width to fix this, which will cause your longest line, "best time to call", to wrap.
In the following example I added an id to the table, then I targeted the first column of the table using CSS and gave it a width. I also gave your "Questions/Comments" form a width so it matches up.
Screenshot of the result:
Live Demo:
#thetable td:first-child {
width: 70px;
}
#qa {
width: 240px;
}
<h5>Free Room of Cleaning & Carpet Audit</h5>
<table id="thetable" border="0" border-collapse:collapse; width:80% colspan="3" cellspacing="0" cellpadding="0" >
<tbody>
<tr>
<td>Name: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Phone: <span style="color:red;"><strong>*</strong></span></td>
<td> <input type="text"> </td>
</tr>
<tr>
<td>Email: <span style="color:red;"><strong>*</strong></span></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Best time to call: </td>
<td><select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select> </td>
</tr>
<tr>
<td>Address:</td>
<td> <input type="text"></td>
</tr>
<tr>
<td>City</td>
<td><input type="text"></td>
</tr>
<tr>
<td>State: </td>
<td>[text state]</td>
</tr>
<tr>
<td>Zip:</td>
<td><input type="text"></td>
</tr>
<tr><td colspan="2">Questions/Comments
<textarea id="qa" rows="4" cols="50">
</textarea>
</td></tr>
<tr><td colspan="2"><input type="submit"></td>
</tr>
</tbody>
</table>
JSFiddle Version: https://jsfiddle.net/sLv3e8f5/2/
Try adding cellspacing="0"and cellpadding="0" on your table,
Add a
margin-left:3px;
to the
<td>
For example,
<td style="margin-left:3px;">[text* client-name]</td>
Your spaces are being caused by the "Best time to call" cell. Wrap that cell to two lines to remove the excess spaces.
because table cell is aligned by "Best time to call: ".
how about use <ul><li>
Getting rid of tables opens you up to a world of possibilities with CSS Styling.
The following is a very quick and dirty example:
label {
/*float:left;*/
width: 8em;
display:block;
clear:both;
margin-top: 10px;
}
input, select {
float:left;
margin-top: 10px;
margin-left: 20px;
}
label.required::after {
content:'*';
color: #F00;
padding-left:0.25em;
}
.required+input, .required+select
{
background-color:#FCC;
}
<fieldset>
<legend>Free Room of Cleaning & Carpet Audit</legend>
<label class="required" for="name">Name:</label>
<input type="text" id="name" name="name" />
<label class="required" for="phone">Phone:</label>
<input type="text" id="phone" name="phone" />
<label class="required" for="email">Email:</label>
<input type="text" id="email" name="email" />
<label for="call">Best time to call:</label>
<select id="call" name="call">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<label for="Address">Address:</label>
<input type="text" id="Address" name="Address" />
</fieldset>
I am creating an HTML form that will be used in a third party software. I've created the form in IE9 and everything displays exactly how I want it to. When opened with IE10 or Chrome it becomes a giant mess. It appears as if styling/css is completely ignored. I need some help determining what I am doing wrong to prevent the cross-browser functionality. Code below.
<STYLE>
fieldset {
width: 655 px;
padding: 10 px;
background-color: transparent;
border: 1px solid #A5C0DF
}
TABLE {
width: 630 px;
align: left;
text-align: left;
border-color: #000000;
border: #000000;
table-layout: fixed;
}
td {
border: none;
text-align: left;
vertical-align: middle;
word-wrap: break-word;
}
input {
width: 100%;
text-align: left;
}
select {
width: 100%;
}
textarea {
width: 100%;
overflow: visible;
}
Label {
width: 100%;
}
.mcInput {
border: 1px solid #A5C0DF;
font: 12 pt Times New Roman, Arial, Helvetica, sans-serif;
color: blue;
margin-bottom: 1px;
}
.mcPage{
page-break-after:always;
width:100%;
}
.center {
text-align: center;
}
button {
border-radius: 50%;
border: 1px solid #000;
text-align: center;
}
.bttnstyle {
text-align: center;
width: 109 px;
}
.bttntwo {
text-align: center;
width: 40 px;
font-size: 12;
}
.readonly {
color: black;
background-color: #f4f4f4;
}
</STYLE>
<FORM>
<DIV id="mcPage_001" name="mcPage_001">
<fieldset>
<TABLE cellpadding="0" cellspacing="0" style="width: 620 px">
<tr>
<td style="width: 120 px">
<LABEL>CU #:</LABEL>
</td>
<td style="width: 190 px">
<INPUT
type="text"
id="mastercontrol.form.number"
alt="CU Number"
title="CU Number"
class="mcInput center"
readonly="true">
</td>
<td style="width: 120 px">
<LABEL style="padding-left: .75em">Date Initiated:</LABEL>
</td>
<td style="width: 190 px">
<INPUT
type="text"
id="mastercontrol.form.created"
alt="Date Initiated"
title="Date Initiated"
class="mcInput center"
readonly="true">
</td>
</tr>
<tr>
<td>
<LABEL>Form Initiator:</LABEL>
</td>
<td colspan="3">
<INPUT
type="text"
id="mastercontrol.form.creatorname"
alt="Form Initiator"
title="Form Initiator"
class="mcInput"
readonly="true">
</td>
</tr>
</TABLE>
</fieldset><br><br>
<fieldset>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" style="width: 150 px">
<LABEL style="font-size: 14 px"><b>Location(s) Affected:</b></LABEL>
</td>
<td style="width: 200 px">
<select
onchange="locOther();"
id="cboLocationsAffected"
alt="Locations Affected"
title="Locations Affected"
class="mcInput">
<option value=""></option>
<option value="option 1">option 1</option>
<option value="option 2">option 2</option>
<option value="option 3">option 3</option>
<option value="option 4">option 4</option>
</select>
</td>
<td style="width: 65 px">
<LABEL style="padding-left: .75em; font-size: 14 px"><b>Other:</b></LABEL>
</td>
<td style="width: 215 px">
<INPUT
type="text"
id="txtLocationAffectedOther"
alt="Location Affected Other"
title="Location Affected Other"
value=" N/A"
maxlength="29"
class="mcInput">
</td>
</tr>
<tr>
<td style="width: 110 px; text-align: right">
<input
onclick="addItems(); Limit();"
type="button"
id="txtAdd"
alt="Add Locations"
title="Add Locations"
value="Add"
class="button bttntwo">
</td>
<td style="width: 40 px">
<input
onclick="Clear();"
type="button"
id="txtClear"
alt="Clear Locations"
title="Clear Locations"
value="Clear"
class="button bttntwo">
</td>
<td colspan="3">
<TEXTAREA
type="text"
id="txtLocations"
alt="All Locations"
title="All Locations Affected"
style="height: 63 px"
readonly="true"
class="mcInput"
onKeyDown="limitText(this.form.txtLocations,this.form.countdown,200);"
onKeyUp="limitText(this.form.txtLocations,this.form.countdown,200);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td style="width: 290 px">
<LABEL style="font-size: 14 px"><b>Application and/or System Affected:</b></LABEL>
</td>
<td style="width: 340 px">
<INPUT
type="text"
id="txtApplicationSystemAffected"
alt="Application System Affected"
title="Application System Affected"
maxlength="48"
class="mcInput"><br>
</td>
</tr>
<tr>
<td>
<LABEL style="font-size: 14 px; height: 63 px"><b>Servers/Workstations/Equipment Affected:</b></LABEL>
</td>
<td>
<TEXTAREA
type="text"
id="txtEquipmentAffected"
alt="Equipment Affected"
title="Equipment Affected"
maxlength="48"
class="mcInput"
style="height: 63 px"
onKeyDown="limitText(this.form.txtLocations,this.form.countdown,600);"
onKeyUp="limitText(this.form.txtLocations,this.form.countdown,600);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td>
<LABEL style="font-size: 14 px"><b>Description of Updated to be Applied:</b></LABEL>
</td>
</tr>
<tr>
<td>
<TEXTAREA
type="text"
id="txtDescriptionUpdatesApplied"
alt="Description Updates Applied"
title="Description Updates Applied"
style="height: 150 px"
class="mcInput"
onKeyDown="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);"
onKeyUp="limitText(this.form.txtDescriptionUpdatesApplied,this.form.countdown,1000);"></TEXTAREA>
</td>
</tr>
</TABLE>
<TABLE cellspacing="0" cellpadding="0">
<tr>
<td rowspan="7" style="background-color: #E8E8E9; width: 85 px">
<LABEL style="font-size: 14 px"><b>Risk<br>Assessment:</b><br></LABEL><LABEL style="font-size: 13 px"><i> (check all<br> that apply)</i></LABEL>
</td>
<td style="width: 25 px">
<INPUT
type="checkbox"
id="chkReviewUpdatesConducted"
alt="Review Updates Conducted"
title="Review Updates Conducted"
value="A review of potential critical updates was conducted">
</td>
<td style="width: 520 px">
<LABEL style="padding-left: .5em">A review of potential critical updates was conducted</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkUpdatesAffectValidatedSystems"
alt="Updates Affect Validated Systems"
title="Updates Affect Validated Systems"
value="Updates could affect Validated Systems">
</td>
<td>
<LABEL style="padding-left: .5em">Updates could affect Validated Systems</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkInstallConfigChangesDocumented"
alt="Install Config Changes Documented"
title="Install Config Changes Documented"
value="Installation instructions/configuration changes are documented">
</td>
<td>
<LABEL style="padding-left: .5em">Installation instructions/configuration changes are documented</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkRevertMethodIdentified"
alt="Revert Method Identified"
title="Revert Method Identified"
value="A method to revert back has been identified">
</td>
<td>
<LABEL style="padding-left: .5em">A method to revert back has been identified</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
type="checkbox"
id="chkAffectedVendorsContacted"
alt="Affected Vendors Contacted"
title="Affected Vendors Contacted"
value="Affected application vendors have been contacted to ensure that the updates will run at the to be applied version">
</td>
<td>
<LABEL style="padding-left: .5em">Affected application vendors have been contacted to ensure that the updates</LABEL>
</td>
</tr>
<tr>
<td>
<LABEL></LABEL>
</td>
<td>
<LABEL style="padding-left: .5 em">will run at the to be applied version</LABEL>
</td>
</tr>
<tr>
<td>
<INPUT
onclick="riskOther();"
type="checkbox"
id="chkRiskAssessOther"
alt="Risk Assess Other checkbox"
title="Risk Assess Other checkbox"
value="Other">
<td>
<LABEL style="padding-left: .5em">Other:<span style="padding-left: .5 em"></span>
<INPUT
type="text"
id="txtRiskAssessOther"
alt="Risk Assess Other"
title="Risk Assess Other"
maxlength="60"
disabled="true"
class="mcInput"
style="width: 440 px"></LABEL>
</td>
</tr>
</TABLE><br>
</fieldset>
</DIV>
I am trying to have some content show/appear if a certain radio button (YES) is selected. I have provided the text I have in HTML form. I believe this should be a very simple code but I am VERY rusty on my HTML. This is all within a table. If the YES radio is chosen, I would like the 3 Quantity portions to appears but if not then I would like them hidden. I hope this helps...
<tbody>
<td class="style1" colspan="2">
<strong>Room Setup<br>
<tr>
<span class="style2"><em>Complete where applicable</em></span>
</strong>
</td>
<td style="width: 255px;">
*Is a Room Setup Required?
</td>
<td style="width: 202px;">
<input name="roomsetup" value="yes" type="radio">
Yes<br>
<input name="roomsetup" value="no" type="radio"> No
</td>
</tr>
<tr>
<td style="width: 255px; height: 14px;">
</td>
<td style="width: 202px; height: 14px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="roomchairs" value="yes" type="checkbox"> Chairs Needed<br>
<input name="roomchairsquantity" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktables" value="yes" type="checkbox"> Tables Needed<br>
<input name="roomquantitytable" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;">
</td>
<td style="width: 202px;">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
Quantity
</td>
<td style="width: 202px;">
<input name="checktableclothes" value="yes" type="checkbox"> Tableclothes
Needed<br>
<input name="roomquantitycloth" type="text">
</td>
</tr>
<tr>
<td style="width: 255px;" class="style3">
</td>
<td style="width: 202px;">
</td>
</tr>
There are about two ways you can do this.
(1) Using PHP
<?php
if($_POST["RADIOBOX NAME"] =="OPTION YOU WANT TO SELECT") {
echo "WHAT YOU WANT TO SAY";
//USE THE ECHO AS MUCH AS NEEDED
}
?>
(2) I think that there is a JavaScript for this, however, I am not familiar with JavaScript.
You'll need some javascript for that. If you can use something like jQuery, this is really easy to do, and it's easy to find brazillions tutorial on Internet.
For exemple this one or this one
I have this html table where I have one cell in the table with rowSpan = 3. so in the first column, I have 3 rows with inputs and in the second column I have a picture showing to span all 3 columns. I am trying to figure out how the browser figured out how to vertically allocate spacing for each of the rows in the first column.
I want then to be "tight" so all the empty space (if the picture is big, goes to the bottom).
But it seems like the empty space is being allocated across each row equally.
Is there anyway to change this behavior . .
Here is the table:
<table class="input" border="1">
<tbody>
<tr>
<td valign="top">G:</td>
<td valign="top">
<select id="GId" maxlength="50" name="GId">
<option></option>
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select>
</td>
<td id="imageBorder" rowspan="3" align="center">
<img class="my_img" src="http://www.example.com/image.png">
</td>
</tr>
<tr>
<td valign="top">Type:</td>
<td valign="top">
<select id="EId" maxlength="50" name="EId">
<option></option>
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top">
<select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
<option></option>
<option value="204">A</option>
<option value="183">B</option>
</select>
</td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top">
<input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.example.com/image.png" type="text">
</td>
</tr>
</tbody>
</table>
I think you want to have the first 2 rows at minimum height and if the picture is big, all the space to go on the third line. If this is the case, then put a height to the first 2 lines, something like this:
<table class="input" border="1">
<tbody>
<tr>
<td valign="top" height="1">G:</td>
<td valign="top">
<select id="GId" maxlength="50" name="GId">
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select>
</td>
<td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.mysite.com/image.png"> </td>
</tr>
<tr>
<td valign="top" height="1">Type:</td>
<td valign="top">
<select id="EId" maxlength="50" name="EId">
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select>
</td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top">
<select id="ManagerPersonId" maxlength="50" name="ManagerPersonId">
<option value="204">A</option>
<option value="183">B</option>
</select>
</td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top"><input id="PictureLink" maxlength="200" name="PictureLink" size="60" value="http://www.mysite.com/image.png" type="text">
</td>
</tr>
</tbody>
</table>
style the td as below to have control on the data alignment.
<table>
<tr>
<td style = "height:300;width:375;vertical-align:top;"> abc </td>
</tr>
</table>
use
<tr valign="top">...</tr>
also your html looks incomplete.
UPDATE
add style="height:100%;" on the first 2 rows so the entire extra height is transferred to the 3rd row.
<table class="input" border="1">
<tbody>
<tr style="height: 100%;">
<td valign="top">G:</td>
<td valign="top"><select id="GId" maxlength="50" name="GId">
<option></option>
<option value="2">Joe</option>
<option selected="selected" value="3">Bill</option>
</select></td>
<td id="imageBorder" rowspan="3" align="center"><img class="my_img" src="http://www.google.co.in/logos/2010/flintstones10-hp.jpg"></td>
</tr>
<tr style="height: 100%;">
<td valign="top">Type:</td>
<td valign="top"><select id="EId" maxlength="50" name="EId">
<option></option>
<option value="10"></option>
<option selected="selected" value="2">A</option>
<option value="4">C</option>
</select></td>
</tr>
<tr>
<td valign="top">Manager:</td>
<td valign="top"><select name="ManagerPersonId" maxlength="50" id="ManagerPersonId">
<option></option>
<option value="204">A</option>
<option value="183">B</option>
</select></td>
</tr>
<tr>
<td valign="top">PictureL:</td>
<td colspan="2" valign="top"><input value="http://www.mysite.com/image.png" size="60" name="PictureLink" maxlength="200" id="PictureLink" type="text"></td>
</tr>
</tbody>
</table>
You can set a fixed height for each row but the last one.
<tr style="height: 20px">
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 20px">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
This way all the extra space will go to the last row.