Opinions, Testing and Fixing Help

[ChrisBull]

I have created a very basic page for you all to view and give your opinions of and hopefully help me improve/fix it.
At the moment i think it looks fine (in chrome). It’s the troublesome ie that’s giving me problems.

So could you please view the page (Just a login form) and say what you think about it, what browser and os you’re using and compare it to this image which is what it’s meant to look like.

Then if your feeling EXTRA helpful could you help me try and get it looking decent in ie and fix these validation errors that I don’t understand.
Validation ErrorsThey all seem to be the same type of error and i don’t know how to fix it.
CSS File

And Here is the Page

Thank You So Much For Reading.
Chris

[DogsGhost]

Strict doctype is giving those errors. Input as direct child of form is valid under Transitional doctype.
I didn’t get any kind of validation for the fields, just typed in gibberish and got an !alert saying it was sent, then was redirected back to the login form. FF4/Safari5/Opera11/Mac. Thumbs up for turning an image into html/css…

[ChrisBull]

Thanks for the replies,
I am definitely not going to just reply on JavaScript to validate the form, in fact all that JavaScript is doing is checking that the fields are not empty, I will then use Ajax to send the data to a php file for proper validation, and then yes, the error code will be populated with correct feedback from php. I just wanted to get feedback and fix the errors it already has before moving on.
I know that I should not normally have a login form that will not function if the user does not have JavaScript enabled but the site I’m creating is only for people with it enabled so there’s not a problem there, in fact I have to keep people without JavaScript enabled from being able to press the button…

[ChrisBull]

OK, i put the form elements inside a div, put the JavaScript into an external file and it now validates but not the jquery functions are not working for the input boxes, but are working for the window resize and curved corners… Any Ideas?

[DogsGhost]

The jscode.js file looks like where the rounded corners and window resize is, and that works fine.
Where’s the validation script? in the jfile.js file? There’s nothing in there telling it what to display for invalid fields. Its incomplete script.
Why doesn’t the placeholder text doesn’t disappear with I click in a field?

[ChrisBull]

jscode.js is for rounded corners
jfile.js (im not creative with file names) – is for everything else so it;
– Moves the box around when the window resizes (working)
– Validates the input and displays the error divs (working)
– Changes the css and removes the contents of the input fields when clicked on (not working)
It was all working before i moved the script to an external file.

[ChrisBull]

OK All the javascrip is working and it still validates – Just need help converting for ie

[TT_Mark]

I never knew inputs couldn’t be a direct child of a form! Learn something new every day!

In any case, why do I get inline CSS for rounded corners in Safari? You should be targeting IE6-8 only for the JS rounded corners and doing IE9, Safari, FF, Chrome etc with border-radius CSS

[ChrisBull]

I’m not sure what you mean, At the moment I am using a jquery plugin for all rounded corners. It doesn’t work with any ie lower that 9.

[TT_Mark]

Your JQuery plugin is for generating rounded corners in browsers that do not natively support rounded corners i.e. Internet Explorer 6-8.

However, the way you have coded your site means that all browsers’ rounded corners are being generated by JavaScript. This is not a good thing as the plugin is not 100% foolproof. You should really be using CSS in FF, Safari, Chrome and IE9 and then wrapping the JQuery corners plugin inside IE conditional comments to target IE6-8

e.g.

input[type=text]

{

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

and then wrap your corners plugin inside

[ChrisBull]

OK iv’e decided to get rid of the plugin altogether, it doesn’t look that bad without rounded corners.
Iv’e added the css for rounded corners that you gave me which works but doesn’t validate, is there a way to get around this without going back to the plugin?

[TT_Mark]

Apologies, you don’t need a -webkit prefixed one as border-radius is supported in Webkit browsers without a vendor prefix.

Validation isn’t the end of the world. You cannot use the latest technologies and have valid CSS because of all the vendor prefixes. If you let that put you off then you might as well give up now!

Try validating the Hardboiled Web Design site, website for one of the forefront books in CSS3 webdesign. It doesn’t validate…Does it matter? Not in the least bit

[Author]

Posts