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

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>

Can you show us the actual HTML source rather than the ASPX source? — Chris, Jan 25 '11 at 14:19
One thing that might be causing issues is that the entity you are using for the copyright symbol is malformed. It should be `©` and not `&copy`. — Chris, Jan 25 '11 at 14:22
@Chris thanks corrected but no difference, and html actual added — user287745, Jan 25 '11 at 14:31
@john yes but, the page appears twice as large in height.. but this only in fire fox — user287745, Jan 25 '11 at 14:32
I created a fiddle - it might help http://jsfiddle.net/fQ8sh/ — ajcw, Jan 25 '11 at 14:35

ajcw · Accepted Answer · 2011-01-25T14:46:38.910

3

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/

edited Jan 25 '11 at 14:46

answered Jan 25 '11 at 14:39

ajcw

23,604
6
30
47

That seems to create a scrollbar for me on the main page, even if the content is actually not even filling up the whole page. Is that because it is adding the bars height onto the 100% when calculating the size for scrollbars or something crazy like that? – Chris Jan 25 '11 at 14:42
Sorry, you should reset the padding on the body attribute too. I've amended the answer above. – ajcw Jan 25 '11 at 14:46
Perfect now. +1. :) Though you may want to update your fiddle+link. – Chris Jan 25 '11 at 14:48

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

1 Answers1