How to get rid of extra space between 2 html tables? - html

Question

I have 2 html tables, in source html file, there is only one line between them, but in browser there is a large space, I looked into the css, there is nothing about table there, how to get rid of the extra space ?
Here is the css file :
/*
* GENERICS
*/
body {
background-repeat:repeat-x;
padding:4px;
padding-top:0px;
margin:0px;
}
/*
* TOP LEVEL
*/
.pageTitle {
color:#000000;
font-family:century gothic;
font-size:22px;
font-weight:bold;
line-height:22px;
vertical-align:bottom;
border-bottom:solid;
border-bottom-width:3px;
border-bottom-color:#0099cc;
}
.topLevelTitleNoLine {
padding:0px;
vertical-align:bottom;
height:35px;
color:#000000;
font-family:century gothic;
font-size:18px;
font-weight:bold;
}
.topLevelTitle {
padding:0px;
vertical-align:bottom;
height:35px;
color:#000000;
font-family:century gothic;
font-size:18px;
font-weight:bold;
border-bottom:solid;
border-bottom-width:3px;
border-color:#0099cc;
}
.topLevelSubTitle {
padding:0px;
vertical-align:bottom;
color:#000000;
font-family:century gothic;
font-size:16px;
font-weight:bold;
border-bottom:solid;
border-bottom-width:3px;
border-color:#0099cc;
}
.topLevelSubTitleSmall {
padding:0px;
vertical-align:bottom;
color:#000000;
font-family:century gothic;
font-size:11px;
font-weight:bold;
border-bottom:solid;
border-bottom-width:3px;
border-color:#0099cc;
}
.topHeader {
background-color:#003366;
text-align:right;
vertical-align:bottom;
color:#ffffff;
}
.topStatus {
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:16px;
border-bottom: 3px solid #000000;
color:#00000;
padding:3px;
margin:0px;
}
.topnavItem {
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:10px;
border-bottom: 3px solid #000000;
color:#ffffff;
padding:3px;
text-align: right;
}
.headerCompanyL {
width:190px;
text-align:left;
background-color:#003366;
}
.headerCompanyR {
width:190px;
text-align:right;
background-color:#003366;
}
.headerclient {
font-family:arial,times,helvetica,sans-serif;
font-size:15px;
color:#FFFFFF;
text-align:left;
background-color:#003366;
padding-top:3px;
padding-bottom:3px;
}
td.footerMsg {
font-family:arial,helvetica,sans-serif;
font-size:10px;
text-align:center;
line-height:28px;
color:#999999;
border-top:solid;
border-width:1px;
border-color:#999999;
}
a.footerMsg {
color:#999999;
text-decoration:none;
}
a.footerMsg:hover {
color:#cc0000;
text-decoration:underline;
}
/*
* NAVIGATION
*/
a.screensNavItem:link {
font-size:12px;
text-decoration:none;
color:#003366;
}
a.screensNavItem:visited{
font-size:12px;
text-decoration:none;
color:#003366;
}
a.screensNavItem:hover{
font-size:12px;
text-decoration:none;
color:#003366;
}
.screensnavCurrent {
font-size:12px;
font-weight:bold;
text-decoration:none;
color:#003366;
background-color:#cccccc;
}
/*
* DISPLAY DATA
*/
.displayHeaderCell {
font-weight:bold;
font-family:arial,sans-serif;
font-size:11px;
}
.listTable {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
padding:3px;
}
.pageinfotitle {
font-weight:bold;
font-size: 11px;
color:#000000;
padding:3px;
background-image:url(background.nav.gif);
border:solid;
border-width:1px;
border-color:#999999;
border-bottom-color:#000000;
border-bottom-width:3px;
vertical-align:bottom;
}
.pageinfotitlered {
font-weight:bold;
font-size: 11px;
color:#FF0000;
padding:3px;
background-image:url(background.nav.gif);
border:solid;
border-width:1px;
border-color:#999999;
border-bottom-color:#000000;
border-bottom-width:3px;
vertical-align:bottom;
}
.pageinfotitleClear {
font-weight:bold;
font-size: 11px;
color:#000000;
padding:0px;
border:none;
border-width:0px;
background: transparent;
vertical-align:left;
text-align:right;
}
.pageinfo {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
}
.pageinfolink {
font-weight:bold;
font-size: 16px;
color:#000000;
padding:3px;
background-image:url(background.nav.gif);
border:solid;
border-width:1px;
border-color:#999999;
border-bottom-color:#000000;
border-bottom-width:3px;
vertical-align:bottom;
}
.displayCategory {
font-weight:bold;
color:#000000;
font-size:12px;
}
.displayCategorySmall {
font-weight:bold;
color:#000000;
font-size:10px;
}
.displayLargeFont {
font-weight:normal;
font-family:arial,sans-serif;
font-size:14px;
}
.displayRedHint {
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:12px;
color:#FF0000;
padding:3px;
margin:0px;
}
.displayEndDate {
background-color: transparent;
border-top: transparent;
border-right: transparent;
border-bottom: transparent;
border-left: transparent;
width: 60px;
height: 20px;
font-size:11px;
word-wrap: break-word;
padding-bottom: 60%;
}
.displayAmount {
background-color: transparent;
border-top: transparent;
border-right: transparent;
border-bottom: transparent;
border-left: transparent;
width: 60px;
height: 20px;
font-size:11px;
word-wrap: break-word;
padding-bottom: 60%;
padding-left: 50%;
}
.processTextDisplayLabel {
background-color: transparent;
border-top: transparent;
border-right: transparent;
border-bottom: transparent;
border-left: transparent;
font-size:14px;
word-wrap: break-word;
padding-bottom: 60%;
}
.formUWButtons {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#ffffff;
color:#000000;
width:70px;
}
.formAddButtons {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
color:#000000;
width:50px;
}
.processTextDisplayLabel {
background-color: transparent;
border-top: transparent;
border-right: transparent;
border-bottom: transparent;
border-left: transparent;
font-size:14px;
word-wrap: break-word;
padding-bottom: 60%;
}
.processTextSmallLabel {
background-color: transparent;
border-top: transparent;
border-right: transparent;
border-bottom: transparent;
border-left: transparent;
font-size:11px;
word-wrap: break-word;
padding-bottom: 60%;
width: 190px;
}
/*
* FORMS
*/
.processTable {
font-family:arial,sans-serif;
padding:3px;
font-size:11px;
color:#000000;
border:solid;
border-width:1px;
border-color:#000000;
background-color:#dfdfdf;
}
.processRegular {
text-decoration:none;
color:#000000;
font-size:12px;
}
.processRegularSmall {
text-decoration:none;
color:#000000;
font-size:11px;
}
.processRequire {
font-weight:bold;
text-decoration:none;
color:#000000;
font-size:12px;
}
.processError {
font-weight:bold;
text-decoration:none;
color:#ff0000;
font-size:12px;
}
.processTextLabel {
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:12px;
}
.processMsgError {
font-family:arial,helvetica,sans-serif;
font-weight:bold;
font-size:14px;
color:#990033;
padding:3px;
margin:5px;
}
.processLargeHeaderText {
font-weight:bold;
font-size: 16px;
color:#000001;
padding:3px;
background-image:url(background.nav.gif);
border:solid;
border-width:2px;
border-color:#999999;
border-bottom-color:#000000;
border-bottom-width:3px;
vertical-align:bottom;
}
.processDisabledText {
text-decoration:none;
color:#c0c0c0;
font-size:12px;
}
.processText {
font-family:arial,sans-serif;bodyIframe
font-size:11px;
color:#000000;
border:solid;
border-width:1px;
border-color:#000000;
padding-left:5px;
padding-right:5px;
}
.processTextAlt {
font-family:arial,sans-serif;
text-decoration:none;
color:#000000;
font-size:11px;
}
.processBaseItem {
padding:2px;
padding-top:3px;
font-size:11px;
}
.processBaseItemSmall {
padding:2px;
padding-top:3px;
font-size:9px;
}
.processSelect {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
}
.processSelectClear {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
padding:0px;
border:none;
border-width:0px;
background: transparent;
}
.processSelectFixed {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
width:100px;
}
.processSelectSmall {
font-family:arial,sans-serif;
font-size:9px;
color:#000000;
}
.processBaseButton {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
color:#000000;
width:100px;
}
.processBaseFrame {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
color:#000000;
}
.processSubmit {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
color:#000000;
width:90px;
}
.processSubmitRed {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
color:#FF0000;
width:90px;
}
.processLabel {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#dfdfdf;
color:#000000;
border:none;
text-align:right;
width:60px;
}
.processReadOnly {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
border:none;
text-align:right;
}
.processMSRCalc {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#cccccc;
border:solid ;
border-width: thin;
text-align:right;
}
.processMSRCalcTotal {
font-family:arial,sans-serif;
font-size:11px;
font-weight:bold;
background-color:#FFFFFF;
border:solid ;
border-width: thin;
text-align:right;
}
.processBlankRow {
font-family:arial,sans-serif;
font-size:6px;
background-color:#DFDFDF;
border:none;
text-align:right;
}
/*
* NEWS
*/
.newsBasePageTitle {
padding:0px;
vertical-align:bottom;
height:35px;
color:#000000;
font-family:century gothic;
font-size:18px;
font-weight:bold;
border-bottom:solid;
border-bottom-width:3px;
border-color:#0099cc;
}
.newsBaseTitle {
padding:0px;
vertical-align:bottom;
color:#000000;
font-family:century gothic;
font-size:15px;
font-weight:bold;
border-bottom:solid;
border-bottom-width:1px;
border-color:#0099cc;
}
.newsBaseText {
text-decoration:none;
color:#000000;
font-size:14px;
}
.newsBaseTextAlt {
padding:0px;
vertical-align:bottom;
color:#000000;
font-size:14px;
border-bottom:solid;
border-bottom-width:1px;
border-color:#0099cc;
}
/*
* STATUS
*/
.statusStyleSearchResult {
padding: 3px;
line-height: 18px;
}
.statusStyleSearchResult TD {
padding: 3px;
color: black;
font: 11px Arial, Helvetica, Sans-Serif;
border-bottom: 1px solid black;
}
.statusStyleNew {
background-color: #8AC5ff;
}
.statusStyleFrozen {
background-color: #E70000;
}
.statusStyleFuture {
background-color: #FFAAFF;
}
.statusStyleExpired {
background-color: #EB66D3;
}
.statusStylePending {
background-color: #FFE4B0;
}
.statusStyleApproved {
background-color: #99ffcc;
}
.statusStyleMoreInfo {
background-color: #ffff99;
}
.statusStyleEdit {
background-color: #8AC5ff;
}
.statusStyleExclusive {
background-color: #8AC5ff;
}
.statusStyleDeclined {
background-color: #ffcccc;
}
.statusStylePresented {
background-color: #00ffff;
}
.statusStyleBound {
background-color: #00ff99;
}
.statusStyleBoundOther {
background-color: white;
}
.statusStyleClosed {
background-color: #E0E0E0;
}
.statusStylePreScreened {
background-color: #FF6600;
}
.statusStyleCancelled {
background-color: #ff9999;
}
.statusStypePendingEndorsement {
background-color: #CC99FF;
}
.statusStyleSuspend {
background-color: #FFE4B0;
}
.statusStylePendingRenewal {
background-color: #99FF33;
}
.newType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#8AC5ff;
}
.pendingType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#FFE4B0;
}
.more-informationType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#ffff99;
}
.approvedType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#99ffcc;
}
.declinedType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#ffcccc
}
.pending-endorsementType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#cc99ff
}
.boundType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#00ff99
}
.presentedType {
font-family:arial,helvetica,sans-serif;
font-size:12px;
line-height:18px;
color:#000000;
border-bottom: 1px solid #000000;
padding:3px;
background-color:#00ffff
}
/*
* ERRORS
*/
.errorLogon {
text-decoration:none;
color:#ff0000;
font-size:12px;
}
.exceptionType {
font: 10px lucida console;
color: black;
border: 1px solid black;
padding:3px;
}
.exceptionType TH {
background: silver;
}
.exceptionType TD {
background: white;
}
/*
* GENERAL
*/
.spacer {
padding:0px;
font-size:1px;
}
.centerBlock {
vertical-align:middle;
}
.fieldBase {
font-size: 11px;
color:#000000;
padding:0px;
background-color:#dfdfdf;
border:solid;
border-width:1px;
border-color:#dfdfdf;
border-bottom-width:3px;
vertical-align:bottom;
}
.fieldBaseR {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
border:solid;
border-width:1px;
border-color:#000000;
padding-left:0px;
padding-right:1px;
text-align:right;
}
.fieldBaseL {
font-family:arial,sans-serif;
font-size:11px;
color:#000000;
border:solid;
border-width:1px;
border-color:#000000;
padding-left:0px;
padding-right:1px;
text-align:left;
}
.emailLabel {
text-decoration:none;
color:#000000;
font-weight:bold;
font-size:12px;
width:230px;
}
td.copyright {
font-family:arial,helvetica,sans-serif;
font-size:10px;
text-align:center;
line-height:28px;
color:#999999;
border-width:1px;
border-color:#999999;
}

Answer 1

You could benefit of a CSS reset. Add to the top of your css file (before the body {} declaration):
* {margin: 0; padding: 0;}
Please note the CSS reset will remove all the default margins/paddings. You will need to manually add them when suitable. For a less generic reset, please try:
table {margin: 0; padding: 0;}

Answer 2

I like to troubleshoot an issue like this with a tool that highlights rendered elements as you mouse-over them in the DOM. There are many, but there is one built in to Chrome's developer tools. Right click on the space and "Inspect Element".
Then you'll know which element's box model contains the space, and you won't need to resort to trial-and-error measures.

Answer 3

In css add : br { display: none; }