HTML - Problem With Placement Of Submit Button ?
Hi:
This is with reference to my developing website: www.mesaeastpark.com Using MS Internet Explorer Version 7, I have no difficulty placing my Submit and Reset buttons with 'Position: absolute;' in my chosen position. However, when I check the same page with Opera, Safara, Chrome, and Firefox, those same buttons appear much higher on the page and obscure another input field This is very puzzling. To access the problem page: Please access my website, then - Click on 'Visit Us' - Cllick on 'Real Estate Services' - Click on 'Rent out Your Home' - Note the placement of the 'Submit' and 'Clear' buttons. In IE, they appear correctly: stacked vertically to the right of the <textarea> element In Opera, Firefox, Chrome, and Safari, they appear far higher on the page, obscuring other input fields ( I will include below the markup for this page: Thanks for any hints on this puzzle ! (btw, I use Apache 2.10 on my own server beside me) -Mel Smith ********************************************************* Content-Type: text/html <?xml version="1.0" encoding="utf-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Rent Out Your Mesa East Home</title> <style type="text/css" media="screen"> body { background: yellowgreen; } div { position: absolute; background: yellow; padding: 5px; width: 260px; height: 120px; } div#top-left { top: 1px; left: 1px; height: 82px; font-size: 12px; border-right: 1px solid black; border-bottom: 1px solid black; } div#top-right { top: 1px; right: 1px; height: 82px; font-size: 12px; border-left: 1px solid black; border-bottom: 1px solid black; } div#rentinfo { position: absolute; height: 400px; width: 900px; top: 94px; background: yellowgreen; padding: 5px; } div#buttons { position:absolute; left: 710px; top: 305px; width: 160px; height: 70px; color: black; background: yellowgreen; } input#frentsubmit { position: absolute; top: 10px; color: black; background: lightgrey; } input#frentreset { position: absolute; top: 50px; color: red; background: lightgrey; } fieldset { border: 1px solid black; } legend { margin: 0px; padding: 5px; color: darkmagenta; } input { background: wheat; } textarea { background: wheat; } input#fdetail { width: 480px; height: 120px; background: lightgrey; } td.empty { width: 10px; background: yellowgreen; } </style> </head> <body> <h2 align="center"><u>Rent Out Your Mesa East Home</u></h2> <div id="top-left"> <u>Deed Restrictions for Rentals</u><br /> No owner of any property in Mesa East POA shall rent that property or any part thereof unless and until the owner has maintained ownership for a continuous period of at least two (2) years. </div> <div id="top-right"> <u>Renter's Responsibility</u><br /> Ensure that the sum of $5.00 per month (or $50 per year) is paid to the Treasurer or Office Clerk for each person living in the rental property. (Visit the Office for Complete Renter's Rules) </div> <div id="rentinfo"> <form id="rentform" name="frmmenu" action="/cgi-bin/mep/mepinit.exe" method="post"> <input type="hidden" id="mformname" name="formname" value="RENTFORM" /> <fieldset> <legend><b>Owner and / or Agency Information</b></legend> <table id="continfo"> <thead> <tr> <td align="right"> Owner's and/or Agency's Name </td> <td class="empty" width="4"></td> <td align="right"> Contact Phone nnn-nnn-nnnn </td> <td class="empty" width="4"></td> <td align="center"> Email and/or Website Access </td> </tr> </thead> <tr> <td align="right"> <label for="fcontact">Owner : <input type="text" id="fcontact" name="contact" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fcontphone">Phone : <input type="text" id="fcontphone" name="contphone" size="12" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fcontemail">Email : <input type="text" id="fcontemail" name="contemail" size="40" /></label> </td> </tr> <tr> <td align="right"> <label for="fagency">Agency : <input type="text" id="fagency" name="agency" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fagencyphone">Phone : <input type="text" id="fagencyphone" name="agencyphone" size="12" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fagencyurl">Website : <input type="text" id="fagencyurl" name="agencyurl" size="40" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Home Description</b></legend> <table id="homeinfo"> <tr> <td align="right"> <label for="fstyle">Style (D/W,S/W,etc) : <input type="text" id="fstyle" name="style" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fbdrms">Bedrooms : <input type="text" id="fbdrms" name="bdrms" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fbaths">Baths : <input type="text" id="fbaths" name="baths" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fsqft">Size (sqft) : <input type="text" id="fsqft" name="sqft" size="4" /></label> </td> </tr> <tr> <td align="right" colspan="3"> <label for="faddress">Address : <input type="text" id="faddress" name="address" size="32" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="flotno">Lot No. : <input type="text" id="flotno" name="lotno" size="4" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fyrbuilt">Year Built : <input type="text" id="fyrbuilt" name="yrbuilt" size="4" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Rental / Lease Pricing & Terms</b></legend> <table id="priceinfo"> <thead> <tr> <td align="center"> $USD Cost for Period </td> <td class="empty" width="4"></td> <td align="right"> (Wk/Mth/Yr) </td> <td class="empty" width="4"></td> <td align="right"> StartDate: yyyymmdd </td> <td class="empty" width="4"></td> <td align="right"> EndDate: yyyymmdd </td> <td class="empty" width="4"></td> <td align="right"> Min Occ (e.g., 7 Wks) </td> </tr> </thead> <tr> <td align="right"> <label for="fprice">Cost ($ USD) : <input type="text" id="fprice" name="price" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fduration">per : <input type="text" id="fduration" name="duration" size="5" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fstdate">Available on : <input type="text" id="fstdate" name="stdate" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fnddate">Not Available after : <input type="text" id="fnddate" name="nddate" size="8" /></label> </td> <td class="empty" width="4"></td> <td align="right"> <label for="fmintime">Minimum : <input type="text" id="fmintime" name="mintime" size="9" /></label> </td> </tr> </table> </fieldset> <fieldset> <legend><b>Enter Further Descriptive Details below (max: 254 chars)</b></legend> <textarea rows="4" cols="76" id="fdetail" name="detail"> Replace this line with descriptive features of your home and surroundings.</textarea> </fieldset> <div id="buttons"> <input type="submit" id="frentsubmit" name="rentsubmit" value="'Click' to Submit" /> <input type="reset" id="frentreset" name="rentreset" value="'Click' to Reset" /> </div> </form> </div> </body> </html> Similar TutorialsHello All! I am a newbie to HTML and am having the most troubling time getting my submit button on my form to redirect to another webpage. I have been reading (searching) through previous posts on this issue but none solved my problem. I am really hoping someone can offer some help so let me explain my issue exacly. I have a simple form on my "Contact Us" page with a few fields and a [Submit]button. After the form is filled out and the [Submit] button is pressed, I would like it to re-direct to a "Thank-You" page I created. Below is my code: <form action="gdform.asp" method="post" name="contact_us" id="contact_us" target="cont"> <input name="submit" type="image" value="submit" src="images/Submit.gif"> If I take target="cont" out, it redirects to the home page. I have been trying to figure this out for so long now and searching online with no luck. Any help with this would be GREATLY appreciated!!!! Thanks! I'm having a really weird problem with a standard submit button I'm trying to create. When I preview the site (GoLive CS3) the button doesn't always 'click' or 'depress' down. I can't figure out what is causing this. Anyone here ever seen this happen? Hi newbie here, hope you can help. I need my buttons to be sitting side by side horizontally but not sure what code should be added to do so. At the moment they are sitting vertically. It appears that the </FORM> at the end of each line creates a BR. Here is example of the code, obviously the urls are fictitious <FORM METHOD="LINK" ACTION="http://joebloggs.com/"> <INPUT TYPE="submit" VALUE="sausages"></FORM> <FORM METHOD="LINK" ACTION="http://fredbloggs.com/"> <INPUT TYPE="submit" VALUE="pies"></FORM> <FORM METHOD="LINK" ACTION="jimmybloggs.com/"> <INPUT TYPE="submit" VALUE="meatballs"></FORM> What do I need to edit to enable the buttons to be horizontally placed. Thank you Jim How do I place a label for a radio button above the radio button? I am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button. Here is the code: <FORM name="searchform" onSubmit="return validateSearch();" METHOD="POST" ACTION="search_results_lt.asp"> <INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" > <INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit"> </FORM> **** Thanks for your help, Robin I want to put few ads on the given pciture(Attached) but when i do that then one extra space gets created whcih looks bad. I exactly wanna put ad there. Help me there. I m putting source code of my web site.. you can also check my site at www.nutraforum.com Please tell me how to put code and where so and whcih tag shd be added to get my ad there. I will be greateful if you check the sourc code of my forum. i m not abl to put souce code as forum allows only 10000 char . Hi Could anyone shed some light on why the footer on this page isn't staying at the bottom of the page? Its ok on the other pages so I'm assuming its got something to do with the contact form on the page. http://www.buckleigh.co.uk/contact.asp Here's the css: http://www.buckleigh.co.uk/screen.css Any help greatly appreciated, thanks. Kev Hi! I have exported an flash movie to a html file. The file is located at http://magnetik.eu/files/ratas If move around the menu you will notice that is a line break at the top. Right between the flash file and the top of the browser. Any idea how can I get rid of it? Thank you Ahh this will probably be an easy question for someone to answer and I feel silly asking it. But anyways, I am integrating a site with php and I am not as fluent in html as the former. I need to just have a text that says login and not the actual button. Here is what I have been using <input type="submit" name="wp-submit" id="wp-submit" value="<?php _e('Register'); ?>" /> , how would I get it to just be text? Thanks for answering noob questions i am trying to incorporate a simple submit button with a pop-up window. i am struggling because i can get one or the other to work properly, but not both: popup and submit. any ideas would be greatly appreciated! here's what i'm looking at. </div> </fieldset> <a href="http://www.mycotorra.com/images/almostfinished.png" id="mc_embed_close" class="mc_embed_close" style="display: none;">Close</a> <div style="z-index: 1; width: 160px; height: 42px; position: absolute; top: 70px; left: -96px"> <input type="image" value="Subscribe" name="Sign up now" id="mc-embedded-subscribe" class="style81" style="clear: both;display: block; margin-right: 0;" height="44" src="http://www.mycotorra.com/images/sign%20up%20now%20button.png" width="162"></div> I need help with this html, i need the submit button to email the forms to: mariamarias@hotmail.com instead of redirecting you to another webpage Please help me!!!!!!!!!!!!!!!!!!! Code: Please enter your account number and your password.<BR> <A HREF="?subtopic=createaccount">Create an account </A> if you do not have one yet.<BR><BR> <TABLE WIDTH=100% BORDER=0 CELLSPACING=1 CELLPADDING=4> <TR><TD BGCOLOR="#505050" CLASS=white><B>Account Login</B></TD></TR> <TR><TD BGCOLOR="#D4C0A1"> <FORM ACTION="https://secure.tibia.com/account/?subtopic=accountmanagement" METHOD=post> <TABLE BORDER=0 CELLPADDING=1> <TR><TD>Account number:</TD><TD><INPUT TYPE=password NAME="ACCOUNTLOGIN_ACCOUNTID" SIZE=10 MAXLENGTH=10></TD></TR> <TR><TD>Password:</TD><TD><INPUT TYPE=password NAME="ACCOUNTLOGIN_PASSWORD" SIZE=30 MAXLENGTH=29></TD></TR> </TABLE> </TD></TR> </TABLE> <BR> <TABLE BORDER=0 WIDTH=100%> <TR><TD ALIGN=center><IMG SRC="https://static.tibia.com/images/global/general/blank.gif" WIDTH=70 HEIGHT=1 BORDER=0><BR> </TD><TD ALIGN=center> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD><INPUT TYPE=image NAME="Submit" SRC="https://static.tibia.com/images/global/buttons/sbutton_submit.gif" BORDER=0 WIDTH=120 HEIGHT=18></TD></TR></FORM></TABLE> </TD><TD ALIGN=center> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><FORM ACTION=https://secure.tibia.com/account/?subtopic=lostaccount METHOD=post><TR><TD><INPUT TYPE=image NAME="Account lost?" ALT="Account lost?" SRC="https://static.tibia.com/images/global/buttons/sbutton_accountlost.gif" BORDER=0 WIDTH=120 HEIGHT=18></TD></TR></FORM></TABLE> </TD><TD ALIGN=center> Hi everyone, Is it possible to have a form without a submit button. I know you can use links etc to submit a form but can you just have nothing, so the user just hits the enter key and the form submits ? cheers HI this is the coding im using for my submit button <form method="post" action="mailto:robertjones@redes.co.uk?SUBJECT"?body=(bodystuff)" =User name/Pass"> <input type="submit"..... the task i want it to do is open the email client and put the body as an attachment or in the email text space but after the person filling it out clicks submit all they see is a screen saying "your Feedback form has been submitted, Thank you for your time" When you type your email address into the text field and press submit, nothing happens. Here is my form code. I think everything is right on the database side... I didn't write it, or this, but I need to fix it xD I think the code was written in frontpage (I'm a notepad coder, myself), so there's some garbage in there. Any help would be appreciated. Thanks, Sondra Code: <form method="POST" name="e-newsletter" action="../librarynews-submit.asp"> <p>Email <input type="text" name="email" size="25"></p> <hr> <p> <input type="checkbox" name="teen" value="yes">Check this box if you would also like to subscribe to the QPL Teen Newsletter. </p> <!--<p><select size="1" name="Interest" multiple> <option selected>General</option> <option>Children's Activities</option> <option>Teen Events</option> <option>Adult Programs</option> <option>Book Sale Notification</option> <option>Friends of the Library</option> <option>New Arrivals</option> </select> <font face="Arial">Area of Interest</font></p>--> <p> <input type="submit" value="Submit" name="Submit"> </p> </div> </form> Hi guys, I have a drop down box via the <select> tag and then a submit button next to it. I want it so that if the drop-down shows "page 1" or something and then you hit "submit" it links to page 1. Same for "page 2" etc.. Is this possible, and how can I do it please! Thank you for any replies posted! My submit button, when viewed on browsers different than Internet Explorer, has a weird border that does fit around it. Example: http://bestusedexpress.com/junk_you_car_for_cash.html I can't find any code that causes it to be like that, and i'm sure its not that the image has it already, any help? Thanks Hi all, I'm throwing together a website for a client and am relatively new to contact forms. I managed to get one working and somewhat styled decently, but for some reason the submit button isnt showing up when I upload it, even though it shows up fine when i preview it from my local folder. This happens in both IE and Firefox. and yes, i have uploaded the button graphic as well. heres the code for the button: <INPUT TYPE="image" SRC="images/submit.gif" HEIGHT="33" WIDTH="74" BORDER="0" ALT="Send"> you can view the page live he blue 2 any help would be greatly appreciated! I have the following code but the images do not swap: Quote: <input type="image" name="action" value="Submit" src="{site_url}images/submit_a.gif" class="Button" onMouseOver="document.submit_form.src='{site_url}images/submit_b.gif'; return true;" onMouseOut="document.submit_form.src='{site_url}images/submit_a.gif'; return true;" > The {site_url} replaces the site domain name. I have confirmed the the images exist. Any ideas? Hi guy, Due to my limited knowledge, i had stuck here and hope you guys can guide me along. Let say i have a surveyform.html that is plant into index.htm via iframe. I have limited control to surveyform.html and this surveyform.htm have a submit button. Once this submit button is clicked, it will go to a 'Thankyou.htm'. The problem now is that this thankyou.htm is still plant inside index.htm which i doesn't want it to be. Is there any way that i can change the whole page? Maybe when iframe detect changed of html and the whole page redirect to another page? note: i can't do much to the surveyform.htm I am trying to submit a forum through javascript, but the catch is I want to change the name of the button being sent through the form. Here is what I have here is the javascript function. Code: function form_submit(option) { if (option == 1) { alert("Option1") document.submit_form.DE_WEB_COMMAND.value = "Login"; document.submit_form.submit(); } else if ( option == 2 ) { alert("Option2"); document.submit_form["DE_WEB_COMMAND"].value="Activate"; document.submit_form.submit(); } } Code: <form action="/EN/cgi-bin/cgi_chip" method="post" name="submit_form" target="_blank" /> <input type="hidden" name="DE_LS_ATTM_USER_NM" value="" /> <input type="hidden" name="DE_LS_ATTM_USER_PSSW" value="" /> <input type="hidden" name="DE_WEB_PAGE_ID" value="login" /> <input type="hidden" name="DE_USER_VALUE" value="389740" /> <input type="text" id="username" name="DE_LS_IP_ATTM_USER_NM" tabindex="1" maxlength="20" value="" /> <input type="password" id="password" name="DE_LS_IP_ATTM_USER_PSSW" tabindex="2" maxlength="20" value="" /> <input type="submit" class="button" accesskey="l" tabindex="3" name="DE_WEB_COMMAND" value="Sign In" onclick="form_submit(1)" /> <input type="reset" accesskey="r" class="button" tabindex="4" name="Reset" value="Reset" /> <input name="DE_WEB_COMMAND" accesskey="E" type="button" class="button" value="New User? Enrol Now" onclick="form_submit(2)" /> </form> I have stripped out the formatting of the form. Anybody see why it doesn't work? |