CSS: find the cause of a large white space on a page

I have the following CSS code that somehow causes 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, can you see where I am making the 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 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>

      

+3


source to share


4 answers


it's your problem:

margin-bottom : 500px;

      

Here:



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

      

Delete it or update it to look like this:

margin-bottom : 0; 

      

+1


source


img
{
margin-bottom:500px;
}

that the issue

      



+1


source


In your code, you have margin-bottom: 500px; within img. If the logo is the only image used, that explains the 500 pixel gap below it.

+1


source


In your img selector, you have set the edge at 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 to remove this line or change it to the value you want.

+1


source







All Articles