nK0de Posted September 23, 2012 Report Share Posted September 23, 2012 I have a simple webpage which initially looks like this. When clicked upon a link, a small form appears to the right. And the label which reads Record Added moves to the middle of the page! How can I stop this from happening? I want that label to stay fixed where it is from the start. This is the HTML code of the page <html> <head> <link rel="stylesheet" type="text/css" href="stylesheets/styles.css" /> </head> <body id="body_services"> <div id="tasks"> <ul> <li><a id="add" href="#">Add a new taxi service</a></li> <li><a id="update" href="#">Update a taxi service</a></li> <li><a id="delete" href="#">Delete a taxi service</a></li> <li><a id="view" href="#">View taxi services</a></li> </ul> </div> <div id="addForm"> <form id="frmAddService" name="Add"> <table width="300" border="0"> <tr> <td><label for="sid">Service ID</label></td> <td><input type="text" name="sid" readonly="readonly" value="<?php echo $new_sid; ?>" style="text-align: right" /></td> </tr> <tr> <td><label for="name">Name</label></td> <td><input type="text" name="name" /></td> </tr> <tr> <td><label for="cost">Cost</label></td> <td><input type="text" name="cost" /></td> </tr> <tr> <td><label for="active">Active</label></td> <td><input type="checkbox" name="active" /></td> </tr> <tr> <td></td> <td><input type="reset" value="Cancel" /> <input type="submit" value="Save" name="save" /></td> </tr> </table> </form> </div> <div id="msg">Record added</div> <div id="updateForm"> <form id="cmbServiceIDs" name="sids"> <table width="400" border="0"> <tr> <td><label for="serviceId">Select the Service Name</label></td> <td><?php echo $dropdown; ?></td> <td><input id="load" type="submit" value="Load" name="btnload" /></td> </tr> </table> </form> <form id="frmUpdateService" name="Update" action="" method="post"> <table width="300" border="0"> <tr> <td><label for="sid">Service ID</label></td> <td><input id="sid" type="text" name="sid" value="" style="text-align:right" /></td> </tr> <tr> <td><label for="name">Name</label></td> <td><input id="name" type="text" name="name" value="" style="text-align:right" /></td> </tr> <tr> <td><label for="cost">Cost</label></td> <td><input id="cost" type="text" name="cost" value="" style="text-align:right" /></td> </tr> <tr> <td><label for="active">Active</label></td> <td><input id="active" type="checkbox" name="active" value="" /></td> </tr> <tr> <td></td> <td><input type="reset" value="Cancel" /> <input type="submit" value="Update" name="update" /></td> </tr> </table> </form> </div> </body> </html> And I have one more question. Please take a look at these screenshots. I use CSS margin to position the elements on the page. But as you can see, it takes up unnecessary space (orange colored areas). How can I remove them? This is the CSS code. * { margin:0; padding:0; } #msg { float:right; padding-right:250px; padding-top:300px; font-size:15px; font-weight:bold; color:#C00; } #tasks { float:left; margin-left:150px; margin-top:150px; } #addForm { float:right; margin-right:200px; margin-top:150px; } #updateForm { float:right; margin-top:120px; } #cmbServiceIDs { padding-bottom:20px; } Thank you Quote Link to comment Share on other sites More sharing options...
Wickham Posted September 23, 2012 Report Share Posted September 23, 2012 (edited) What happens if you add clear; both; to #msg (and possibly to #updateForm as well)? #msg { clear: both; float:right; padding-right:250px; padding-top:300px; font-size:15px; font-weight:bold; color:#C00; } #updateForm { clear: both; float:right; margin-top:120px; } You also need a doctype at the very top of the page, above the <html> tag. <!doctype html> Edited September 23, 2012 by Wickham 1 Quote Link to comment Share on other sites More sharing options...
nK0de Posted September 23, 2012 Author Report Share Posted September 23, 2012 If I do that, it moves the label way down like this Yes, I have specified the doctype in my page. I just removed it when posting the code here. Quote Link to comment Share on other sites More sharing options...
Wickham Posted September 23, 2012 Report Share Posted September 23, 2012 Why has #msg got padding-top: 300px? Record added will move up if you delete that. 1 Quote Link to comment Share on other sites More sharing options...
nK0de Posted September 23, 2012 Author Report Share Posted September 23, 2012 That did the trick. Thank you Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.