...

View Full Version : Table Layout: Great; Table-less: Messed Up



vinyl-junkie
12-26-2006, 08:39 AM
I have a contact form that was made using tables. I'm trying to build a table-less version and having problems. The left- and right-hand sides of the table version align well, no matter what text size you use. However, I can't say the same thing about my table-less version. Can someone tell me how to fix it?

Table version:
http://www.napathon.net/sphider/search.php

Table-less version:
http://www.napathon.net/test/test.htm

VIPStephan
12-26-2006, 01:16 PM
Yeah, that's the advantage of tables. You put content in a cell and all cells in a row or column stretch equally wide.

I'd suggest using faux columns (http://alistapart.com/articles/fauxcolumns/) for that. You apply a background image to the searchform div, 1px high and as wide as the .searchform with the left part blue color and the right part has this grayish color, remove the background color for .searchform1 in the CSS, and it should look neat immediately. :)

Some observations and side notes:

You forgot a period in the CSS for the .searchform.
You forgot a unit (px) for top in the above mentioned rule.
I suppose the CSS goes into an external file eventually but currently your style element is missing the type attribute with the appropriate value.
Your markup ain't gonna be valid until you remove the name attributes from the inputs. (I wonder if ASP or PHP can process forms without these because I always hear that they are needed?)


Hope I could help. :)

vinyl-junkie
12-27-2006, 02:19 AM
Well, I'm closer, but still no joy. I have a new version (here (http://www.napathon.net/test/table-less.htm)), which looks great in Firefox but still has problems in IE7. Why is that purple border going all across the bottom right area of my form in IE7? How do I make this look like it does in FF?

p.s. - I fixed items 1, 2 and 3 on your list. I believe the name you mentioned in item 4 is needed by PHP. Note that the page validates with that in there.

No wonder some people cling doggedly to tables! :p

_Aerospace_Eng_
12-27-2006, 03:38 AM
I think you mean blue border. Add this to your CSS

form {
margin:0;
padding:0;
}

vinyl-junkie
12-27-2006, 03:55 AM
Thanks, Aero! :thumbsup: That worked like a charm.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum