Why does the following styling not work in firefox? (it works in all other browsers)

StackOverflow https://stackoverflow.com/questions/4794180

  •  24-10-2019
  •  | 
  •  

Question

Edit: The copyright message does not appear on screen, but it is there in the HTML source of the Firefox window!

ASP.NET page:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="learnvb1._Default" %>
<!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>Welcome to</title>
    <link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1"  runat="server">
        <div id="main_holder">
          <center>
            <asp:Label ID="Label1" runat="server" Text="Copyright &copy 2011 blah blah. All rights reserved."></asp:Label>
          </center>
        </div><!-- main_holder div ends -->
    </form>
</body>
</html>

StyleSheet1.css

body 
{
    background-color:Black;
}    
#main_holder
{
    position:fixed;
    margin-top:95%;
    padding-top:0.3%;
    background-color:Yellow;
    color:Green;
    overflow:auto;
    width:100%;
}

Firefox HTML:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.13) Gecko/20101203 Firefox/3.6.13

<!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><title>
    Welcome to
</title><link href="StyleSheet1.css" rel="stylesheet" type="text/css" /></head>
<body>
    <form name="form1" method="post" action="Default.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMzA0NzMwODMzD2QWAgIDD2QWAgIBDw8WAh4EVGV4dAXAA0Jyb3dzZXIgQ2FwYWJpbGl0aWVzDQpUeXBlID0gRmlyZWZveDMuNi4xMw0KTmFtZSA9IEZpcmVmb3gNClZlcnNpb24gPSAzLjYuMTMNCk1ham9yIFZlcnNpb24gPSAzDQpNaW5vciBWZXJzaW9uID0gMC42DQpQbGF0Zm9ybSA9IFdpblhQDQpJcyBCZXRhID0gRmFsc2UNCklzIENyYXdsZXIgPSBGYWxzZQ0KSXMgQU9MID0gRmFsc2UNCklzIFdpbjE2ID0gRmFsc2UNCklzIFdpbjMyID0gVHJ1ZQ0KU3VwcG9ydHMgRnJhbWVzID0gVHJ1ZQ0KU3VwcG9ydHMgVGFibGVzID0gVHJ1ZQ0KU3VwcG9ydHMgQ29va2llcyA9IFRydWUNClN1cHBvcnRzIFZCU2NyaXB0ID0gRmFsc2UNClN1cHBvcnRzIEphdmFTY3JpcHQgPSAxLjQNClN1cHBvcnRzIEphdmEgQXBwbGV0cyA9IFRydWUNClN1cHBvcnRzIEFjdGl2ZVggQ29udHJvbHMgPSBGYWxzZQ0KU3VwcG9ydHMgSmF2YVNjcmlwdCBWZXJzaW9uID0gDQpkZGTubPxLL/PJfjQcbjhmJsHYoi86MA==" />
</div>        
    <span id="Label2">Browser Capabilities
Type = Firefox3.6.13
Name = Firefox
Version = 3.6.13
Major Version = 3
Minor Version = 0.6
Platform = WinXP
Is Beta = False
Is Crawler = False
Is AOL = False
Is Win16 = False
Is Win32 = True
Supports Frames = True
Supports Tables = True
Supports Cookies = True
Supports VBScript = False
Supports JavaScript = 1.4
Supports Java Applets = True
Supports ActiveX Controls = False
Supports JavaScript Version = 
</span>        
     <div id="main_holder">   
              <center>
        <span id="Label1">Copyright © 2011 blah and blah and blah. All rights reserved.</span>
        </center>
    </div>
    <!-- main_holder div ends -->           
    </form>
</body>
</html>
Was it helpful?

Solution

It should work if you add this CSS:

html,  body { height: 100%; padding: 0; }

And replace margin-top: 95% in your #main_holder CSS with bottom: 0;, like so:

#main_holder {
    position:fixed;
    bottom:0;
    padding-top:0.3%;
    background-color:Yellow;
    color:Green;
    overflow:auto;
    width:100%;
}

See http://jsfiddle.net/fQ8sh/2/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top