Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

› WebAssist Forums › Archive › Contact Form Solution Pack › Format problems

Format problems

Thread began 1/22/2010 3:44 am by Brendafrank306873 | Last modified 1/23/2010 1:19 pm by neilo | 2674 views | 8 replies |

1/22/2010 3:44 am | #1 Brendafrank306873

Format problems

I made a "contact us" form here: contactus.php I have tested it and the form seems to work OK. My problem is with the layout.

I put the form into a table. I am using Dreamweaver and css style sheets. I can't figure out how to move the table with the form to the left, next to the sidebar, to eliminate the white space on the left. I have the same problem with excess white space following the table.

I would appreciate your help with this. Thanks.

1/22/2010 11:36 am | #2 Jimmy Wu

Why are you putting the form into a table? You shouldn't use tables for layout, that is what CSS is for.

As far as having excess white space below the form, you have set height to 972 on several places in your page. You will just have to reduce those heights.

The horizontal white space is caused by your loggia.css #content section. You have the margin set to 0 0 0 250px; Just reduce the 250px margin to something lower and the white space will go away on the left.

1/22/2010 2:35 pm | #3 Brendafrank306873

Moved form to the left

Thanks, Jimmy, for noticing that the excess margin in the content moved the form to the right. I had used that CSS setting on all the other pages to move the content to the right of the sidebar. The other pages worked fine. The only problem was on the form page. I appreciate your help.

I looked for heights, you mentioned 972, and only found heights for the images. I removed all heights and widths from the table. I don't know where you saw that height.

Yeah, you're right; tables suck. I normally use no tables. However, this form has so many fields that I thought it would be much simpler to put them in a table. This is my first form. The idea of using CSS to format all these fields just for 1 form seemed unnecessarily complicated.

The form is now placed correctly, horizontally. There is still too much white space following the form, but I can't figure why, so I can't figure out how to remove it.

1/22/2010 5:34 pm | #4 Jimmy Wu

It looks like the height that is causing the issue is in the loggia.css as well. It is the element.style section of the css and is causing the excess white space at the bottom.

1/22/2010 8:42 pm | #5 neilo

I think you may just be complicating things for yourself by looking at the css just now, there are html issues that need to be sorted first (for the css to apply to).

It seems that at some point there has been some cutting and pasting that has left duplicate div names and unclosed tags.

Just after the opening body tag you have:

<body>
<div id="outerWrapper">
<div id="header"><img src="image3.jpg" width="700" height="120"></div>
<div id="contentWrapper" class="column">

A couple of dozen lines further down you have:

<div class="column" id="content">
<div id="outerWrapper">
<div id="contentWrapper" class="column">
<div class="column" id="content">

You have some good clean working pages there, I think it may be easier to start with a known 'clean' page and go from there, - the css will probably be fine. If you mess with the css by trying to get it to accommodate this one page, you could end up making it 'break' the rest of the perfectly good ones.

1/23/2010 4:23 am | #6 Brendafrank306873

HTML validation

Hi Neilo,

I think you're right, but I'm unclear about HTML validation on this PHP page. As I said, this is my first PHP form. I try to be careful about validating my CSS and HTML, but this mix confuses me. I validated the "Contact Us" page and found 34 errors and 34 warnings: check?uri=http%3A%2F%2Floggialaw.com%2FtestLoggia%2Fforms%2FContactForm_GMC%2Fcontactus.php&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.654#line-198

Then I validated the contact_styled form that comes with the contact form solution page. I used the pristine page and found 24 errors and 24 warnings! check?uri=http%3A%2F%2Floggialaw.com%2FtestLoggia%2Fforms%2FContactForm_GMC%2Fcontact_styled.php&charset=%28detect+automatically%29&doctype=Inline&group=0

Any thoughts? Thank you for your help. Brenda

1/23/2010 9:16 am | #7 neilo

Hi Brenda,

The glass half-full side to this is that you get 12 less errors than www.google.com.

I'm not the best person to ask about this, - I see W3C validation as something to continually aspire to but not to be a slave to. My order of things is to get my page working in all browsers first, looking and functioning the way I want it to second, and then clean up what I can last.

W3C is more about creating a unified set of standards that both browsers and designers can work towards to make things easier, than it is to dictate what must already be. So I think it's good to test your page, and correct what you can according to the advice, but the thing is to get it working in all browsers first.

1/23/2010 11:50 am | #8 Brendafrank306873

Fixed!

OK. I'm down to 23 errors and 21 warnings on my HTML validation, and those relate to the PHP script!

check?uri=http%3A%2F%2Floggialaw.com%2FtestLoggia%2Fforms%2FContactForm_GMC%2Fcontactus.php&charset=%28detect+automatically%29&doctype=Inline&ss=1&outline=1&group=1&verbose=1&st=1&user-agent=W3C_Validator%2F1.654#line-85

After I fixed some tags, the pesky extra white space disappeared. I think that there were so many little fields with so much script that my html got a little mangled. Thanks for the push in the right direction.

Brenda

1/23/2010 1:19 pm | #9 neilo

Cheers Brenda - glad you got it sorted. Nice one.

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now. Build a store, a gallery, or a web-based email solution.