|
|
|
Lately I have been using the W3C validator (http://validator.w3.org/) to check the validity of my pages. Aside from the obvious benefit of conformance to the W3C Recommendations I'm learning new things about how HTML needs to be written and how it's different from what I thought should be.
Specifically to this example I was always sure that the correct way to combine a form with a table was :
| [code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<table width="100%" BORDER="1">
<FORM ACTION="">
<tr>
<TD>
<SELECT NAME="">
<OPTION VALUE=""></OPTION>
</SELECT>
</TD>
</tr>
</FORM>
</table>
</BODY>
</HTML> | |
This always worked for me and I never saw any problem using forms this way With IE nor FireFox so I was sure I was OK. When I started to check my site The validator indicated the following error : document type does not allow element "FORM" here.
So I started playing with the location of the FORM tag and found out that the HTML should really look like this :
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML DIR="RTL">
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</HEAD>
<BODY>
<FORM ACTION="">
<table width="100%" BORDER="1">
<tr>
<TD>
<SELECT NAME="">
<OPTION VALUE=""></OPTION>
</SELECT>
</TD>
</tr>
</table>
</FORM>
</BODY>
</HTML> | |
This HTML is valid HTML 4.01 Transitional code but this is also where my problem started. As soon as I took the FORM tag out of the area between the <TABLE> and the <TR> IE added an empty line
bellow the form which defaced the way the page looked. The big surprise was that FireFox ignored this and showed the page OK. It's usually FireFox that does not allow to make HTML mistakes.
To make a long story short, what needs to be done is this :
| | <FORM ACTION="" STYLE="DISPLAY:INLINE;"> | |
Adding the "DISPLAY:INLINE" STYLE solves the extra line in the HTML.
In the newer browsers you can also try this instead :
| | <FORM STYLE="margin-bottom: 0"> | |
I hope this helps someone :) |
|
| How to keep your tables width stable even if you have long strings inside.
Categories : CSS, Web Browsers, HTML, Beginner Guides | | | Rollover Image link effect using only single image.
Categories : Web Design, HTML, CSS, Beginner Guides | | | Show or Hide your Content using Javascript
Categories : Java Script, HTML, CSS, Beginner Guides | | | CSS Buttons Styles
Categories : CSS, HTML, Beginner Guides | | | Simple Javascript CSS Digital Clock
Categories : Java Script, Date Time, CSS, Beginner Guides, Web Design | | | Why it is not possible to preset a value in a file upload field
Categories : HTML, Security, Filesystem, Beginner Guides | | | How to preset a text string in a textarea input field
Categories : HTML, HTML and PHP, PHP, Beginner Guides | | | CSS Vertical Navigator , With Coll CSS Look
Categories : CSS, Web Design, Beginner Guides | | | An example of how to place elements on the footer of a page with CSS/HTML so that the elements are always on the bottom, regardless of the client resolution.
Categories : HTML, CSS, Interfaces | | | Javascript Background Scroller
Categories : Java Script, CSS, HTML | | | Kewl Date Example
Categories : PHP, HTML and PHP, Date Time, CSS, Beginner Guides | | | CSS Container BOX , with cool CSS Design
Categories : CSS, HTML, Web Design | | | Javascript animated menu items
Categories : DHTML, CSS, Java Script, HTML | | | Conditional Check - a script that allows a user to submit a form only if the user check a checkbox.
Categories : HTML, Java Script, Form Processing, Beginner Guides | | | How to make a scrolling Div
Categories : HTML, CSS | |
| | | | Ron Rutten wrote :1369
Just put this in your CSS file:
form {
margin: 0px;
}
| |
|
|
|
