 unwanted white space |
  |
| MindyT |
 Dec 24 2015, 12:23 AM
Post
#1
|
|
Advanced Member  Group: Members Posts: 165 Joined: 12-November 13 Member No.: 19,963  |
Hi, can I get help understanding why there is white space between h1 and the form and how to get rid of it please?
CODE <?php require_once('functions.php'); //require_once('inc/db.php'); //Needed to load the States //require_once('inc/functions.php'); //Needed to load the States ?> <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="MSU.css"> <style type="text/css"> body { color:#F5F3F3; } header { background-color:#FFFFFF; color:#FFFFFF; } footer { background-color:#FFFFFF; width:100%; height:15%; } .antispam { diaplay: none; } #contactUs { width: 80%; padding-left:10%; padding-right:10%; padding-bottom:2%; background-color: #32696a; margin-left:auto; margin-right:auto; } #contactUs input[type=submit] { background-color: #32696a; border-width:5px; border-color:#FFFFFF; color: #FFFFFF; font-family: bad-script; font-style: bold; font-size: 24px; width:140px; display:block; margin-left:auto; margin-right:auto; margin-bottom:5px; } h1 { background-color: #32696a; font-family: bad-script; font-style: bold; font-size:32px; padding-left:5%; padding-top:20px; } .questions { padding-left:5%; } .antispam { display:none; } </style> <link href="MSU.css" rel="stylesheet" type="text/css"> <script src="jQueryAssets/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.button.min.js" type="text/javascript"></script> <script src="jQueryAssets/jquery.ui-1.10.4.tabs.min.js" type="text/javascript"></script> <script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/bad-script:n4:default;arbutus:n4:default;allan:n7:default.js" type="text/javascript"></script> </style> </head> <body> <?php logoMenu(); ?> <h1>We would love to hear from you! </h1> <div id="contactUs"> <form action="inc/process-form.php" method="post"> <input id="fname" type="text" name="fname" size="21" placeholder="First Name" required> <input type="text" name="lname" size="23" style="margin-right:10px;"placeholder="Last Name" required> <input type="text"size="50"name="orgName"placeholder="Organization's Name"maxlength="50"><br/> <br /> <!--new row--> <input id="address" type="text" name="address" size="49" placeholder="Street Addresss" style="margin-right:10px;" maxlength="50"> <input id="city" type="text" name="city" placeholder="City" size="20" maxlength="25"> <select id="state" name="state" placeholder="State" value=""> <option value ="">State</option> <?php states($state); ?> <!-- this bring the states --> </select> <input id = "zipcode" type="text" name="zipcode" placeholder="Zip Code" size="15" maxlength="5"> <br /><br /> <input type="text" id = "email" name="email" size="49" style="margin-right:10px;" placeholder="Email Address" required /> <input type="text" id = "confirmEmail" size="50" name="confirmEmail" placeholder="Confirm Email Address" /><br /> <br /> <!--new row --> <input type="text" name="phone" placeholder="Phone Number:(including area code)" size="50" style="margin-right:10px;" maxlength="10"> <input type="text" name="fax" size="49" placeholder="Fax Number: (including area code)" maxlength="10"> <!--new row --> <p>What would you like help with?</p> <div id="question"> <table id="projectOptions"> <tr span=2> <td><input type="checkbox" name="projectOptions[]" id= "projectOptions[]" value="Social Media">Social Media</td> <td><input type="checkbox" name="projectOptions[]" id="projectOptions[]" value="Web Content">Web Content Management</td> </tr> <tr> <td><input type="checkbox" name="projectOptions[]" id="projectOptions[]" value="Marketing Material">Marketing Material Creation</td> <td><input type="checkbox" name="projectOptions[]" id="projectOptions[]" value="SEO">SEO (Search Engine Optimization)</td> </tr> <tr> <td><input type="checkbox" name="projectOptions[]" id="projectOptions[]" value="Video Editing"> Video Editing</td> <td><input type="checkbox" name="projectOptions[]" id="projectOptions[]" value="Web Design">Web Design</td> </tr> </table> <textarea rows="5" cols="100" placeholder="Overview of Project" name="projectOverview" id="projectOverview" required></textarea><br /><br /> <p class="antispam">Leave this empty: <input type="text" name="bingo" value="" /></p> </div> <input type="submit" name="submit" value="Contact Us!"> </form> </div> <?php footer(); ?> </body> </html> |
  |
 
|
| pandy |
Dec 24 2015, 12:59 AM
Post
#2
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Set the bottom margin on H1 to 0.
Browsers add margins to block level elements except DIV. If they didn't do that headings, paragraphs and so on wouldn't stand out on an unstyled page. All the text would run together. Browsers do this differently though, so it's a good idea to always control margins if this matters. If you control the margins you don't need to worry about the browser you didn't check with. You may also want to set the top margin of FORM to 0. Some browsers add a margin there, or at least they used to do so. |
|
|
|
| MindyT |
Dec 24 2015, 02:23 PM
Post
#3
|
|
Advanced Member Group: Members Posts: 165 Joined: 12-November 13 Member No.: 19,963 |
That worked! Thanks so much for explaining things!
|
|
|
|
| pandy |
Dec 24 2015, 02:40 PM
Post
#4
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You're welcome. And Merry Christmas to you.
 |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 24th April 2024 - 02:27 AM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC