HTML - Need To Fix This Quickly! Submit And Reset Buttons Behaving Strangely In Ie 6 & 7
I'm a relative novice to HTML and CSS trying to earn some extra cash doing freelance web designing. With the project I'm working on now, my client has pointed out that in IE 6 and 7, the Submit and Reset buttons of the Contact page are not working. The thing is, they actually are working, it's just that the rollover area for some reason has been reduced to just the bottom edge of the button. Here's the url I test off so you can see what I mean: http://www.animationpolitik.com/newDMsite/contact.html
The buttons work just fine in Firefox and IE8. However if you go into either IE6 or 7 you'll notice that the interior yellow highlight of the Submit and Reset buttons only lights if you carefully roll over the bottom edges of the buttons. They'll work if you hit them at those exact locations, but if you mouse over the center of the buttons and click, nothing happens, which apparently is confusing a lot of my client's customers. It's strange because these are just the default buttons that are created when using the <form> tag; there's no styling on them whatsoever. The table I have them nested in reads like this: <form method="post" action="contact_retrieval.php" target="_top"> ... <table class="comments" border="0"> <tr> <td height="18" colspan="2">Additional comments/questions:<br /> <textarea rows="7" cols="55" wrap="physical" name="comments"> </textarea> </td> </tr> <tr> <td width="87" height="18"><input type="submit" value="Submit" name="submit"></td> <td width="393"><input type="reset" value="Reset" name="reset"></td> </tr> </table> </form> I've been searching the issue for the past several hours and have tried everything from moving the buttons outside the table to relocating them outside the <form></form> tags, but nothing woks. Any idea what could be causing this madness? Any help with this situation would be greatly appreciated! Similar TutorialsHello everyone, I am new here and I am have a very odd problem with one of my paragraph tags. It is placed at the bottom of the main content just before the footer. Yet it thinks it encompasses all of the content in the main content div. When I use css to make the font bigger, only the paragraph changes font size. None of the other text, such as links, changes font size. That's what's supposed to happen. But when I add a top margin to the paragraph to try to move it down, all of the content in the main content div moves down. I am thoroughly confused. Can somebody help me understand why this is happening? Hi. My problem is this... When I zoom in on my site to see it more clearly in close up, it is behaving very strangely. The content in the RH column starts overlapping the menu, which is in the centre column, and positions part of itself behind the menu buttons. The link for the trial version of the site is: http://www.advancewebsolutions.co.uk/commonthread/ I'm not sure whether this is a HTML or CSS problem, but I'd be grateful if anyone could spot what is causing this problem. Many thanks in antiicpation... I'm looking for a way that I can allow users, that visit my website, to submit a graphic (.jpg,.gif,etc) either to my inbox or a specified folder on the server. Is this possible? I plan on using it under the "Your Screens" link. - http://www.v0dk4.com/main.shtml I would like to create 2 buttons for my form. The 1st button named "Submit Ads" would be a submit command and go to one page upon click. The second button named "Continue >>" would be a submit command and go to different page upon click. How can I do this? Your help would be greatly appreciated! Hello, I am trying to create a form so that member can submit a file to our Yahoo! Group. However, I cannot get it to work. Perhaps that this is not even possible? I have an html file that can click on and after they have filled out the form, they would click "submit" and it would post that file into out Yahoo! Group file section. If this isn't possible, is there a way to have it bring up a page with all the information on it after they submitted it so they can just copy and paste? Thanks, DarkEdward basicly im building this website for a company and this is my last bump in the road, i have a form made up for people to fill out as an application but i dont know the code to put as a link on the submit button to send the information to an e-mail address, can anyone help? im supposed to have this done tomorrow, heres a pic to help explain <a href="http://photobucket.com" target="_blank"><img src="http://i10.photobucket.com/albums/a134/sirv101/help.jpg" border="0" alt="Photo Sharing and Video Hosting at Photobucket"></a> I have a JSP with HTML and Javascript in it. There're 2 image buttons and 1 Submit button, for some reason ALL buttons submit (when I click any of the image buttons, it works fine but submits too). I'm kinda new to HTML and JS so i need to know where did I go wrong Code: <form action="Req_Result" method="post" name="entry" onSubmit="return validate(this)"> <table border="0" cellpadding="10" cellspacing="10"> <tr> <td> <table> <tr> <td><INPUT TYPE="RADIO" NAME="searchBy" checked="checked" value="byname" onclick="sortby()"> By Name</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchBy" value="byDate" onclick="sortby()"> By Date</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchType" checked="checked" value="whole" onClick="chMd()"> By Department</td> </tr> <tr> <td><INPUT TYPE="RADIO" NAME="searchType" value="byid" onClick="chMd()"> By ID</td> <td><input name="ps" type="text" size="18" disabled="disabled"></td> </tr> <tr> <td>Start Date:</td> <td><input name="startdate" id="startdate" type="text" size="18" readonly> <input type="image" src="theme/panelCalendarIcon.gif" value="date1" onClick="SelectDate()" ></td> </tr> <tr> <td>End Date:</td> <td><input name="enddate" id="enddate" type="text" size="18" readonly> <input type="image" src="theme/panelCalendarIcon.gif" value="date2" onClick="SelectDate()" ></td> </tr> <tr> <td colspan="2" align="center"><input type="submit" value="Submit"></td> </tr> </table> </td> </tr> </table> </form> I've got a quick question. I've got a page with about 6-8 forms on it. Several of the forms are nearly identical, as they accept an ID number, or a selection made from a pop-up option list. What I want to do is collapse the identical forms into a single data entry area and then have several different submit buttons which have different values, then use the value of the submit button to determine what action to perform for the form. My question is... is this a proper use of the type=submit input element, or am I better off keeping the forms separate. All the forms call the same PHP script (itself) to perform the action. I'll be trying it out, but I don't want to waste time redesigning the page if what I'm trying to do will not work. Thanks. Hi all! I have a table created using php getting information from a MySQL database. No problems there. The problem is that I want to put a form submit button near each of the table rows. Now. the logical thing to do would be to add a column to the table and put a submit button in each row. The only problem is that I want there to be a border only around the original table and not over the submit buttons. How do I go about doing that? Thanks in advance, dirk_gently I am doing a online sign up page, and I am unsure on how to make a submit button send all selected boxes and inputted text to say my email address for this website. and how to get the reset button to reset anyone know how to do that? hey so i have a template which is just a picture and I want the person to be able to click it (but they would in reality just be clicking the invisible button) while it's the background of my site. It allows the person to enter <form name="input" action="http://www.google.com" method="get"> <input type="submit" value="Enter"> </form> if I make the value nothing (or a space), it doesnt dissapear, it just shows a blank button I know this is probably a strange request but I'm trying to figure out how to use an area tag to define a form submit button (or the equivalent of that). Does anyone know if this can be done? Why is it that my button on IE looks like crap, with blurry corners and sadly rounded edges... http://unreal-deals.com/temp/ie-submitbutton.html But this guy's button in IE looks just perfect, with no blurry corners and sharp square edges? http://www.splittestaccelerator.com/1/?cnotes*18059868 Like, HTML Quick Edit Bar 1.3 http://www.shareup.com/HTML_Quick_Ed...oad-28773.html ??? I would like a client of mine to easily update html content, but I don't have a clue where I would get such a software, free.. Html quick edit bar, has what I need, but I don't think it actually updates for some reason... Can anyone help with this? Thanks a lot guys... Hello, I am building a website for a client : http://timhawarah.com/testing.php In Firefox (my favorite browser) there is about a 15 px space in the rooftop of the house which is wrong. In IE the website looks like it should. What can I do to correct this problem. Any help would be most appreciated! Thanks, TaylorJumbo MY CSS looks like this: Quote: body { background-color: #202020; font-family: Arial, Verdana, sans-serif; font-size:12px; color:#202020; text-align: left; } #topnavigation li { display: inline; list-style-type: none; padding-right: 13px; } #top2 li { display: inline; list-style-type: none; padding-right: 13px; } a:link, a:visited { text-decoration:none; font-weight: none; font-family: Arial, Verdana; padding: 0px; marging: 0px; font-size: 10px; background-color: transparent; color: #202020; border-bottom: 1px dashed #3e9446; } a:hover { text-decoration:none; font-weight: none; font-family: Arial, Verdana; padding: 0px; marging: 0px; font-size: 10px; background-color: transparent; color: #fff; border-bottom: 1px dashed #3e9446; } a.imagelink:link, a.imagelink:visited, a.imagelink:active { text-decoration:none; font-weight: bold; font-size: 12px; background-color: none; color: #202020; border: 0px; } a.imagelink:hover { text-decoration:none; background-color: none; color: #fff; border: 0px;; } #outercase { width: 790px; background-color: #fff; margin: 0px auto; padding: 0px; border: 0px; text-align: left; } #top1 { width: 790px; height: 57px; margin: 0px; padding: 0px; text-align: left; background-color: #fff; background: url("/images/wip1.jpg") no-repeat; border: 0px; } #top2 { width: 790px; height: 122px; margin: 0px; padding: 0px; text-align: right; background-color: #fff; background: url("/images/wip2.jpg") no-repeat; border: 0px; } #topnavigation { width: 780px; margin: 0px; padding-right: 10px; padding-top: 5px; text-align: right; background-color: #fff; border: 0px; } #middle { width: 750px; height: 300px; margin: 0px; padding: 20px; text-align: left; background-color: #fff; border: 0px; } #banners { width: 770px; margin: 0px; padding: 10px; text-align: left; background-color: #fff; border: 0px; } #bottom { width: 780px; height: 10px; font-size: 9px; margin: 0px; padding: 5px; text-align: left; background-color: #3e9446; border: 0px; } and my xhtml looks like this Quote: <?include("header.php");?> <div id="outercase"> <div id="topnavigation"> <?include("navitop.php");?> </div> <div id="top1"> </div><div id="top2"> <?include("teasertop.php");?> </div> <div id="middle"> </div> <div id="banners"> <?include("banners.php");?> </div> <div id="bottom"> <?include("footer.php");?> I am trying to create the webpage looks like the attached jpg Required Appearance (the image containing the blue rectangle) but it is instead displaying as the attached jpg Actual appearance. I have coloured the relevant code in red. Please tell me why this is happening it seems to be something to do with the <div> tabs. How can I get the two divs display next to each other? Thanks for any help <!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" xml:lang="en" lang="en"> <head> <title></title> </head> <!-- #ab0101 = red --> <body bgcolor="#ab0101" > <div id="header" > <div style ="width: 1000px; height: 140px; margin: auto; background: #ffffff;"> </div> </div> <!-- division that will contain the two divisions--> <div style ="width: 1000px; margin: auto; height:800px; "> <!-- First division ffffff is white--> <div style ="width: 200px; height:800px; background: #ffffff;" > </div> <!-- Second division 000066 is blue--> <div style ="width: 800px; height:800px; background: #000066;"> </div> </div> </body> </html> I have a phpbb3 board with some custom code, and it's not rendering properly on IE6/IE7. The page is at http://forum.protestwarrior.com/temp.html To see this page rendered in IE6 or IE7 if that's not your default browser, go to http://www.ipinfo.info/netrenderer/ select IE6 or IE 7 from the drop down, enter the above url in the render field, and hit render to see what it looks like. for IE7, you'll notice that the first private message on top is restricted to the right side of the screen. For IE6, the inbox is off altogether. To see what the page is supposed to look like, view it in FF. Any suggestions? I have a site with a few links to a third party site. I've noticed that when i click on the first link, it works fine - it shows a list of publications for the right individual. when i click on my second link, it too works fine. but then if i click on any link after I've clicked on the second one, the proper search results don't appear. Try the following: click on link 1. click on link2 click on link1. You'll notice that the results are still from link 2. If you try just using the pub med site on its own, (ie cut and paste the links into a window vs. using my html page, it works fine.) LINK 1 http://www.ncbi.nlm.nih.gov/entrez/q...%22%5Bau%5D%20 LINK 2 http://www.ncbi.nlm.nih.gov/pubmed/17289775?ordinalpos=4&itool=EntrezSystem2.PEntrez.Pubmed.Pubmed_ResultsPanel.Pubmed_RVDocSum" target="_blank"> Xiaoqing Yang, MD, Can someone take a look over here. (LINK) I'm having problem "reset-ing" the graph. Eg. Let say you change all the inputs + color and click on generate graph. After that, click on reset graph. Only the graph changes to (50-50-50) but the axis/inputs/colors remain intact. Any idea? Axis (axisid) Inputs (inputid) Color (colorid) Cheers. I am using four frames. I want it so that when I click the 'home' link, the mainFrame and the contentFrame will return to their original state. How do I do this? Changing one frame is ok, but I dont know how to change them both. This is my main code: Quote: ... <frameset rows="9%,*" cols="*" framespacing="0" border="0"> <frame src="title.htm" scrolling="no"/> <frameset rows="*" cols="13%,19%,68%" bordercolor="#FFFFFF"> <frame src="menu.htm" scrolling="no"/> <frame src="main.htm" name="mainFrame" /> <frame src="content.htm" name="contentFrame" scrolling="no"/> </frameset> <noframes> <body> Get a better web browser! </body> </noframes> </frameset> </html> And here is the menu frame where the Home link is, you can see where I have added the mainFrame. But I want to add the contentFrame too: Quote: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css"> <!-- body,td,th { font-family: Arial, Helvetica, sans-serif; color: #FFFFFF; } body { background-color: #000000; } a:link { color: #FFFFFF; text-decoration: none; } a:visited { text-decoration: none; color: #FFFFFF; } a:hover { text-decoration: none; } a:active { text-decoration: none; background-color: #000000; } .style1 {color: #FFFFFF} --> </style> <table width="100%" border="1" bordercolor="#FFFFFF" align="center" > <tr> <td><div align="center"><a href="main.htm" target="mainFrame">Home</a></div></td> </tr> </table> <table width="100%" border="1" bordercolor="#FFFFFF" align="center" > <tr> <td><div align="center"><a href="images/images.htm" target="mainFrame">Images</a></div></td> </tr> </table> <table width="100%" border="1" bordercolor="#FFFFFF" align="center" > <tr> <td><div align="center"><a href="videos/videos.htm" target="mainFrame">Video</a></div></td> </tr> </table> <table width="100%" border="1" bordercolor="#FFFFFF" align="center" > <tr> <td><div align="center"><a href="audio/audio.htm" target="mainFrame">Audio</a></div></td> </tr> </table> |