Elements rendering in Chrome but not Firefox?

Question

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>

Please bring code here (or to jsfiddle). Otherwise, the link to you flag won't help understanding the question when it gets solved — Alfabravo
– Alfabravo, Commented May 14, 2012 at 19:50
I looked at your CSS and it doesn't look like you have anything that needs vendor tags. Have you looked at the jQuery plugins you're using to see if they have browser limitations? — Miles
– Miles, Commented May 14, 2012 at 19:53
The height of your flag is 0px, so all of the child elements also have a height of 0px since they are all % based. — user400654
– user400654, Commented May 14, 2012 at 19:59
I don't think it's the plugins, I tested them heavily with the browsers on other projects. The homepage of the site, eda.site50.net/index.html uses a very similar set up, but that renders fine in FF. (sorry about the big slogan by the way, it's for an online game me and friends play) — Eric Bernd
– Eric Bernd, Commented May 14, 2012 at 20:00
Scrap that I'm an idiot, it was a width: 100%; width: 100%; which should had been width: 100%; height: 100%; in the body tag. — Eric Bernd
– Eric Bernd, Commented May 14, 2012 at 20:08

Derek Gutierrez · Accepted Answer · 2012-05-14 20:33:14Z

1

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

answered May 14, 2012 at 20:33

Derek Gutierrez

6381 gold badge6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Bernd Over a year ago

I'd already solved it with the missing Height 100% Derek, thanks though. Voted as correct answer, since it is.

Registered User · Accepted Answer · 2012-05-14 19:55:40Z

0

    <style>

    * {
    margin: 0;
    padding: 0;
    }

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

    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 {
    width: 100%;
    }       

    .box {
    position: relative;
    display: block;
    height: 7.692307692307692%;
    width: 100%;
    height:20px;
        background-color: #B22234;

    }

    .red {
    background-color: #B22234;
    }

    .white {
    background-color:  #ffffff;     
    }

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

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

answered May 14, 2012 at 19:55

Registered User

3,69911 gold badges43 silver badges65 bronze badges

6 Comments

Eric Bernd Over a year ago

This made the colours appear in Firefox but it also made a complete mess of everything in Chrome and FF. ~ thanks for the attempt though :)

Registered User Over a year ago

Of course it made a mess. That is because your initial HTML/CSS was completely wrong and now is wrong but less. You did not set the Height of your elements. I showed you what was wrong and now you should fix the rest.

Eric Bernd Over a year ago

Sorry, yes you were right. School boy error, thanks for the response. It works fine now.

Registered User Over a year ago

Just don't show this flag of yours to anyone who is a big fan of USA. It can be another school boy mistake.

Eric Bernd Over a year ago

Ahaha, yes, you've a point there. I love American flags, I just wanted to experiment in CSS to see if making one was possible.

|

Collectives™ on Stack Overflow

Elements rendering in Chrome but not Firefox?

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related