Form not rendering properly ?

[mdhwoods]

I have a contact form that renders in the proper location in Safari, off a bit in Firefox and completely wacked in ie. I am pretty novice on web design so any help would be appreciated.

here is my form text but i suspect it is something with the css.

<div>     
                	<form action="sendresults.php" method="post" id="Contact form" style="margin:0px; 		font-family:Verdana, Arial, Helvetica, sans-serif;font-size:11px; width:600px;" onSubmit="MM_validateForm('Last Name','','R','Email Address','','RisEmail','Phone Number','','RisNum');return document.MM_returnValue">
                	<INPUT name="Last Name" type="text" id="Last Name" onFocus="if(this.value == 'Last Name') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Last Name';}" value="Last Name" />
                    <INPUT name="First Name" type="text" value="First Name" onFocus="if(this.value == 'First Name') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'First Name';}" />
                    <INPUT name="Email Address" type="text" id="Email Address" onFocus="if(this.value == 'Email Address') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Email Address';}" value="Email Address" />
                    <INPUT name="Phone Number" type="text" id="Phone Number" onFocus="if(this.value == 'Phone Number') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Phone Number';}" value="Phone Number" />

                    <br />
                	<textarea name="comments" cols="45" rows="10">What can I help you with?</textarea>
                    <br />
					<br />
					<input name="Submit" type="Submit" onClick="MM_validateForm('Last Name','','R','First Name','','R','Email Address','','RisEmail','Phone Number','','R');return document.MM_returnValue" /><input name="" type="reset">
                	</form>
                    
           		</div>

and the link to the page

www.dscomputerrepair.com/contact.html

 

[morespce54]

What is wrong exactly?
If you're talking about your form background, then it is something with the CSS...

You have:

#intro, #services {
    background: url("/images/bg.content_home.png") no-repeat scroll 0 0 transparent;
}

Your background image is 335 px high and you specified

no-repeat

in your CSS. Since your form seems to be taller than 335 px and there is no-repeat of the background images, part of your form is not covered by your form background.

HTML page rendering is slightly different in every browser engine (Safari -> Webkit, Firefox -> Mozilla, IE ->.....ms shmock whatever). So to be on the safe-side, you must:

a) design your background image taller/bigger (than the form max height in the lousy-est browser) or
b) specify

repeat-y

instead of "no-repeat" in your CSS *and* remove the height attribute

    height: 335px;

in your

#services > div {
...
}

CSS.




By the way, you're always better to avoid dot (period) within a file/image name (try: "bg_content_home.png" insted of "bg.content_home.png" next time or you'll might end up with some trouble on some servers)

 

[mdhwoods]

Thanks for the advice, ill take a look at it later. When i loaded it in ie7 the form input fields were completely below my background instead of on it. in safair they are perfect.

If you look at the attached image, the form info should be left justified even with the picture. not below like it is.

2nd image is firefox, almost right but just a tad bit low.

3rd image is safari.

 

[morespce54]

Safari's engine (Web-kit) tend to be better at guessing what you're trying to achieve... Although, that's not (that) good because it will let you think that there's no problem with your code (HTML/CSS) when in fact, there is (other browsers shows it).

For IE, the browser try to put every "input" of your form on the same line... That's because you wrote it that way! As a good-practice, you should always put a <BR> (or use CSSs "float" attribute) to tell the browser that "Email" and "Phone number" inputs are on a different line than "Last Name" and "First Name".

So you could go with (the easiest way):

...
<input type="text" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if(this.value == 'First Name') {this.value = '';}" value="First Name" name="First Name">

<br />

<input id="Email Address" type="text" value="Email Address" onblur="if (this.value == '') {this.value = 'Email Address';}" onfocus="if(this.value == 'Email Address') {this.value = '';}" name="Email Address">
...

In fact, the browser (IE) doesn't have enough space to do put every inputs on the same line, therefore the browser put the elements below your right div, where there is enough space.


As for Firefox vs. Safari, I think the previous comment (about removing the "height" attribute and make a taller background image with "repeat-y") should work.

EDIT:
If you don't want the "Submit" and "Reset" buttons to be on your background, just play with the height of your images used for the background and with the height/padding of your "intro-right" div, you might not even need to play with "repeat-y" attribute
/EDIT

 

[mdhwoods]

Thanks again for the suggestions. Unfortunately changing the few things also mess up my index.html.

I must say i am not the one that designed the site. A good friend of mine did. He is just to busy to fix a few things so it is up to me to do it. I have the form looking proper in ie now, it just sits below the background instead of on it like it does in safair, and firefox. I tried a few other things but just cant seem to get it where it needs to be. Messing with the few things you suggested in the css breaks the nav on the main page.

Any other suggestions are appreciated.