#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Posts
    2,566
    Rep Power
    171

    Table elements move!


    Hello;

    I have a drop down that updates a div onchange. It all works fie but for some reason the form slightly moves when It loads the button. Can anyone help me?
    Code:
    <div style=" width:170px">
    <div id="number_of_results_text" style=" text-align:center; color:#0076cb; margin-left:20px; margin-top:0px; display:block;">
        <span style="font-size:22px"><?php echo count($lookup);?></span><br />matching properties
    </div>
    <img alt="Submit Search" src= "images/loading.gif" id="loader_gif" style="display:none;" />
    <input type="image" onClick="showstuff('loader_gif'); hidestuff('submit_this');" 
     id="submit_this"  src="images/submit_sep_image.jpg" style="margin-left:20px; display:none; width:145px; height:45px;" alt="Submit" />
     </div>
    Code:
    function showstuff(boxid){
       document.getElementById(boxid).style.display="block";
    }
     
    function hidestuff(boxid){
       document.getElementById(boxid).style.display="none";
    }
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    add a position absolute to the styling of your input button
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Posts
    2,566
    Rep Power
    171
    Originally Posted by jack13580
    add a position absolute to the styling of your input button
    Didn't quite work. But I appreciate your help.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    add a position: absolute; and change margin-top: to -25 with your number_of_results_text div

    Code:
    <div id="number_of_results_text" style="text-align: center; color: rgb(0, 118, 203); margin-left: 20px; margin-top: -25px; display: none; position: absolute;">
      <span style="font-size:22px">6</span><br>matching properties
    </div>
    also keep the position absolute on the button
    Last edited by jack13580; April 3rd, 2013 at 09:16 AM.
  8. #5
  9. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Posts
    2,566
    Rep Power
    171
    Originally Posted by jack13580
    add a position: absolute; and change margin-top: to -25 with your number_of_results_text div

    Code:
    <div id="number_of_results_text" style="text-align: center; color: rgb(0, 118, 203); margin-left: 20px; margin-top: -25px; display: none; position: absolute;">
      <span style="font-size:22px">6</span><br>matching properties
    </div>
    also keep the position absolute on the button
    Works beautifully. What is the lesson here?
    Thank you very much
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Posts
    194
    Rep Power
    76
    Works beautifully. What is the lesson here?
    CSS is a pain and inspect element on google chrome is your friend
    Last edited by jack13580; April 3rd, 2013 at 07:06 PM.

IMN logo majestic logo threadwatch logo seochat tools logo