just have found strange problem in ie7 rendering (may be for previous versions else).
If I have input inside td it create cell with height more then other browsers (ff, ie8, chrome).
All margins are reset, paddings removed, cellcpacing to zeroes. The only possibly way to make them equivalent
that I have found is specify height for all tds in pixels. But it seems to me very ugly.
here is html:
<!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>
<link type="text/css" href="styles/main.css" rel="Stylesheet" />
</head>
<body>
<br />
<table cellspacing="0" cellpadding="0" border="0" class="details-table">
<tr class="details-row">
<td>
<label for="txtFirstName">First Name</label>
</td>
<td>
<label for="txtFirstName">Last Name</label>
</td>
</tr>
<tr class="alt-details-row">
<td>
<label for="txtFirstName">First Name2</label>
<input type="text" class="details-input textField" id="txtFirstName2" name="txtFirstName2" />
</td>
<td>
<label for="txtLastName2">Last Name2</label>
<input type="text" class="details-input textField" id="txtLastName2" name="txtLastName2" />
</td>
</tr>
<tr class="details-row">
<td>
<label for="txtFirstName3">First Name3</label>
<input type="text" class="details-input textField" id="txtFirstName3" name="txtFirstName3" />
</td>
<td>
<label for="txtLastName3">Last Name3</label>
<input type="text" class="details-input textField" id="txtLastName3" name="txtLastName3" />
</td>
</tr>
</table>
</body>
</html>
here is css:
html,
body,
form,
table,
tr,
td
{
margin: 0;
padding:0;
border: 0;
outline: 0;
font-size: 100%;
}
body
{
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
input.textField
{
margin:0px;
padding:0px;
border: 1px solid #BFBFBF;
height: 17px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px ;
}
.details-table
{
width:100%;
color: #666
}
.details-table tr.details-row,
.details-table tr.details-row td
{
background: #ebe4bc;
}
and here is screen shot:
float:left on the elements might help
I don't think you can fix it by changing the height of either td or input element, as there's always 1 offset auto generated for that input in IE7 mode. In IE8 or other popular browsers, the extra 1 offset is not generated.
I think it's a bug in IE7.
Related
I'm getting white spaces at the top of my form and I believe I have tried everything but, it's still there. Can someone give some sugesstions at to how to get rid of the white space at the top? When I open the form in firefox it seems to be okay but, when I use IE I get white space. Also, it is a .cfm form. Thanks.
Here is my code.
<!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=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
.body
{
margin-top:0px;
padding-top:0px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
.mytable1 th
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1 td
{
border-color:#333333;
border-style:solid;
border-width:1px;
}
.mytable1
{
border-collapse:collapse;
border-color:#000000;
border-style:solid;
border-width:2px;
}
</style>
</head>
<body lang=EN-US style='tab-interval:.5in'>
<div id=Section1>
<cfoutput>
<form name="reportform" action="UpdateFormStatus.cfm" method="post">
<input type="hidden" name="UserEmail" value="#search_review.UserEmail#">
<table class="mytable1">
<tr>
<td valign="top" class="blacktext" align="center" colspan="14"><strong>Review Form</strong></td>
</tr>
<tr>
<td valign="top" class="blacktext" colspan="4"><strong>Type:</strong> #form.Type# </td>
<td valign="top" class="blacktext" colspan="4"><strong>Number: </strong> #form.Number# </td>
</tr>
<cfif not search_results.RecordCount>
<tr>
<td class="blacktextbold" colspan="2"> No results match those criteria.</td>
<td align="left" colspan="1">Search Again</td>
</tr>
<cfelse>
<tr>
<td valign="top" colspan="3" class="blacktext"><strong>Name:</strong> #form.Name# </td>
<td valign="top" colspan="3" class="blacktext"><strong>Project Code: </strong> #form.ProjectCode# </td>
</tr>
</table>
</form>
</cfoutput>
</body>
</html>
You have put body in as a class
is should be:
body{
margin-top:0px;
padding-top:0px;
}
For an ID you use # for a class you use . and if you are going to target an object like a div you just put div
You should put the margin and padding from the html as well to 0 and remove the . from the body selector:
html, body
{
margin-top:0px;
padding-top:0px;
}
It looks like you're missing the closing tag for cfif. The browser is trying to fix your html and is putting this tag above the table. You also don't have a closing tag for the div with id="Section1". CFML is not the same as HTML btw. This will not render properly as HTML because of the Cold Fusion specific tags.
You didn't close the parent div. <div id="Section1"> Also, as #Andrew mentioned, you had body set as a class. (body {} instead of .body{}).
http://jsfiddle.net/fKMHe/
To remove the margin and padding from the form element just add this:
form
{
margin: 0px;
padding: 0px;
}
I need some help as to the reason IE7 will not render my image in the following HTML/CSS code
<html>
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>Debugging IE 7 image problem</title>
<style>
.delete-icon
{
background-image: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png");
background-position: top right;
background-repeat: no-repeat;
padding-right: 18px;
margin-left: 7px;
}
</style>
</head>
<body>
<table id="table_Locations">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="div-input-default" id="LocationsTest2">
<td>
<select name="AllTests_Locations_Substance_2" id="LocationsTest2">
<option value="641">Okuku</option>
<option value="644">Oyan</option>
<option value="645">Ikirun</option>
<option value="646">Oshogbo</option>
</select>
</td>
<td>
<input id="LocationsTestResults2_negative" name="AllTests_Locations_Result_2" value="776" type="radio" />Negative <input id="LocationsTestResults2_positive" name="AllTests_Locations_Result_2" value="777" type="radio" />Positive<br />
</td>
<td>
<a class="delete-icon" href="#"></a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
This renders well in IE8, IE9, Firefox and Chrome but not IE7. How can I change this markup to get it to work in IE7 please? Thanks.
Try this:
.delete-icon {
background: url("http://cdn4.iconfinder.com/data/icons/momenticons-basic/16x16/trash-can-delete.png") no-repeat right 0;
display: inline-block;
width: 100px; /* set to whatever you need */
height: 100px; /* set to whatever you need */
padding-right: 18px;
margin-left: 7px;
}
The key is giving the anchor tag the correct display value plus a width and height.
I'd also recommend that you don't use tables for layout purposes as that hasn't been good practice for at least 10 years or more.
Try to set width and height to .delete-icon style
I'm trying to align a table row of form controls, as in this jsbin example:
http://jsbin.com/umeyud/6
I only care about IE8+, recent Firefox and recent Chrome (sorry Safari & Opera!)
While I can get pretty close, I wish I could get the "Label" on the left to align nicely with the first line of all the text displayed on all the other controls.
An added bonus would be to get the checkboxes to be vertically centered to the middle the first line of text.
Here you go. Enjoy!
I needed 4px for IE & Opera, 6px for the others
<!DOCTYPE html>
<html>
<!--
Created using jsbin.com
Source can be edited via http://jsbin.com/umeyud/6/edit
-->
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style id="jsbin-css">
div
{
display: inline-block;
}
body,td,input,select,textarea
{
font: 14pt Arial
}
.multi td
{
white-space: nowrap;
}
.q, .vAlign
{
padding-top: 0px;
vertical-align: top;
padding-top: 4px;
}
table
{
display: inline-table;
}
</style>
</head>
<body>
<table>
<tr>
<td class="q"><div>Label</div></td>
<td class="a text" style='vertical-align: top'><input type="text" value="Hello, World!"/></td>
<td class="a text" style='vertical-align: top'><textarea>Hello, World!</textarea></td>
<td class="a yesno vAlign" style='vertical-align: top'><div><input type="checkbox"/> </div></td>
<td class="a single" style='vertical-align: top'><select><option>Option 1</option></select</td>
<td class="a multi vAlign" style='vertical-align: top'>
<input type='checkbox'/>Option 1<br>
<input type='checkbox'/>Option 2<br>
<input type='checkbox'/>Option 3
</td>
<td class="a picture"><img src="#" width=160 height=120></td>
</tr>
</table>
</body>
</html>
which is almost right on Chrome and firefox but the problem is the position of the submit button on IE if too right than the css. Please check the code and help as soon as possible.
HTML &CSS Code you can find on the link http://jsfiddle.net/7vUW6/
i saw your codings and fix the issues , you had some mistakes accroding to the input box not set the proper width.
Then the submit button is also i fix the issues and i check all the browers now alignment is correct.The edit coding as follows. please copy this code and run your system.
complete codings:
<!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>Customer Advance and Project Registration System | Ymoff Technologies Pvt. Ltd.</title>
<meta name="description" content="This is Project Registration and Customer Advance Payment Recept System designed and developed for Ymoff Technologies." />
<link type="text/css" rel="stylesheet" href="stylesheets/style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script src="js/jquery-1.6.4.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form1").validate();
});
</script>
<script type="text/javascript">
function clearThis(target){
target.value= "";
}
</script>
<script type="text/javascript">
function autoGrow (oField) {
if (oField.scrollHeight > oField.clientHeight) {
oField.style.height = oField.scrollHeight + "px";
}
}
</script>
<style>
/*-- Reset CSS --*/
.wraper{
width:70%;
margin: 0px auto;
padding:0;
}
#field {
}
#ftext{
font-family: 'Capriola', sans-serif;
}
#btext{
font-family: 'Quando', serif;
font-weight:400;
}
#space{
padding-left:5%;
}
.submit{
padding-left:54%;
padding-right:60%;
clear:both;
}
#value{
color:#999;
}
textarea {
resize: none;
}
#noscrollbars {
overflow:hidden;
}
#inform{
color:#C00;
font-size:12px;
text-align:justify;
}
select{
color:#00F;
}
textarea{
border-right: #a9a9a9 1px solid;
border-top: #a9a9a9 1px solid;
border-left: #a9a9a9 1px solid;
border-bottom: #a9a9a9 1px solid;
color:#00F;
}
#show1{
color:#10e684;
font-size:18px;
font-weight:600;
}
#show2{
color:#9e2a28;
font-size:18px;
font-weight:600;
}
#show3{
color:#9e2a28;
font-size:10px;
}
fieldset{
width:400px;
padding-top:5px;
}
legend{
font-family: "Quando", serif;
}
.umame
{
text-align:right;
float:left;
padding-bottom:5px;
padding-right:8px;
}
.umame1
{
text-align:left;
float:left;
padding:0px;
margin:0px;
padding-bottom:5px;
}
</style>
</head>
<body class="wraper">
<div>
<img src="images/dashboardlogin.png" style="padding-top:10px; padding-left:15%;" />
<br />
<br />
<div class="container">
<center>
<br /><br /><br />
<h2 id="btext">Please perfectly enter the following fields :</h2>
<form name="login" action="" method="post">
<fieldset>
<table width="337" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="169" class="umame">
<span id="ftext">Client Registration ID <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="text" name="userid" value="Cleint Registraion ID" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169">
<span id="ftext">Temporary Password <span style="color:#C00;">*</span></span>
</td>
<td width="156" class="umame1">
<input type="password" name="password" value="***************" style="color:#999; width:156px;" onfocus="if(this.value==this.defaultValue){this.value='';}this.style.color='#000';" onblur="if(this.value==''){this.value=this.defaultValue;this.style.color='#999';}" />
</td>
</tr>
<tr>
<td class="umame" width="169"> </td>
<td width="156" class="umame1">
<input type="submit" name="ok" value="Login" />
</td>
</tr>
</table>
</fieldset>
</form>
<table width="337">
<tr>
<td ><span id="inform"><br />
* Marks fields are sent to you by E-Mail when your project has been registered with us. If any how if you lost our mail and want to get your Password, please visit this link Get Password with your YMOFF Registration ID. </span>
</td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
If you want to center it, remove class="submit" and replace it with style="text-align: center;".
That will center the button in the row.
Also for IE, don't forget to specify a DOCTYPE declaration in your markup. Use this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
I have a form which is presented in a table. In the third column, there are 4 rows for selecting the preferred method of contact (radio buttons). I'm currently using a label to write this text in the first row. I'm told, however, it doesn't look as nice as using a custom image.
The image is supposed to sit nicely amongst the form content with an arrow pointing to these radio buttons. I figured the easiest way to do this would be to set a fixed width on the columns then set the table's background image to the image I've been given and position it (with background-position) to where it should sit. With the column widths set, there shouldn't be a problem of alignment.
Any other ideas on how to do this?
My suggestion: instead of putting the background on the table, put the background on a table cell with rowspan=3, meaning it will cover the area to the right of all three radio buttons. Here's an HTML sample illustrating the technique. Note that you'll need to carefully size each column (and the enclosing table) to make sure your image fits in properly.
<!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>
<style type="text/css">
table.contactForm
{
background-color:#EBF3F7;
width:681px;
}
table.contactForm td
{
text-align:left;
padding-top:5px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
white-space:nowrap;
height:25px;
}
table.contactForm td.first
{
width:200px;
}
table.contactForm label
{
padding-left:5px;
}
table.contactForm td.second
{
width:200px;
text-align:right;
}
table.contactForm td input[type=text]
{
width:180px;
}
table.contactForm td.third
{
width:20px;
text-align:right;
}
table.contactForm td.imageArrows
{
background-image:url(background.jpg);
background-repeat:no-repeat;
background-position:left center;
width:261px;
height:78px;
padding:0px;
}
</style>
</head>
<body>
<table class="contactForm">
<tr>
<td class="first"><label for="FullName">Full Name</label></td>
<td class="second"><input type="text" name="FullName" /></td>
<td></td>
</tr>
<tr><td colspan="4"><br/></td></tr>
<tr>
<td class="first"><label for="Phone">Phone</label></td>
<td class="second"><input type="text" name="Phone" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
<td rowspan="3" class="imageArrows"></td>
</tr>
<tr>
<td class="first"><label for="Mobile">Mobile</label></td>
<td class="second"><input type="text" name="Mobile" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
<tr>
<td class="first"><label for="Email">Email</label></td>
<td class="second"><input type="text" name="Email" /></td>
<td class="third"><input type="radio" name="Preferred" /></td>
</tr>
</table>
</body>
</html>