Internet Explorer moves webpage elements by itself - html

I have an interesting dilemma. For an IT course, I have to design a website with a weather database, which I have done. It displays nicely in Chrome and Firefox (and I assume Safari), and for the most part in Internet Explorer.
However, as you can see in these screenshots, IE seems to take it upon itself to move links and buttons when the user moves their cursor near them.
Figure 1 - IE Layout before moving cursor to copyright link:
Figure 2 - IE Layout after moving cursor to copyright link:
Figure 3 - As compared with Chrome:
The website address is http://penguinweather.tk. Please feel free to look around if it will help. The problem also occurs on the confirmation page (again only in IE).
Here is the most relevant code from the homepage:
<body class="body">
<center>
<h1>Penguin Weather</h1>
<h2>Weather Database</h2>
<h3>Welcome to Penguin Weather! You can enter new data here, or click on the second button to view all current weather data.</h3>
<form action="Database.php" method="post">
<table>
<tr>
<td>Location:</td>
<td>
<input type="text" class="textbox" name="loc" autofocus>
</tr>
<tr>
<td>Temperature:</td>
<td>
<input type="number" class="textbox" style="width:75px;" name="temp">
</td>
</tr>
<tr>
<td>Password:</td>
<td>
<input type="password" class="textbox" name="pass">
</td>
</tr>
</table>
<br>
<input type="submit" class="button" style="font-weight:bold;" value="Save Datum">
<br>
<br>
View Weather
View Weather by Month
Modify Weather
</form>
</center>
</body>
<footer>
<center>Copyright © 2016 Penguintech Ltd.</center>
<br>
<center><small>View Development Directory</small> | <small>Test</small></center>
</footer>
Thank you in advance.
(PS: Don't click on the penguin unless you like harmless annoyances!)

It turns out that Internet Explorer did not like the <center> tags, so wrapping the page in a div with CSS formatting solved the problem.
Code:
<div style="text-align:center">
*page content*
</div>
And to keep the table centred:
<table style="margin-left:auto; margin-right:auto">
*table content*
</table>

Related

mailto function not working on android phones

for some reason my mail to function does not seem to work in android devices.... i'm really confused what to do as it seems to be working fine on windows devices
<article class="contact_form">
<h2><i>Reach Me</i></h2>
<table class="contact-table">
<form action="mailto:sanwal.sahil#yahoo.com" method="post" enctype="multipart/form-data" name="EmailTestForm">
<tr>
<td><label for="name">Name:</label></td>
<td>
<input type="text" id="name" name="visitor" />
<br>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<button type="submit" colspan="1" class="form-submit">SUBMIT</button>
</td>
</tr>
</form>
</table>
</article>
mailto:, in general, has very unreliable support as a form action. This is likely just one more example of that. You should avoid it entirely in favour of using an HTTPS (or even HTTP) URL with a server side form handler.
Additionally, your form is invalid in a way that will break it in a number of browsers. Write valid HTML.

HTML Form and Table Code Works in Fiddle But not on Site

I have a page that has several tables that also are forms that send data to a PHP script. You can see the example here: https://jsfiddle.net/1gL4qzh2/
<form action='singleview.php' method='post'>
<table id='scholarship' style='float:left;' align='center'>
<thead>
<th class='head' colspan='3' style='text-align:center;'>University of Michigan--Dearborn
<br>
<br>Full Tuition
<br>
<br>Public
<br>
<br>
<input type='hidden' name='id' value='ARLUJ'>
<input type='submit' value='View More Details'>
</th>
</thead>
</form>
</table>
The issue I am having is that the first two table on the top left corner the button "View More Details" is not working. All of the other tables they work fine on. When I put it in a fiddle they seem to work properly.
Does anyone know what is in the fiddle code that I am missing for these to work?

Form in Table not displaying right

I'm a sophomore in high school and I'm taking web design. I taught myself HTML and basic CSS over the summer. This was beneficial because my web design teacher knows nothing about HTML, CSS, or JavaScript. We have to create a personal website and the teacher said I could do my church's site since I was already working on it.
The teacher is making us use stuff from the book that's been covered in the class. The book is out of date. It teaches frames/framesets, table layouts, and talks about compatibility for the waring Netscape and Internet Explorer. (I'm doing a real website. No frames whatsoever.)
I need to include a table in my website, but I have no need for one. I decided to try to put a form inside of a table. I put my form inside of a <tr> tag, but its not displaying right.
If y'all have any better table ideas, then I'm all ears.
http://www.gracepensacola.com
I guess putting a form into tr tag is not a valid HTML. What you need to do is something like this:
<table>
<tr>
<td>Put your form here</td>
</tr>
</table>
After searching through several pages on Google, I came across an example. I put the example in JsFiddle.
The <table> should be nested inside of the <form>.
http://jsfiddle.net/Wf33B/
<form method="post">
<table>
<tr>
<td>
<label for="username">Username:</label>
</td>
<td>
<input type="text" name="username" id="username" />
</td>
</tr>
<tr>
<td>
<label for="password">Password:</label>
</td>
<td>
<input type="password" name="password" id="password" />
</td>
</tr>
<tr>
<td>
<input type="submit" name="cancel" value="Cancel" />
</td>
<td>
<input type="submit" name="send" value="Send" />
</td>
</tr>
</table>
</form>

HTML generated by Dreamweaver

When i run the following code below it works in dreamweaver but when i go to view it in a web broswer nothin shows.
The code is
<table cellpadding="5" cellspacing="1">
<tr>
<td align="center">
<form action="search.php" method="get">
<table><tr><td>
<input type="text" name="query" id="query" size="40" value="<? print quote_replace($query);?>" action="include/js_suggest/suggest.php" columns="2" autocomplete="off" delay="1500">
</div>
<td>
<input type="submit" value="Search!">
</td></tr></table>
When i go to view the source code in chrome it only loads
<table cellpadding="5" cellspacing="1">
<tr>
<td align="center">
<form action="search.php" method="get">
<table><tr><td>
Check with your host to see if they've enabled the <? tag. It's not turned on by default. If it's not, it's probably causing Chrome a lot of grief.
Check out your syntax. What you've pasted isn't valid. It looks like your'e closing your form twice, or you have an extra set of quotes in the "get" area.
On a side note, I suggest removing display related HTML attributes in favor of CSS. It will help keep a clear distinction between function and look.

<textarea> causing 404 error on particular inputs

I've come across a weird problem. I have a simple form which submits data to a php processor page. However, the following input to the description field causes a 404 Error.
To recognize and reward the best in
Indian theatre, The Mahindra and
Mahindra presents META (Mahindra
Excellence in Theatre Awards). The
only award of its kind, META is
designed to showcase the best in
theatre being produced in India. An
eminent selection committee shortlists
the 10 best plays from innumerable
entries from all across India. These
plays are staged and adjudged under 13
award categories. The festival
culminates with an scintillating
awards ceremnony. Entering its sixth
year, META’s objective remains to
encourage all aspects of theatre craft
such as playwriting, set, costume and
light design, direction and
performance and promoting theatre.
I've tried changing the apostrophes and commas, even the brackets, but it didn't help.
The code for the form:
<form class="cms" action="add.php" enctype="multipart/form-data" method="post">
<table>
<tr>
<td class="text">
Title
</td>
<td class="input">
<input type="text" size="20" name="title" value="" />
</td>
</tr>
<tr>
<td class="text">
Date
</td>
<td class="input">
<input type="text" size="20" name="date" value="" />
</td>
</tr>
<tr>
<td class="text">
Image
</td>
<td class="input">
<input type="file" name="image" />
</td>
</tr>
<tr>
<td class="text">
Description
</td>
<td class="input">
<textarea name="description" rows="5" cols="20"></textarea>
</td>
</tr>
<tr>
<td class="text">
Link
</td>
<td class="input">
<input type="text" size="20" name="link" value="" />
</td>
</tr>
<tr>
<td class="text">
<input type="submit" value="Add / Save" />
</td>
<td>
<input type="reset" value="Clear" />
</td class="input">
</tr>
</table>
</form>
On submitting the text above i get the following error :
Not Found The requested URL
/cms/events/add.php was not found on
this server.
Apache/1.3.41 Server at
www.xyzs.in Port 80
Is this a problem with the text-encoding?
Could the add.php page contain an execute, maybe for an error page if the input is to long and the 404 is because the error page is not there?
I have seen similar errors in ASP where execute "" was used to load another page and if that page was not found you got an error, but exactly which error can differ from server implementation.
Also, does this work with other input with shorter or same length?
For someone else with Similar Issue:
Your text contains sensitive keywords which cause 404. Last night I got similar issue with text area, After deep analyzing I found that my text contains a keyword "Select", When I remove it submits successfully. In your case keyword "META" might causing this error.
What you have to do is white list these sensitive keywords from your server by contacting your server administrator.