[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Input image not working in IE

Posted on 2007-07-27
8
Medium Priority
?
2,801 Views
Last Modified: 2008-01-09
Hi,

I'm using this code for a form:
echo "<div class=\"foorum_lainaa_yksin\" style=\"height: 16px;\"><form method=\"post\" action=\"index.php?id=$pageid&amp;show=$topicID#quoted\"><input type=\"hidden\" name=\"postID\" value=\"$row[ID]\" /><input type=\"image\" value=\"Lainaa\" onMouseOver=\"this.src='../images/lainaa_over.gif'\" onMouseOut=\"this.src='../images/lainaa_normal.gif'\" src=\"../images/lainaa_normal.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
0
Comment
Question by:Toube
  • 4
  • 3
8 Comments
 
LVL 54

Accepted Solution

by:
b0lsc0tt earned 1350 total points
ID: 19583365
I didn't see an issue but the actual html source will be more helpful.  Please view that to look for an error in tags or attributes.  If you don't find one then please post it here for that section.  The html source (i.e. View Source in the browser) is very helpful for finding and solving browser issues.

Let me know if you have a question.

bol
0
 

Author Comment

by:Toube
ID: 19583721
Thanks for your answer.

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/toubesdesign.css" />
    <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"></script>
      <script language="javascript" type="text/javascript">

function addSmiley(inputbox){
       txtArea = inputbox.form.post;
       txt = inputbox.alt;
       if( document.selection ){
            txtArea.focus();
            document.selection.createRange().text = txt;
       } else if ( txtArea.selectionStart != null )
            txtArea.value = txtArea.value.substring(0, txtArea.selectionStart )
                          + txt
                          + txtArea.value.substring(txtArea.selectionEnd, txtArea.value.length);
       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_test1.jpg" alt="banner"/>
</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" alt="washer" style="border: none; float: left;" /></li>
      <li><a class="" href="../uutiset">Uutiset</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" /></li>
      <li><a class="" href="../profile">Profiili</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" />
<ul>
                  <li style="font-size: 10px;"><a href="../profile/index.php?id=1">Muokkaa omia tietoja</a></li>
                  <li style="font-size: 10px;"><a href="../profile/index.php?id=2">Tarkistele omia tietoja</a></li>
                  <li style="font-size: 10px;"><a href="../profile/index.php?id=3">Tallennetut linkit</a></li>
</ul>
      </li>
      <li><a class="selected" href="http://www.toubes-page.net/td/user/foorumi">Foorumi</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" />
<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</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" />
<ul>
                  <li style="font-size: 10px;"><a href="../users/index.php">Yleiset tiedot</a></li>
                  <li style="font-size: 10px;"><a href="../users/index.php?id=35">Tarkemmat tiedot</a></li>
</ul>
</li>
      <li><a class="" href="../albumi">Albumi</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" />
<ul>
                  <li style="font-size: 10px;"><a href="../albumi/index.php?id=2005">Vuosi 2005</a></li>
                  <li style="font-size: 10px;"><a href="../albumi/index.php?id=2006">Vuosi 2006</a></li>
                  <li style="font-size: 10px;"><a href="../albumi/index.php?id=2007">Vuosi 2007</a></li>
</ul>
</li>

      <li><a class="" href="../links">Linkit</a><img src="../images/washer.jpg" alt="washer" style="border: none; float: left;" /></li>

</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_underline" style="margin-left: 38px; font-size: 10px; font-weight: bold;"><a href="http://www.toubes-page.net/td/user/foorumi">Foorumi</a> <span style="font-size: 8px;">&gt;</span> </span> <span class="member_links_underline" style="font-size: 10px; font-weight: bold;"><a href="index.php?id=2">Vanhat keskustelut</a></span><span style="font-size: 8px; font-weight: bold;"> &gt;</span><span style="font-size: 10px; font-weight: bold;"> Tämä on testiotsikko </span></div>
<br/>

<div class="middle_box_member_forum">
<div class="li"><a style="font-size: 9px; margin-left: -4px;" href="index.php?id=1"><img onMouseOver="this.src='../images/aktiiviset_over.gif'"
onMouseOut="this.src='../images/aktiiviset.gif'" src="../images/aktiiviset.gif" style="border: none;" alt="aktiiviset keskustelut"/></a></div><div class="li"><a style="font-size: 9px;" href="index.php?id=2"><img src="../images/vanhat_over.gif" style="border: none;" alt="vanhat keskustelut"/></a></div><div class="li"><a style="font-size: 9px;" href="index.php?id=3"><img onMouseOver="this.src='../images/uusimmat_over.gif'"
onMouseOut="this.src='../images/uusimmat_normal.gif'" src="../images/uusimmat_normal.gif" style="border: none;" alt="uusimmat viestit"/></a></div><div class="li"><a style="font-size: 9px;" href="../rss.php"><img src="../images/uutissyote.gif" style="border: none;" alt="20 uusinta viestiä suosikeihin"/></a></div>
<br/><br/>

</div>
<div class="middle_box_member_forum">

<div style="margin-top: -4px; margin-bottom: 8px; font-size: 14px; font-weight: bold;">
<img src="../images/aktiivi.gif" alt="uusi" style="border: none;" />
Tämä on testiotsikko :</div><div class="new_message">
<span class="member_links_underline_"><img src="../images/uusi_viesti.gif" style="margin-right: 1px;" alt="uusi viesti"/><a href="#viesti">Uusi viesti</a></span></div>
<div style="margin-right: 10px;">


<div class="member_links" style="margin-bottom: 3px; font-size: 9px;"><a href="index.php?id=2&amp;show=41&amp;main_page=1"><img style="border: none;" src="../images/red_arrow_back.gif" alt="Previous page" title="edellinen sivu" /></a>  <a href="index.php?id=2&amp;show=41&amp;main_page=1">1</a>  <span style="font-weight: bold; color: #000000; background-color: #e4900d; padding-left: 2px; padding-right: 2px;">2</span>  <img style="border: none;" src="../images/red_arrow_front.gif" alt="Next page" /></div>
<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_underline_"><img src="../images/arrow_down.gif" style="border: none; margin-left: 282px;" alt="loppuun" /><a style="margin-left: 2px;" href="#sivu_loppuun">Sivun loppuun</a></span>
    </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.gif" alt="taso" style="margin-left: 1px; margin-right: -2px; border: none;" />
                <a href="../users/index.php?id=0">Tobba</a></div>
                <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"></div>

                </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.gif" style="border: none; margin-top: 2px;" alt="uusi viesti" />&nbsp;Viesti lähetetty:&nbsp;
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&auml;hetin &auml;sken eli edellinen viesti oli sen timestamp 20:17 ja forum_read taulun timestamp sanoi 20:16
<br />toisin sanoen on se j&auml;ljess&auml; v&auml;h&auml;n enemm&auml;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" style="height: 16px;"><form method="post" action="index.php?id=2&amp;show=41#quoted"><input type="hidden" name="postID" value="923" /><input type="image" value="Lainaa" onMouseOver="this.src='../images/lainaa_over.gif'"
onMouseOut="this.src='../images/lainaa_normal.gif'" src="../images/lainaa_normal.gif" name="lainaa" /></form></div></td>

<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><span class="member_links_underline_" style="float: right; margin-right: 3px; padding-bottom: 2px;"><img src="../images/arrow_up.gif" style="border: none;" alt="alkuun" /><a style="margin-left: 2px;" href="#sivu_alkuun">Sivun alkuun</a></span></span></td>
                    </tr>
            </table>
            </div>
            </div>

<div class="member_links" style="margin-left: 10px; margin-top: 3px; font-size: 9px;"><a href="index.php?id=2&amp;show=41&amp;main_page=1#viesti"><img style="border: none;" src="../images/red_arrow_back.gif" alt="Previous page" title="edellinen sivu" /></a>  <a href="index.php?id=2&amp;show=41&amp;main_page=1#viesti">1</a>  <span style="font-weight: bold; color: #000000; background-color: #e4900d; padding-left: 2px; padding-right: 2px;">2</span>  <img style="border: none;" src="../images/red_arrow_front.gif" alt="Next page" title="seuraava sivu" /></div>

<div style="margin-left: 10px;">
<form action="pages/content/process_post.php?id=2&amp;show=41" method="post">

<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:&nbsp;</p><p class="li"><input type="image" src="../images/smile.gif" alt=":)" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/wink.gif" alt=";)" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/laughing.gif" alt=":D" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/confused.gif" alt=":S" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/sad.gif" alt=":(" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/angry.gif" alt=":@" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/shock.gif" alt=":o" onclick="addSmiley(this);return false;" /></p>
<p class="li"><input type="image" src="../images/cool.gif" alt="(H)" onclick="addSmiley(this);return false;" /></p>
<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></tr>
</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
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19583849
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
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Toube
ID: 19583855
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/process_post.php?id=<?php echo $pageid;?>&amp;show=<?php echo $topicID; ?>" method="post">

<input style="margin-left: 41px;" type="image" value="Submit" onMouseOver="this.src='../images/lisaa_over.gif'"
onMouseOut="this.src='../images/lisaa_normal.gif'" src="../images/lisaa_normal.gif" name="Submit" />

</form>

So why is this type="image" such a problem for IE?
0
 

Author Comment

by:Toube
ID: 19583869
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
0
 

Author Comment

by:Toube
ID: 19584723
I used a <input hidden field> with the same value and name as the type="image" and this works for IE also:)

-T
0
 
LVL 54

Expert Comment

by:b0lsc0tt
ID: 19585344
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
0
 

Expert Comment

by:Styck
ID: 20796935
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.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

872 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question