XHTML Page with Form

**andycain** · 05-19-2008, 05:30 PM

Hello everyone,

New here so hi! Having a bit of an issue. Just spent a week writing a fairly complex form handler script (complex considering I started learning PHP 1 week ago!) and rather embarassingly I can't manage something as simple as styling a form using CSS.

I just don't know what's going on. I have an external style sheet in which I've specified all my styles and then I've applied them to the form. It shows correctly in Dreamweaver's design view, however when I upload the files all I get is a default styled form.

It's driving me mad. I'm pretty sure it's something to do with the form area itself because I've placed some test text outside which I styled using the stylesheet and it worked fine.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cadet Emailer</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<form id="form" method="post" action="">
<p> Message </p> <textarea name="textarea" cols="50" rows="8"></textarea>
<p>&nbsp;</p>
<p>&nbsp;</p>
<input type="submit" name="button" id="submitbutton" value="Submit" />
</form>


</body>
</html>

I'm sure it's somethign really simple but this problem has really got me.

URL of the page: www.83sqn.co.uk/emailform.html

Stylesheet: www.83sqn.co.uk/style.css

**bakerc** · 07:34 PM

Hi

The css file, does the a.button refer to anything else or is that for the submit button?

There are a few errors in the CSS file such as

max-width::100%; should be max-width:100%;
(can you not just use width:100%; as I believe max-width isn't fully supported)

border:none;` should be border:none;

It looks like there are a few more errors in their but I didn't go through everyline, if you let us know how you want the form to look we may be able to help more.

**LadynRed** · 05-19-2008, 08:19 PM

Unfortunately, legend is one of those pform elements that is almost impossible to style. The other problem may be that you have the styles applied to #form, yet everything is wrapped inside <fieldset>.

You might want to read thru these articles: http://www.sitepoint.com/article/style-web-forms-css
http://www.456bereastreet.com/archiv...form_controls/

**andycain** · 01:23 PM

I've correct those CSS errors now. Thanks for pointing them out. Despite that however I don't think that would be causing a problem. The only part of the stylesheet that is styling the form are the three bottom CSS id's after the /*Cadet Emailer Form */ Comment.

I'm at a total loss. All I want the form to look like is all the elements centralised, with the field labels aligned and the form elemetns aligned. The strange thing is that everything works fine if I use inline style within the HTML of the form.

I don't want to do it like this though. Defeats the whole point of an external stylesheet. The a.button is for my navigation buttons on the main part of the site.

Appreciate your input.

To really see what I mean...open D/W and create a very simple style sheet with 1 ID in it to style the form. You should find it'll work in the dreamweaver design view but when uploaded it just goes back to default styling.

************************************************** *************************************************

EDIT: SOLVED THE PROBLEM!!! Forgot to close one of my classes with a curly brace. Doh! You lot still helped me by highlighting my CSS errors. Cheers.

**wayfarer07** · 05-20-2008, 02:12 PM

For future reference, I don't recommend that you use Dreamweaver for display purposes. It only causes confusion. The best way to test your code is to hit the F12 button to port it straight into a browser. Dreamweaver has plenty of good features, but one of them is not correct display of documents.