How to remove white space at the top of my form? - html

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;
}

Related

HTML Table Centering

I am having trouble centering my table in html as I am trying to create a web page for a class.
This is what I have entered into html:
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
However, whenever I try to add 'align' and 'width' in the attribute, it only affects my width. It doesn't center the table.
Does anyone know of a way to both center the table in the page while applying width?
Thank you. I can provide the markup of my html page if needed.
Try this:
<table style="margin:0px auto; width:500px">
However align is obsolete so you may try this:
table {
width:500px;
margin: 10px auto;
}
ie, give width to your table and set margin auto horizontal
just add this to your table
table {
text-align: center;
}
Live Demo
try to put it inside
<p align="center">
<table align="center" width="50%">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</p>
Enclose your table in a wrapping div:
<div class="wrapper">
<table>
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div>
And then in your css file (if you want to centre the text too):
table {
text-align: center;
width: 50%
}
.wrapper {
margin: 0 auto;
}
You can't center an element without defining the width of its outside container. Let me show you a better way to set it up.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#outside-container {
width: 100%;
}
#form-container {
width: 50%;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="outside-container">
<div id="form-container">
<table align="center">
<tr>
<td><b>Resume:</b></td>
<td>Click here to download my resume.</td>
</tr>
<tr>
<td><b>LinkedIn:</b></td>
<td>Click here to open my LinkedIn profile.</td>
</tr>
</table>
</div> <!-- CLOSE #form-container -->
</div> <!-- CLOSE #outside-container -->
</body>
</html>

Not able to keep table border color to white in IE

I have created simple table inside a table with border
//Top Table
<table border="5" bordercolor="#36C1DF" class="topCss" >
//rest table
<tr>
<td>
//This table Border is the problem in IE
<TABLE class="innerCss">
</td>
</tr>
// And my below are css settings
.topCss
{
border-collapse: separate;
border-style: solid;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
}
.innerCss
{
border:2px solid #ffffff;
}
Actually above table border color white is working fine in Chrome and FireFox but in IE is actually looking black insted of white color.
Please help how to get white color border in IE-9
I'm no expert but I'd suggest that you skip HTML styling and use CSS (preferably not inline):
<table style="border: 2px solid #fff;">
//rest table
Note: Remove the border and bordercolor HTML attributes.
use css:
table{
border:2px solid #ffffff;
}
If you want td color white also , then add this code more:
table tr td{
border:2px solid #ffffff;
}
Try these total code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{
background:#000;
color:#fff;}
.topCss
{
border:5px solid #36C1DF;
border-collapse: separate;
border-style: solid;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
}
.innerCss
{
border:2px solid #ffffff;
}
</style>
</head>
<body>
<!--
//Top Table-->
<table class="topCss" >
<!-- //rest table -->
<tr>
<td>
<!-- //This table Border is the problem in IE-->
<TABLE class="innerCss" >
<tr><td> cell 1 </td> <td>cell 2</td></tr>
</TABLE>
</td>
</tr>
</table>
</body>
</html>
May be it will help you :
<!--
//Top Table-->
<table class="topCss" style="border: 5px solid #36C1DF;" >
<!-- //rest table -->
<tr >
<td >
<!-- //This table Border is the problem in IE-->
<TABLE class="innerCss" style="border: 2px solid #fff;" >
<tr ><td> cell 1 </td> <td>cell 2</td></tr>
</TABLE>
</td>
</tr>
</table>
Please udate your code with
<table bordercolor='white' style="border-style:none;">
please remove border='2'. Try this, should work

Outlook footer + HTML + CSS - how to do it so it would work?

I have a big problem with creating a HTML footer for my dad's firm. They are using OE and Outlook 10. I've working on the code for very long, but still I have some problems. Can I use external font? How should I make it working? How about positioning it with width: X% ?
I would like it to look like this:
But it doesn't...
Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>www.k#$#$#$#$#$#$#$.com</title>
<style>
#font-face {
font-family: times_Sans_Serif;
src: url('http://a#$#$#$#$#$#$#$.pl/tem/TIMESS_.ttf');
}
p, a, span {
font-family: times_Sans_Serif;
}
a {
text-decoration:none;
}
.header {
width:100%;
height:5px;
display:block;
background-color:#6d5759;
}
.section li{
float: left;
display: inline;
list-style-type: none;
margin:0% 3%;
padding:0;
position:relative;
}
.section p{
display:block;
text-align: left;
color:#6d5759;
}
.section a{
color: #6d5759;
}
#logo {
text-decoration:none;
text-align: right;
}
.footer {
clear:both;
font-size:11px;
width:100%;
height:auto;
display:block;
background-color:#6d5759;
color:#FFF;
text-align:center;
padding: 5px;
}
.footer a{
color:#FFF;
}
</style>
</head>
<body>
<div class="main">
<div class="header"></div>
<ul class="section">
<li id="osoba">
<p>
Marcjusz K#$#$#$#$#$#$#$<br>
+48 500 000 000<br>
marcjusz#k#$#$#$#$#$#$#$.com
</p>
</li>
<li id="logo">
<img src="http://#$#$#$#$#$#$#$.pl/tem/image001.png">
</li>
</ul>
<div class="footer">
<span> K#$#$#$#$#$#$#$ Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET1 | 32-700 Bochnia ul. STREET2 | 32-800 Brzesko ul. STREET 3 | www.kr#$#$#$#$#$#$#$.com</span>
</div>
</div>
</body>
</html>
Can you help me with that? I would be very helpful!
Style sheets are NOT supported by most mail clients. Some inline styles are allowed. Positioning is generally NOT supported to prevent emails from escaping their containers - imagine an email trying to spoof a Gmail menu or something like that.
In general:
use tables for layout
use inline styles
For a good guild to what is supported, see:
http://www.campaignmonitor.com/css/
emails are weird in that you almost need to use html from 10 years ago to make it work properly. A lot of clients strip out most of the things in the head (including the actual body tag). This includes gmail, yahoo, hotmail etc. They keep only certain things. Some keep the styles, but not all.
I suggest you move your styles away from the head and inline them inside the tags using the style="" property and use tables (think back to the 90s)
so you might have something like this:
<table width="100%">
<tr>
<td id="osoba" style="">..Osoba...<td>
<td id="logo" style="">..logo..</td>
</tr>
<tr>
<td id="footer" style="">...footer...</td>
</tr>
</table>
note: I put the id's there for clarification purposes but since we stripped out your id's, they are not necessary.
I've done it! It looks as I wanted. ;) It was kind of mental pain for me to make layout using tables, but it works! ;P Thanks for help!
Here is the code for anybody who has similar problems:
<html>
<head>
<meta charset="utf-8">
<title>www.#¤#¤#¤#¤#¤#¤#¤#¤#.com</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td colspan="4" style="width:100%; height:5px; background-color:#818285"></td>
</tr>
<tr style="color: #818285;" align="center">
<td width="20%"></td>
<td align="right" width="24%">
<div style="text-align:left; width:180px; right:0%; color:#818285;">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/o-nas" target="_blank">Marcjusz K#¤#¤#¤#¤#¤#¤#¤#¤#</a><br>
+48 500 000 000<br>
<a style="color:#818285; text-decoration:none;" href="mailto:marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com">marcjusz#k#¤#¤#¤#¤#¤#¤#¤#¤#.com</a>
</div>
</td>
<td align="center" width="4%" style="font-size:2em; color:#818285;"></td>
<td align="left" width="52%">
<a style="color:#818285; text-decoration:none;" href="http://k#¤#¤#¤#¤#¤#¤#¤#¤#.com/" target="_blank"><img src="http://#¤#¤#¤#¤#¤#¤#¤#¤#.pl/tem/logo-poziom300.jpg"></a>
</td>
</tr>
<tr><td colspan="4" style="font-size:11px; background-color:#818285; color:#FFF; text-align:center; padding: 5px; ">
<span> K#$#$#$#$#$#$#$# Ubezpieczenia Sp.J. | 31-475 Kraków ul. STREET 6a | 32-700 Bochnia ul. STREET 14 | 32-800 Brzesko ul. STREET 3 | <a style="color:#FFF; text-decoration:none;" href="http://k#$#$#$#$#$#$#$#$#.com/" target="_blank">www.k#$#$#$#$#$#$#$#.com</a></span>
</td></tr>
</table>
</body>
</html>

Website works in firefox but not in chrome or safari. Navigation row does not line up correctly in chrome and safari

Below is my code for my website. It works perfectly on firefox but not in chrome or safari. The only thing that doesn't work is the navigation row displays to the right of the header picture and the home button is the full length of the header picture. I think it has something to do with the display:inline in the css but I'm note sure.
<html>
<head>
<title>Workouts</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id = "page">
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
<tr class = "nav" height="30px" width="100%">
<td></td>
<td>Home</td>
<td>About</td>
<td>Workouts</td>
<td>Trainers</td>
<td>Contact</td>
<td></td>
</tr>
<tr class = "content" width="100%">
<td><img width="100%" src="images/content.png" /></td>
</tr>
</table>
</div>
</body>
</html>
This is my stylesheet
* {
margin-top:0;
padding-top:0;
padding-bottom: 0;
margin-bottom: 0;
}
body{
background:pink;
}
.border{
background-color: #c92f51;
}
.nav a{
text-decoration: none;
color:pink;
}
.nav a:hover{
color:gray;
}
.nav td{
display: inline-table;
width: 14.29%;
height="30px";
text-align: center;
font-size: 24px;
color:pink;
}
tr .content{
background:#c92f51;
}
.content td{
background:white;
padding: 30px 30px 30px 30px;
}
Invalid mark-up without DOCTYPE declaration. Check your code by copy/paste in w3c validator check the errors.
Every table row has to have the same number of columns. If you don't, you need a colspan attribute to make up for it.
Also you should not have <div> tags directly instead a table. How browsers handle these types of errors is not very consistent, so it's best to fix them. Try changing:
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<div id = "header">
<tr>
<td>
<img src =images/header_logo2.png />
</td>
</tr>
</div>
To
<table border="0" cellspacing="0" cellpadding="0" align="center" class="border" width = "50%" height ="100%">
<tr id = "header">
<td colspan="7">
<img src =images/header_logo2.png />
</td>
</tr>
And also add the same colspan on the last row:
<tr class = "content" width="100%">
<td colspan=7><img width="100%" src="images/content.png" /></td>
</tr>
More generally, using tables for layout like this is not good practice nowadays. If you search google for "css layouts vs tables" you can find out a lot more about it.
Use a validator. Your HTML is invalid and at least one of your errors causes significant differences in how different browsers error recover from it.
Some will move the <div> that is a child element of the <table> so it is outside the table (because it isn't allowed there).
You don't have any tabular data in there, so get rid of all the table markup and use something more appropriate (e.g. a list for your list of links and so on).

HTML CSS Table Background

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>