CODEWITHSUNDEEP
htmlcss
FoxDeploy
FoxDeploy

Reputation: 13567

CSS: find the cause of a large whitespace in a page

I've got the following CSS code, which is somehow causing a very large white space after my header image. Can you guys help me determine where this is coming from?

enter image description here

Here's the CSS, do you see where I'm making a mistake here?

   body {
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

    #report { width: 835px; }

    table{
    border-collapse: collapse;
    border: none;
    font: 10pt Verdana, Geneva, Arial, Helvetica, sans-serif;
    color: black;
    margin-bottom: 10px;
}

    table td{
    font-size: 12px;
    padding-left: 0px;
    padding-right: 20px;
    text-align: left;
}

    table th {
    font-size: 12px;
    font-weight: bold;
    padding-left: 0px;
    padding-right: 20px;
    text-align: left;
}

h2{ clear: both; font-size: 130%;color:#354B5E;position:relative;}

h3{
    clear: both;
    font-size: 75%;
    margin-left: 20px;
    margin-top: 30px;
    margin-bottom: 50px;
    color:#475F77;
}

h4{
    clear: both;
    font-size: 90%;

    text-align: right;
    vertical-align: bottom;
    color:#475F44;
}

.wrap {
    font-size: 60%;    
    text-align: right;
    vertical-align: bottom;
    color:#FFFFFF;      
    position:relative;
background:#466788;
    margin:0 auto;
    width:100%;
    }

    #header, #footer {
        position:fixed;
        bottom:0;
        right: 0%;
        z-index:999999;
        background:#466788;
            /*text-align: right;*/
        color:#FFFFFF;
        width:100%;
    }

img { 
position: relative; 
top: 0; 
left: 0;
width : 100%; 
margin-bottom : 500px;
} 

p{ margin-left: 20px; 
     font-size: 12px; }

table.list{ float: left; }

    table.list td:nth-child(1){
    font-weight: bold;
    border-right: 1px grey solid;
    text-align: right;
    position: relative;
}

table.list td:nth-child(2){ padding-left: 7px; }
table tr:nth-child(even) td:nth-child(even){ background: #BBBBBB; }
table tr:nth-child(odd) td:nth-child(odd){ background: #F2F2F2; }
table tr:nth-child(even) td:nth-child(odd){ background: #DDDDDD; }
table tr:nth-child(odd) td:nth-child(even){ background: #E5E5E5; }
div.column { width: 320px; float: left; }
div.first{ padding-right: 20px; border-right: 1px  grey solid; }
div.second{ margin-left: 30px; }
table{ margin-left: 20px; }

and the HTML 

<title>Migrations for 2014-06-11 0800</title>
<link rel="stylesheet" type="text/css" href="file://dellbook/Migmon/MigMon.css" />
</head><body>
<img src="\\DELLBOOK\Migmon\logo.jpg" width=100%><h2>Migration Group: <b>2014-06-11 0800</b></h2><P>Great work today, all remaining computers for this Migration group are marked as 'Migration Completed' in SharePoint.</P>
<table id="my_table">
<colgroup><col/><col/><col/><col/><col/><col/><col/></colgroup>
<thead>
<tr><th>MigrationStatus</th><th>User</th><th>ComputerName</th><th>Location</th><th>Ipv4</th><th>Domain</th><th>Online</th></tr>
</thead>

Upvotes: 3

Views: 2192

Answers (4)

Toby Cannon
Toby Cannon

Reputation: 735

Within your img selector you have set a margin on the bottom.

In this section of code:

    img { 
        position: relative; 
        top: 0; 
        left: 0;
        width : 100%; 
        margin-bottom : 500px;
    }

This line is your problem:

margin-bottom : 500px;

Try deleting this line or changing it to a value you wish.

Upvotes: 1

Luthando Ntsekwa
Luthando Ntsekwa

Reputation: 4218

this is your problem:

margin-bottom : 500px;

Here:

img { 
position: relative; 
top: 0; 
left: 0;
width : 100%; 
margin-bottom : 500px;
}

Remove it or update it to be like: 

margin-bottom : 0;

Upvotes: 1

Callum.
Callum.

Reputation: 146

In your code you have margin-bottom : 500px; within img. If the logo is the only image used, that would explain a gap of 500px underneath.

Upvotes: 1

user2853830
user2853830

Reputation: 

img
{
margin-bottom:500px;
}

that's the issue

Upvotes: 1

Related Questions