My submit button is behaving like a kangaroo

Discussion in 'HTML & Website Design' started by hriaarg, May 15, 2006.

  1. #1
    Hello,

    I am about to finish my first website that I made for a friend. It was a test for me but there is one problem I cannot fix solely. I hope someone who reads this thread will be so kind to look into it and post an appropriate solution.

    On the contact page there is a form that deals with css. In firefox, the submit button is positioned where it must be. When I opened the page today at work; in explorer 6 win; this submit button wasn't at the right place and nor is it in Safari.

    Here is the link to the page.

    http://www.w-lfotografie.be/NL/contact.htm

    thanks for your help,

    Frank
     
    hriaarg, May 15, 2006 IP
  2. coldclimber

    coldclimber Peon

    Messages:
    266
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    0
    #2
    MMM i see what you meen i suppose you would have to find out who visits the site most using which browser and fix to which ever bowser you choose, i have come across this before and there is not much you can do about it, have you tried to add the add remove netscape script i might help but i think it is only used for window size but here it is any way

    <script type="text/javascript">
    <!--
    function MM_reloadPage(init) { //reloads the window if Nav4 resized
    if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
    else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    //-->
    </script>
     
    coldclimber, May 15, 2006 IP
  3. ludwig

    ludwig Notable Member

    Messages:
    2,253
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    225
    #3
    have you tried to remove the following

    <BR><BR><BR><BR><BR>
    <div align="center" class="submit"><input type="image" src="/images/b-send.gif" alt="send" width="43" height="13" border="0" />
    </div>
     
    ludwig, May 16, 2006 IP
  4. hriaarg

    hriaarg Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Hello,

    Thanks fot both replys.

    to Ludwig: the <br>'s are necessary to position the button well in FF, opera and Safari. If I remove them; IE will display it right, but the other ones will place the button in the text field.

    :-s
     
    hriaarg, May 16, 2006 IP
  5. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #5
    You have several errors in your html, including not having closed the form.

    That you had to use all those br tags was an indicator of problems. You should never ever use br tags for spacing.

    Here is how I would code that little form:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xml:lang="en"
          xmlns="http://www.w3.org/1999/xhtml"
          lang="en">
    <head>
      <title></title>
      <meta name="generator"
            content=
            "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
            
      <meta http-equiv="content-type"
            content="text/html; charset=utf-8" />
      <meta name="editor"
            content="Emacs 21" />
      <meta name="author"
            content="Gary Turner" />
    <style type="text/css">
    /*<![CDATA[*/
    
    html, body {
        margin: 0;
        padding: 0;
        }
    
    form {
        width: 400px;
        }
    
    fieldset {
        margin: 0;
        border: 0 none;
        }
    
    legend {
        text-transform: uppercase;
        font-weight: bold;
        }
    
    button {
        background-color: transparent;
        border: 0 none;
        margin-left: 110px;
        }
    
    input:focus,
    textarea:focus {
        background-color: #ffc;
        color: #333;
        }
    
    label {
        display: block;
        clear: left;
        }
    
    label span {
        width: 100px;
        text-align: right;
        float: left;
        padding-right: 20px;
        }
    
    
    /*]]>*/
    </style>
    
    </head>
    
    <body>
      <form action="#"
            method="get">
        <fieldset>
          <legend>Stuur ons een bericht</legend>
    
          <label for="naam"><span>Naam:</span><input 
                 type="text"
                 id="naam"
                 value="" /></label>
    
          <label for="email"><span>E-mail:</span><input 
                 type="text"
                 id="email"
                 value="" /></label>
    
          <label for="website"><span>Website:</span><input 
                 type="text"
                 id="website"
                 value="http://" /></label>
    
          <label for="comment"><span>Comment:</span><textarea 
                 id="comment"
                 rows="6" 
                 cols="15"></textarea></label>
    
          <button type="submit"><img
                 src="../small-send-button.gif"
                 alt="send" /></button>
        </fieldset>
      </form>
    </body>
    
    </html>
    Code (markup):
    cheers,

    gary
     
    kk5st, May 16, 2006 IP
  6. ludwig

    ludwig Notable Member

    Messages:
    2,253
    Likes Received:
    66
    Best Answers:
    0
    Trophy Points:
    225
    #6
    I got it now,

    try what kkst suggest, if it doesn't work I'll download your page and try to solve the problem
     
    ludwig, May 16, 2006 IP