Toube
asked on
Input image not working in IE
Hi,
I'm using this code for a form:
echo "<div class=\"foorum_lainaa_yksi n\" style=\"height: 16px;\"><form method=\"post\" action=\"index.php?id=$pag eid&sh ow=$topicI D#quoted\" ><input type=\"hidden\" name=\"postID\" value=\"$row[ID]\" /><input type=\"image\" value=\"Lainaa\" onMouseOver=\"this.src='.. /images/la inaa_over. gif'\" onMouseOut=\"this.src='../ images/lai naa_normal .gif'\" src=\"../images/lainaa_nor mal.gif\" name=\"lainaa\" /></form></div>";
But problem here is that this form works well with mozilla but with IE it does nothing.. well it kind a just loads the pages over and nothing is being displayed as it should be.. any idea why IE is not working?
Thanks,
-T
I'm using this code for a form:
echo "<div class=\"foorum_lainaa_yksi
But problem here is that this form works well with mozilla but with IE it does nothing.. well it kind a just loads the pages over and nothing is being displayed as it should be.. any idea why IE is not working?
Thanks,
-T
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
It is hard to find a problem when I am not real sure what it is. Is it possible to provide a link to us so we can see the site online? Since the problem seems to be related to a part of the page with an image then all of the page HTML is not enough. I don't have the images. :)
You are using the Strict XHTML doctype but the html doesn't validate for that. Try switching the doctype to Transitional to see if that fixes the problem. It is important that your html is valid (or as close as possible). Errors can prevent the page from looking good, especially in different browsers.
If you need a validator try the one at http://validator.w3.org/. It can give you a good idea of what to work on. Look at and especially work on the big errors (i.e. missing, incomplete tags, invalid attributes, etc).
Let me know if you have a question or need more info. The most helpful would be to get a link or at least a detailed description or what isn't working. :)
bol
You are using the Strict XHTML doctype but the html doesn't validate for that. Try switching the doctype to Transitional to see if that fixes the problem. It is important that your html is valid (or as close as possible). Errors can prevent the page from looking good, especially in different browsers.
If you need a validator try the one at http://validator.w3.org/. It can give you a good idea of what to work on. Look at and especially work on the big errors (i.e. missing, incomplete tags, invalid attributes, etc).
Let me know if you have a question or need more info. The most helpful would be to get a link or at least a detailed description or what isn't working. :)
bol
ASKER
Ok, I have the same problem when posting a message on same page.
With FF it works fine but with IE it just jumps to the forms action url and shows an empty page..
The page process_post.php adds the data to the db and returns to the same page showing the new message.. but with IE this isn't working when using image.. if I use submit it works fine??
<form action="pages/content/proc ess_post.p hp?id=<?ph p echo $pageid;?>&show=<?php echo $topicID; ?>" method="post">
<input style="margin-left: 41px;" type="image" value="Submit" onMouseOver="this.src='../ images/lis aa_over.gi f'"
onMouseOut="this.src='../i mages/lisa a_normal.g if'" src="../images/lisaa_norma l.gif" name="Submit" />
</form>
So why is this type="image" such a problem for IE?
With FF it works fine but with IE it just jumps to the forms action url and shows an empty page..
The page process_post.php adds the data to the db and returns to the same page showing the new message.. but with IE this isn't working when using image.. if I use submit it works fine??
<form action="pages/content/proc
<input style="margin-left: 41px;" type="image" value="Submit" onMouseOver="this.src='../
onMouseOut="this.src='../i
</form>
So why is this type="image" such a problem for IE?
ASKER
Ok,
you log on here:
http://www.toubes-page.net/td/index.php?id=cpanel&page=login
user: Guest
pass: guest321
and copy paste this to your url, and try to quote(lainaa) or post new message (lisää uusi viesti) using IE
http://www.toubes-page.net/td/user/foorumi/index.php?id=1&show=41#viesti
-T
you log on here:
http://www.toubes-page.net/td/index.php?id=cpanel&page=login
user: Guest
pass: guest321
and copy paste this to your url, and try to quote(lainaa) or post new message (lisää uusi viesti) using IE
http://www.toubes-page.net/td/user/foorumi/index.php?id=1&show=41#viesti
-T
ASKER
I used a <input hidden field> with the same value and name as the type="image" and this works for IE also:)
-T
-T
I'm glad you got it working. I never had a chance to look at the URL or login but I'm glad I could help. Thanks for the fun question.
bol
bol
For the record, I'm facing the same problem.
This is the way Firefox and IE handle input type=image:
Example form:
<form>
<input type=image name=button1 value=button1val src=button1link>
<input type=image name=button2 value=button2val src=button2link>
<input type=text name=example value=something>
</form>
When the first button is clicked, and the form is submit, these values are sent to the webserver:
Firefox:
[button1] => [button1val]
[example] => [something]
Internet Explorer (tested with v7) however:
[example] => [something]
So IE isn't sending the input type=image details back to the webserver. Seems like the only workaround would be to use javascript to set a button ID to a hidden input value.
This is the way Firefox and IE handle input type=image:
Example form:
<form>
<input type=image name=button1 value=button1val src=button1link>
<input type=image name=button2 value=button2val src=button2link>
<input type=text name=example value=something>
</form>
When the first button is clicked, and the form is submit, these values are sent to the webserver:
Firefox:
[button1] => [button1val]
[example] => [something]
Internet Explorer (tested with v7) however:
[example] => [something]
So IE isn't sending the input type=image details back to the webserver. Seems like the only workaround would be to use javascript to set a button ID to a hidden input value.
ASKER
I'm really not sure were to look.. my code is html tidy cleaned.
Here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi" lang="fi" >
<head>
<title>Toubes Intra</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<meta content="Web Design, Internetsivut, Kotisivut" name="Toubes Design" />
<link rel="stylesheet" type="text/css" href="../images/toubesdesi
<link rel="icon" type="image/x-icon" href="http://www.toubes-page.net/td/syksy/favicon.ico" />
<meta content="MSHTML 6.00.2800.1106" name="GENERATOR" />
<script src="../java/ul.js" type="text/javascript"></s
<script language="javascript" type="text/javascript">
function addSmiley(inputbox){
txtArea = inputbox.form.post;
txt = inputbox.alt;
if( document.selection ){
txtArea.focus();
document.selection.createR
} else if ( txtArea.selectionStart != null )
txtArea.value = txtArea.value.substring(0,
+ txt
+ txtArea.value.substring(tx
else
txtArea.value += txt;
txtArea.focus();
}
</script>
</head>
<body id="top">
<a name="sivu_alkuun"></a>
<div id="banner">
<img onLoad="doLoad()" src="../images/banner_test
</div>
<div id="sisalto">
<div id="navbar">
<div id="dhtmlgoodies_menu">
<div class="globalnavi">
<ul>
<li><a class="" href="http://www.toubes-page.net/td/user/">Etusivu</a><img src="../images/washer.jpg"
<li><a class="" href="../uutiset">Uutiset<
<li><a class="" href="../profile">Profiili
<ul>
<li style="font-size: 10px;"><a href="../profile/index.php
<li style="font-size: 10px;"><a href="../profile/index.php
<li style="font-size: 10px;"><a href="../profile/index.php
</ul>
</li>
<li><a class="selected" href="http://www.toubes-page.net/td/user/foorumi">Foorumi</a><img src="../images/washer.jpg"
<ul>
<li style="font-size: 10px;"><a href="http://www.toubes-page.net/td/user/foorumi/index.php?id=1">Aktiiviset Keskustelut</a></li>
<li style="font-size: 10px;"><a href="http://www.toubes-page.net/td/user/foorumi/index.php?id=2">Vanhat keskustelut</a></li>
<li style="font-size: 10px;"><a href="http://www.toubes-page.net/td/user/foorumi/index.php?id=3">Uusimmat viestit</a></li>
<li style="font-size: 10px;"><a href="http://www.toubes-page.net/td/user/foorumi/index.php?id=4">Aloita uusi otsikko</a></li>
<li style="font-size: 10px;"><a href="http://www.toubes-page.net/td/user/rss.php">Uutissyöte</a></li
</ul>
</li>
<li><a class="" href="../users">Käyttäjät<
<ul>
<li style="font-size: 10px;"><a href="../users/index.php">
<li style="font-size: 10px;"><a href="../users/index.php?i
</ul>
</li>
<li><a class="" href="../albumi">Albumi</a
<ul>
<li style="font-size: 10px;"><a href="../albumi/index.php?
<li style="font-size: 10px;"><a href="../albumi/index.php?
<li style="font-size: 10px;"><a href="../albumi/index.php?
</ul>
</li>
<li><a class="" href="../links">Linkit</a>
</ul>
<div class="nofloat"></div>
</div>
</div>
</div>
<br class="clear" />
</div>
<div id="bg">
<div class="logo_bg">
<div class="middle_box_member">
<div id="middle_bar_member">
<span class="member_links_underl
<br/>
<div class="middle_box_member_f
<div class="li"><a style="font-size: 9px; margin-left: -4px;" href="index.php?id=1"><img
onMouseOut="this.src='../i
onMouseOut="this.src='../i
<br/><br/>
</div>
<div class="middle_box_member_f
<div style="margin-top: -4px; margin-bottom: 8px; font-size: 14px; font-weight: bold;">
<img src="../images/aktiivi.gif
Tämä on testiotsikko :</div><div class="new_message">
<span class="member_links_underl
<div style="margin-right: 10px;">
<div class="member_links" style="margin-bottom: 3px; font-size: 9px;"><a href="index.php?id=2&s
<table border="0" style="border: 1px solid #e4900d;" cellspacing="0" cellpadding="0" width="100%">
<tr>
<td width="12%" bgcolor="#490b0b" align="center" style="border-bottom: 1px solid #e4900d; padding: 2px 2px 2px 2px; font-weight: bold;">Kirjoittaja
</td>
<td width="100%" bgcolor="#490b0b" style="border-bottom: 1px solid #e4900d; border-left: 1px solid #e4900d; padding: 2px 2px 2px 2px;"><span style="margin-left: 285px; font-weight: bold;">Viesti</span> <span class="member_links_underl
</td>
</tr>
<tr>
<td width="10%" style="border-bottom: 1px solid #e4900d;" bgcolor="#720606" valign="top">
<table border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td>
<div class="links_m" style="margin-bottom: -12px; font-weight: bold;">
<img src="../images/star_black.
<a href="../users/index.php?i
<br/><div style="color: #000000; font-size: 9px; margin-top: 3px; margin-left: 1px;">[<span style="font-weight: bold;">370</span>]
<span style="color: #f4c41c;"><br />
<span>m.a.n</span> <br/>
</span>
</div>
<div class="button"></div>
</td>
<tr>
<td>
<div class="button_lainaa"></di
</td>
</tr>
</table>
</td>
<td style="width: 100%;" bgcolor= "#f9f3e9">
<div style="background-color: #720606; padding-bottom: 3px; border-left: 1px solid #e4900d;"><span style="color: #ffffff; margin-left: 5px; font-size: 9px; font-weight: bold;"><img src="../images/uusi_viesti
10.05.2007 20:20:33</span></div>
<table style="border-top: 1px solid #e4900d; border-left: 1px solid #e4900d; border-bottom: 1px solid #e4900d;" border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td bgcolor= "#f9f3e9">
</td>
</tr>
<tr>
<td bgcolor= "#f9f3e9" style="color: #000000;">
Juu viesti jonka lähetin äsken eli edellinen viesti oli sen timestamp 20:17 ja forum_read taulun timestamp sanoi 20:16
<br />toisin sanoen on se jäljessä vähän enemmän kuin 2 sekuntia. </td>
</tr>
<tr>
<td bgcolor= "#f9f3e9">
</td>
</tr>
<tr>
<td style="border-top: 1px solid #720606;">
<table border="0" cellspacing="0" cellpadding="0" width="25%" align="right">
<tr>
<td align="right">
// here are button that not work in IE
<div class="foorum_lainaa_yksin
onMouseOut="this.src='../i
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div style="margin-right: 10px;">
<table style="border: 1px solid #e4900d; margin-top: -2px;" border="0" cellspacing="0" cellpadding="1" width="100%">
<tr>
<td bgcolor="#490b0b"><span><s
</tr>
</table>
</div>
</div>
<div class="member_links" style="margin-left: 10px; margin-top: 3px; font-size: 9px;"><a href="index.php?id=2&s
<div style="margin-left: 10px;">
<form action="pages/content/proc
<div style="border: 3px solid #e4900d; border-style: double; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; padding-top: 3px; padding-bottom: 4px; padding-left: 5px; padding-right: 5px; color: #ffffff; width: 210px;">
<p class="li" style="font-weight: bold;">Hymiöt: </p><p
<p class="li"><input type="image" src="../images/wink.gif" alt=";)" onclick="addSmiley(this);r
<p class="li"><input type="image" src="../images/laughing.gi
<p class="li"><input type="image" src="../images/confused.gi
<p class="li"><input type="image" src="../images/sad.gif" alt=":(" onclick="addSmiley(this);r
<p class="li"><input type="image" src="../images/angry.gif" alt=":@" onclick="addSmiley(this);r
<p class="li"><input type="image" src="../images/shock.gif" alt=":o" onclick="addSmiley(this);r
<p class="li"><input type="image" src="../images/cool.gif" alt="(H)" onclick="addSmiley(this);r
<br class="clear" /></div>
<input type="hidden" name="topicID" value="41" />
<input type="hidden" name="TopicName" value="Tämä on testiotsikko" />
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="2" cellspacing="0" width="65%">
<tr>
<td valign="top">Viesti:</td>
<td>
<textarea style="border: 2px solid #e4900d;" name="post" rows="10" cols="65"></textarea></td>
</table>
</td></tr></table>
<input id="uusiviesti" class="nappi" name="Submit" type="submit" value="Lisää uusi viesti" />
</form>
<a name="sivu_loppuun"></a>
<a name="viesti"></a>
<a name="quoted"></a>
</div>
</div>
</div>
<br class="clear"/><br/>
</div>
</body>
</html>
Regards,
T