Hello

I have a footer here (screenshot) and I can't SEEM to bring the height down on that purple box around the text. The space between the top and bottom margins should be uniform, but it doesn't work if I simple try to reduce the height. This is the CSS I am using:

Code: [Select]footer{
    bottom: 0;
    POSITION: fixed;
    width: 100%;
}

.footer {
   
    height: 30px;
    margin: auto;
    width: 100%;
    text-align:center;
    padding:15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom:15px;
    width: 8%;
    border: solid 1px;
    border-color: #BD2CBB;
} 


And this is the HTML:

Code: [Select]footer>
    <div class="footer">
     <p><a runat="server" class="centerhere" href="http://www.mysite.com">My Site</a></p>
    </div>
</footer>
Glad for any advice!

Thanks.

[ATTACHMENT deleted by admin to conserve space]I could not find any other problems by quick glance, Sorry if this does not fix it

1: The "margin: auto;" may be messing with the height
Or:

footer {
    bottom: 0;
    position: fixed; <- that might be you problem
    width: 100%;
}Hello shiverbob

If I change that to relative, it keeps the shape of the box as it is, but moves it right up the page.

But thanks for your reply.

It may be that as this is an ASP.NET project, that the source of the 'misshapen' box lies higher up the HIERARCHY (which I was hoping to avoid!).

Thanks again.In the footer style what is the

"Bottom: 0;"

As that could interfere with it.
That positions the box in relation to the bottom of the screen. So if I replace that 0 with, say 100, the box rises further upwards. But it is not related to the how the text is positioned inside the box. That does not change; so at 100px (instead of it's CURRENT 0), the text position inside the box looks the same.