Forms: Examples of using CSS instead of tables needed.

@BaronsFeb 21.2011

Hello,

I’ve got a few forums that I’d like to rebuild with css. Currently I’m using tables on them. I’m having a lot of trouble with it because all the examples of css forms I’m finding online are breaking my page. It seems like all the ones I’m finding are built to be a page of there own and I’m trying to put all of my forums in php files and include them into my site. The main reason I’ve decided to rebuild them is because of a false error i’m getting in the html validation. All my forms are on their own page as you can see below.

~~[url]~~http://www.wararmada.com/tdb/assets/php/search.php[/url]
~~[url]~~http://www.wararmada.com/tdb/assets/php/submit.php[/url]
~~[url]~~http://www.wararmada.com/tdb/assets/php/contact.php[/url]

I’ve included them into my site using php code here.

~~[url]~~http://www.wararmada.com/tdb[/url]

The validation page isn’t seeing any of the php code and its under the impression that I’ve used unique id’s multiple times on the same page when really I haven’t.

So as for the css forms. Do any of you know of some examples of forms that are standalone? I’m not a pro or anything close and its really hard for me to strip out all of the “just for looks” code in the examples i’m finding. I’ve already done all the styling I just need to see how the meat of the forum css works.

Thanks for the help.

to post a comment

CSS

7 Comments(s) _↴

@KorFeb 21.2011 — #
I've included them into my site using php code here.

http://www.wararmada.com/tdb

The validation page isn't seeing any of the php code and its under the impression that I've used unique id's multiple times on the same page [COLOR="Red"]when really I haven't[/COLOR]..[/QUOTE]
Which really you have. There are pairs of elements with the same id. For instance you have two elements with the same id="habitat_0", one at line: 102, one at the line: 484. And so on with all your "habitat_[I]N[/I]", or most of them.

You have also some other HTML errors.

- You have placed a hidden input file [I]outside[/I] any form. It will send nothing onsubmit. And it is not to be found with classical reference, as it belongs to no form.

- Your document has not a proper written Doctype. I guess you should use:

<i>
 </i>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;

@BaronsauthorFeb 21.2011 — #I was really just trying to figure out how to set this up with css. I'm not sure how the layout should work.

But as for the other stuff if you can help me get that sorted it would be great. I didn't know there were other problems. The validation page I'm using wasn't showing them.

Which really you have. There are pairs of elements with the same id. For instance you have two elements with the same id="habitat_0", one at line: 102, one at the line: 484. And so on with all your "habitat_N", or most of them.
[/QUOTE]

I'm not sure you getting what I mean. The forms are on their own page. I can include them any one of the forms in my site alone and its valid. its only showing that the unique id's have been used more than once because the html validation page is viewing all of the code as if it were on one page instead of how it really is. A main page then 3 other pages for the forms.

It only shows as not being valid when they are all 3 included at the same time. If you can explain what your taking about a little better it might help me get what you mean.

You have also some other HTML errors.

- You have placed a hidden input file outside any form. It will send nothing onsubmit. And it is not to be found with classical reference, as it belongs to no form.
[/QUOTE]

That's not an error either. It's a bit of code used in my style to get my menus working.

[CODE]<div><input type="hidden" name="last_shown" id="last_shown" value=""></div>[/CODE]

Is this wrong? If so do you know how I can fix it? It's not showing up as an error on the validation I'm using.

- Your document has not a proper written Doctype. I guess you should use:
[/QUOTE]

That wasn't showing up as an error on my validation page either. Do you know why mine was wrong? It looks like the only difference in what I had is you added in a link to some website. I don't really want to link to someone else's page for no reason.

@BaronsauthorFeb 22.2011 — #I fixed the id tags and added your link to my doc type, but I still can't find anything about my imput tag. I've looked on a number of different html validation programs and nothing is showing that its wrong. I've used dreamweaver, http://validator.w3.org, and http://htmlhelp.com/tools/validator/

Also none of those validators showed my doc type is being wrong either. Are you sure I need that link in there?

I get the feeling that using tables was not the issue?

@KorFeb 22.2011 — #OK, so that, if you will write your inputs in HTML strict syntax ([COLOR="Blue"]<input>[/COLOR] - without the slash), not as XHTML syntax (<input[COLOR="DarkRed"] /[/COLOR]>), your document will complete the validation.

Any other problem?

@BaronsauthorFeb 22.2011 — #Yes. I'm not sure if I've used tables correctly or not. Do I need to rebuild my forums with css or is this a good use of tables?

Also what validation are you using? I don't know which <imput> is having the issue.

Thanks

@KorFeb 22.2011 — #

1. Tables are valid anyways. There's a debate around whether to use DIVS and CSS float or TABLES, but from the point of view of the HTML or XHTML syntax correctness, TABLE and TABLE's elements are perfect legitimate and valid. There is no need to change them by all means.

2. Regarding the why some tags like INPUT have to be written in different Doctypes, read:

http://www.w3schools.com/xhtml/xhtml_html.asp

and

http://www.w3schools.com/tags/tag_doctype.asp

So, depending on which Doctype you want to use, you must code accordingly. You have an HTML Doctype, thus you should code as in HTML (<input>) not as in XHTML (input />). Understood?

@BaronsauthorFeb 22.2011 — #Nice!

Thanks so much for all the help. I think I got it sorted ?

Also in #CSS _↴

Problems Centering Horizontal Nav bar. Please help.UL horizontal Navbar, order reversed?DIV / Table conflict

Success!

Help @Barons spread the word by sharing this article on Twitter...

Tweet This

Forms: Examples of using CSS instead of tables needed.

7 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Forms: Examples of using CSS instead of tables needed.

7 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #CSS _↴