Home/ Questions/Q 7937091
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T22:25:53+00:00

This is solved! Turns out the body tag didn’t have a height as 100%

  • 0

This is solved!
Turns out the body tag didn’t have a height as 100% but rather two width settings.
School boy error, sorry guys.
This is solved.

I’ve created a US flag using only web elements and text.

It renders fine in Chrome in full colour but only shows the stars and the black body background in Firefox.

Could someone perhaps highlight what’s going wrong here? Putting the Doctype on the page actually created the same issue Firefox is having with the Chrome rendering of the page.

Link to the flag

Any help is much appreciated.

<html>
<head>
        <title>FLAG</title>
        <style>

        * {
        margin: 0;
        padding: 0;
        }

        body {
        position: relative;
        background: #000;
        font-family: Arial, Helvetica, sans-serif;
        font-size: small;
        color: #fff;
        margin: 0;
        width: 100%;
        width: 100%;
        }

        a {
        text-decoration: none;
        color: inherit
        }

        #star_wrapper {
        position: relative;
        }

        h1 {
        line-height:35%;
        font-size: 150px;
        padding: 5%;
        margin-top: 11%;
        margin-right: 5%;
        margin-left: 5%;
        z-index: -1;
        }

        #foot {
        position: absolute;
        background: #000; 
        top: 0px;
        width: 100%;
        height: 100%;
        }

        #stripes_wrapper {
        height: 100%;
        width: 100%;
        }       

        .box {
        position: relative;
        display: block;
        height: 7.692307692307692%;
        width: 100%;
        }

        .red {
        background: #B22234;
        }

        .white {
        background: #ffffff;        
        }

        #title_wrapper {
        background: #3C3B6E;
        height: 53.84615384615385%;
        width: 40%;
        z-index: 1;
        position: absolute;
        top: 0;
        }

        .liner {
        z-index: 2;
        }
        </style>
</head>

<body>
                <div id="foot">

            <div id="title_wrapper">
            <center>
                        <div id="star_wrapper">

            <h1>

            * * * * * *<br>
                * * * * *<br>
            * * * * * *<br>
                * * * * *<br>
            * * * * * *<br>
                * * * * *<br>
            * * * * * *<br>
                * * * * *<br>
            * * * * * *<br>

                </h1>
                            </div>

            </center>
            </div>



            <div id="stripes_wrapper">
            <div class="box red"></div>
            <div class="box white"></div>
            <div class="box red"></div>
            <div class="box white"></div>
            <div class="box red"></div>
            <div class="box white"></div>
            <div class="box red"></div>
            <div class="box white liner"></div>
            <div class="box red liner"></div>
            <div class="box white liner"></div>
            <div class="box red liner"></div>
            <div class="box white liner"></div> 
            <div class="box red liner"></div>           
            </div>
            </div>

            <center>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jquery.fittext.js"></script>
        <script src="jquery-outline-1.0.js"></script>
        <script>
          $("h1").fitText(0.34);
        </script>
         <script type="text/javascript">
           $(document).ready(function(){    
            $("h1").outlineLetters({color: '#fff', size: 1});
           });
          </script>

</body>

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is not the issue, however it is a good practice to set a DOCTYPE, without it the browser renders the webpage in quirks mode, also setting a charset is a good practice as well.

    To fix your problem try this: (first erase the stray center tag after your stripes wrapper container)

    HTML:

    <div id="stripes_wrapper">
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white"></div>
        <div class="box red"></div>
        <div class="box white liner"></div>
        <div class="box red liner"></div>
        <div class="box white liner"></div>
        <div class="box red liner"></div>
        <div class="box white liner"></div> 
        <div class="box red liner"></div>           
        </div>
        </div>

<!-- ERASE THIS CENTER TAG -->
        <center>

    CSS:

    Add this to your css: 

    html {
    height: 100%;
}

    Add 100% height to the body wrapper:

    body {
    position: relative;
    background: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    color: #fff;
    margin: 0;  
    height: 100%;
}

    Add height 100% to stripes wrapper:

    #stripes_wrapper {
    width: 100%;   
    height: 100%;
}

    This should work

    • 0