Looks like you need to give a class to your register div (I think what you call the header), and then apply margin-bottom.
Ok, thanks. I will try that!
Ugh, sorry. I’m ALMOST there. I tinkered with the padding AND margins, but the blue box is still too big on top and on the bottom. Any ideas? (I updated the CSS as well…)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multifamily Texas – Early Bird Registration</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://interfaceconferencegroup.com/mftx18/images/MFTX.css">
</head>
<body>
<div class="container3">
<h2>ACT NOW and SAVE $80!</h2>
<h4>Early Bird Registration is $279 through August 17th</h4>
</div>
<div class="container4">
<table align="center" width="600" border="1" bordercolor="#375e97" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="#375e97" align="center" colspan="2"><p class="title">Early Bird Registration Pricing</p></td>
</tr>
<tr>
<td width="50%"><p class="cell">Single Attendee</p></td>
<td width="50%"><p class="cell">$279</p></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee"><p class="cell">Two Attendees</p></td>
<td width="50%" bgcolor="#d3daee"><p class="cell">$568</p></td>
</tr>
<tr>
<td width="50%"><p class="cell">Three Attendees</p></td>
<td width="50%"><p class="cell">$857</p></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee"><p class="cell">Four Attendees</p></td>
<td width="50%" bgcolor="#d3daee"><p class="cell">$1146</p></td>
</tr>
<tr>
<td width="50%"><p class="cell">Five Attendees</p></td>
<td width="50%"><p class="cell">$1435</p></td>
</tr>
<tr>
<td width="50%" bgcolor="#d3daee"><p class="cell">Six Attendees</p></td>
<td width="50%" bgcolor="#d3daee"><p class="cell">$1724</p></td>
</tr>
</table>
</div>
<div class="container">
<h3>Refund Policy</h3>
<p class="refund"><b>InterFace Conference Group/France Media, Inc. Cancellation Policy:</b> If you cancel your attendance 30 days or more before the conference, you will be issued a full refund. Within 30 days, you will be given a credit for the amount you paid. This credit must be used within one year of the conference date to apply to another InterFace conference, for an equal or lesser amount.</p>
<p class="refund" align="center">InterFace Conference Group/France Media, Inc. <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/7e42d5bc6e55405e8c8bd7f280de4d3c.doc" target="_blank">Attendance & Substitution Policy</a> and <a href="https://custom.cvent.com/7C0825B3546540A3BA33AF202D8A465F/files/4c106328c8e140e4b66ba30f4659af92.docx" target="_blank">Privacy Policy</a></p>
</div>
</body>
</html>
Updated CSS:
@charset "UTF-8";
/* CSS Document */
body {margin: 0;
padding-left: 10px;
padding-right: 10px;
font-family: Helvetica, sans-serif;
color: #666;
}
h1 {color: #333;
font-size: 32px;
line-height: 38px;
font-weight: 700;
text-align: center;
margin-bottom: 15px;
}
h2 {color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 42px;
font-weight: 700;
font-style: italic;
text-align: center;
margin-bottom: 15px;
}
h3 {color: #333;
font-size: 26px;
font-weight: 700;
text-align: center;
}
h4 {color: #fff;
font-family: Minion Pro, Times New Roman, serif;
font-size: 28px;
font-weight: normal;
font-style: italic;
text-align: center;
margin-top: 0px;
}
h5 {font-size: 18px;
font-weight: normal;
text-align: center;
margin-top: 0;
}
p, ul {font-size: 16px;
line-height: 23px;
font-weight: normal;
text-align: left;
}
.container {padding-right: 15px;
padding-left: 15px;
padding-top: 10px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container2 {padding-top: 10px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 10px;
background-color: #dce4ea;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container3 {padding-top: 5px;
padding-bottom: 5px;
background-color: #375e97;
margin-top: 5px;
margin-bottom: 5px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.container4 {padding-right: 15px;
padding-left: 15px;
padding-top: 35px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
max-width: 850px;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
.title {color: #fff;
padding: 5px;
font-size: 20px;
font-weight: 500;
text-align: center;
margin-top: 8px;
margin-bottom: 8px;
}
.cell {font-size: 17px;
font-weight: normal;
text-align: center;
margin-bottom: 9px;
margin-top: 9px;
}
.refund {font-size: 14px;
line-height: 22px;
font-weight: normal;
text-align: left;
}
.button {transition: all 100ms ease-in; /**doubtful in emails**/
background: #375e97;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
.button:hover {transition: all 100ms ease-in; /**doubtful in emails**/
background: #555;
border-radius: 8px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-decoration: none;
display: block;
color:#ffffff;
text-align:center;
}
Do you mean between the banner heading and the table? I don’t see any space at the top.
Whichever it is, the method is the same. Use the developer tools in your browser to inspect the elements and see where the space is coming from. Adjust the CSS to reduce the space. You can make temporary changes from within developer tools to check the effect of changes, and then change your actual style sheet when you’ve found a value which works for you.
I also notice you’re still using headings incorrectly (see post 39).
2 Likes
Okay, thank you! I will alter these. Thanks again for your patience. I really need to take a class when I have free time!
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.