Firefox 100% height problems

programming web dev
1

Kinda done this page the wrong way round, it works in IE but not firefox (I always do it the other way around, I think doing it the wrong way might be whats gort me stumped this time).

Anyway I have a div called footer which I want at the bottom of the page.
Just above the footer div is a div called centralcontent. Centralcontent uses height:100% to make sure the footer is at the bottom of the page.

I then subtract 50px from centralcontents margin so the footer is on the page. Problem is the centralcontent in IE is showing as 100%, but not in firefox

Here is the XHTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="centralcontent">
        <div id="topbanner">
            <div class="nav">
                <ul>
                    <li><a href="loginreg/login.aspx">Play the Game</a></li>
                    <li><a href="howtoplay.aspx">How To Play</a></li>
                    <li><a href="prizes.aspx">Prizes</a></li>
                    <li><a href="faq.aspx">FAQ</a></li>
                    <li><a href="http://www.google.com" target="_blank">Google</a></li>
                    <li><a href="termsconditions.aspx">T &amp; C</a></li>
                    <li><a href="privacy.aspx">Privacy</a></li>
                    <li class="noborder"><a href="contactus.aspx">Contact Us</a></li>
                </ul>
            </div>
        </div>
        <div id="rssbanner">
            <div id="feedbanner" class="feedbar" runat="server">
                TESTING FEED BANNER
            </div>
            <div id="datebar" class="datebar" runat="server">
            </div>
        </div>

        <div id="content">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eget nulla sit amet quam auctor consectetuer. Duis at sem. Etiam cursus semper augue. Aenean est nulla, egestas id, semper a, auctor dictum, metus. Pellentesque risus mi, eleifend sit amet, iaculis id, auctor vel, arcu. Integer commodo lacus. Phasellus eget velit in massa pulvinar dapibus. Etiam quis nisl nec pede placerat blandit. Fusce ante dolor, hendrerit ut, lacinia quis, ultricies nec, est. Maecenas mattis, metus non malesuada pharetra, sapien sem rutrum elit, ut sollicitudin enim ipsum ut risus. Vivamus mi elit, blandit vel, sollicitudin sed, pharetra et, leo. Donec sed dui eget odio tempor feugiat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas malesuada ligula eu lacus. Suspendisse scelerisque urna eu urna. Etiam mattis dignissim tellus. Maecenas diam metus, lacinia tincidunt, auctor eu, consequat nec, dolor. Donec mollis dignissim metus.</p>


        </div>
        <br class="clear_spacing" />
    </div>

    <div id="footer">
            HI
    </div>
    </form>
</body>
</html>

And I’ve attached the CSS file (as a text file).

Any help offered is a big help. This is part of a big project, I’m on a tight deadline and this is beginning to take up too much of my time. Like I say, appreciate any help.

Thanks :slight_smile: