0

I'm working on a website (website here). The div classed .index_container and all of its contents aren't displaying properly in Firefox. They're there, but not visible. I've tried setting display: table;, which made the space the content should occupy visible, but the content itself still didn't display correctly. I've also tried messing around with overflow, to no avail.

Also, I've confirmed it works on Safari and Chrome on OS X, Chrome on Android, Chrome and Safari on iOS, and Internet Explorer on Windows. On Windows, however, Microsoft Edge has the same display problem as Firefox does.

    .index_header {
      overflow-x: auto;
      max-width: 100%;
      -webkit-overflow-scrolling: touch;
      -ms-overflow-stype: -ms-autohiding-scrollbar;
      position: relative; }
      @media screen and (max-width: 39.9375em) {
        .index_header {
          background-image: url("../img/header/banner_small.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 100%;
          background-attachment: scroll;
          background-position: left; } }
      @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        .index_header {
          background-image: url("../img/header/banner_medium.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 42.93333%;
          background-attachment: scroll;
          background-position: left; } }
      @media print, screen and (min-width: 64em) {
        .index_header {
          background-image: url("../img/header/banner_large.jpg");
          background-size: 100% 100%;
          height: 100%;
          padding-top: 34.00204%;
          background-attachment: scroll;
          background-position: left; } }
      .index_header .index_headshot {
        z-index: 2;
        border-radius: 100%; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_headshot {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
                -ms-transform: translate(-50%, -50%);
                    transform: translate(-50%, -50%); } }
        @media print, screen and (min-width: 40em) {
          .index_header .index_headshot {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
                -ms-transform: translateY(-50%);
                    transform: translateY(-50%); } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_headshot {
            margin-left: 6.2%; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_headshot {
            margin-left: 4.89629%; } }
        .index_header .index_headshot img {
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 2; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_headshot {
            height: 78.125%;
            width: 78.125%; }
            .index_header .index_headshot img {
              height: 79.375%; } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_headshot {
            height: 77.63975%;
            width: 33.33333%; }
            .index_header .index_headshot img {
              height: 77.63975%; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_headshot {
            height: 77.8%;
            width: 26.45359%; }
            .index_header .index_headshot img {
              height: 77.8%; } }
      @media screen and (max-width: 39.9375em) {
        .index_header:before {
          background-color: rgba(36, 47, 49, 0.4);
          position: absolute !important;
          top: 0rem !important;
          right: 0rem !important;
          bottom: 0rem !important;
          left: 0rem !important;
          content: '';
          width: auto;
          height: 100%; } }
      @media print, screen and (min-width: 40em) {
        .index_header:before {
          background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0));
          position: absolute !important;
          top: 0rem !important;
          right: 0rem !important;
          bottom: 0rem !important;
          left: 0rem !important;
          content: '';
          width: auto;
          height: 100%; } }
      .index_header .index_header_content {
        position: relative; }
        @media screen and (max-width: 39.9375em) {
          .index_header .index_header_content {
            margin-top: -100%; } }
        @media screen and (min-width: 40em) and (max-width: 63.9375em) {
          .index_header .index_header_content {
            margin-top: -42.93333%; }
            .index_header .index_header_content h1 {
              margin-top: 5%;
              font-size: 56px;
              color: #111617;
              opacity: .7; } }
        @media print, screen and (min-width: 64em) {
          .index_header .index_header_content {
            margin-top: -34.00204%; }
            .index_header .index_header_content h1 {
              margin-top: 3%;
              font-size: 72px;
              color: #111617;
              opacity: .7; } }
        .index_header .index_header_content .index_name {
          text-align: center;
          width: 100%;
          background-color: rgba(71, 106, 105, 0.9);
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          -webkit-flex: 0 0 auto;
              -ms-flex: 0 0 auto;
                  flex: 0 0 auto;
          min-height: 0px;
          min-width: 0px;
          width: calc(100% - 1.875rem);
          margin-right: 0.9375rem;
          margin-left: 0.9375rem;
          z-index: 1; }
          .index_header .index_header_content .index_name:after {
            position: absolute !important;
            top: 0rem !important;
            right: 0rem !important;
            bottom: 0rem !important;
            left: 0rem !important;
            content: '';
            width: auto;
            height: 100%;
            background: url(../img/header/nav2.png);
            background-repeat: repeat-x;
            margin-left: -12%;
            z-index: -1;
            opacity: .3; }
          @media screen and (max-width: 39.9375em) {
            .index_header .index_header_content .index_name {
              display: none; } }
          @media screen and (min-width: 40em) and (max-width: 63.9375em) {
            .index_header .index_header_content .index_name {
              margin-top: 21.46667%;
              padding-left: 35%; } }
          @media print, screen and (min-width: 64em) {
            .index_header .index_header_content .index_name {
              margin-top: 17.00102%;
              padding-left: 20%; } }
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Josh Guberman</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicon/manifest.json">
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico">
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

  </head>
  <body>

    <div class="top-bar" id="big">
     <div class="top-bar-left">
     <!--
      <ul class="menu">
       <li class="menu-text">Josh Guberman</li>
      </ul>
     -->
     </div>
     <div class="top-bar-right">
      <ul class="menu">
       <li><a href="#">About Me</a></li>
       <li><a href="#">CV</a></li>
       <li><a href="#">Projects</a></li>
       <li><a href="#">Artwork</a></li>
       <li><a href="#">Blog</a></li>
      </ul>
     </div>
    </div><div class="top-bar" id="small">
     <div class="menu">
      <div class="menu-text">Josh Guberman</div>
     </div>
    </div>
    <div class="index_header">
     <div class="index_headshot">
      <img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman">
     </div><!-- index_headshot -->
     <div class="index_header_content">
      <div class="index_name">
      <h1>Josh Guberman</h1>
      </div><!-- index_name -->
     </div> <!-- index_header_content -->
    </div> <!-- index_header_container --><div class="about-me">
     <div class="spacer"></div>
     <div class="top-heading"><h2>About Me</h2></div>
     <div class="spacer"></div>
     <div class="about-content">
      <p>Some words are written here</p>
     </div>
    </div>

    <div class="footer-container">
     <div class="footer-wrapper">
      <div class="footer">
       <p>&copy;Josh Guberman 2017</p>
      </div>
     </div>
    </div>

    <script src="assets/js/app.js"></script>
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
});</script>
  </body>
</html>
misterManSam
  • 24,303
  • 11
  • 69
  • 89
jguberman
  • 415
  • 1
  • 6
  • 14

2 Answers2

1

So I originally was very off. I think the problem is that firefox is default giving your header a height of 0px. Going on the console and changing it some you can see I was able to see it by making a small adjustment to your CSS for your header. Here is imgur link.

Jack Moody
  • 1,590
  • 3
  • 21
  • 38
  • But it works in Chrome. So why should he change what he has and how will that fix his problem and answer the question? https://stackoverflow.com/help/how-to-answer – Rob Aug 28 '17 at 02:20
  • I built the website with Foundation (foundation.zurb.com). Those minimum widths are the breakpoints for the various screen sizes, which essentially dictate the effective "grid" size. The breakpoints are working just fine (notice on Firefox how the elements that do show up respond differently to mobile/small, medium, and large viewport sizes). Changing those minimum widths would just change the viewport width at which the grid size changes. Thanks, though! – jguberman Aug 28 '17 at 02:31
  • Yes, thank you! This seems to do the trick - explicitly stating the height makes the missing content visible. Unfortunately, this introduces a new problem. At any given viewport size, the .index_header div's height needs to equal the background image's height (otherwise, the image and content becomes stretched). Is there any way to accomplish this? I'd rather not add the background image with HTML instead of CSS, but I suppose that would work if absolutely necessary. – jguberman Aug 28 '17 at 03:00
  • Is [this](https://stackoverflow.com/questions/20751316/how-to-make-div-to-match-image-height-with-css) the type of problem you are running into? – Jack Moody Aug 28 '17 at 03:03
  • More like [this](https://stackoverflow.com/questions/600743/how-to-get-div-height-to-auto-adjust-to-background-size). Unfortunately, neither solution is working in Firefox. Without explicitly declaring `.index_header`'s height, it's not visible. – jguberman Aug 28 '17 at 03:19
  • It looks like you fixed the problem from what I can see. How did you end up fixing it? – Jack Moody Aug 28 '17 at 13:43
0

.index_header {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-stype: -ms-autohiding-scrollbar;
  position: relative; }
  @media screen and (max-width: 39.9375em) {
    .index_header {
      background-image: url("../img/header/banner_small.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 100%;
      background-attachment: scroll;
      background-position: left; } }
  @media screen and (min-width: 40em) and (max-width: 63.9375em) {
    .index_header {
      background-image: url("../img/header/banner_medium.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 42.93333%;
      background-attachment: scroll;
      background-position: left; } }
  @media print, screen and (min-width: 64em) {
    .index_header {
      background-image: url("../img/header/banner_large.jpg");
      background-size: 100% 100%;
      height: 100%;
      padding-top: 34.00204%;
      background-attachment: scroll;
      background-position: left; } }
  .index_header .index_headshot {
    z-index: 2;
    border-radius: 100%; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_headshot {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%); } }
    @media print, screen and (min-width: 40em) {
      .index_header .index_headshot {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%); } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_headshot {
        margin-left: 6.2%; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_headshot {
        margin-left: 4.89629%; } }
    .index_header .index_headshot img {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      z-index: 2; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_headshot {
        height: 78.125%;
        width: 78.125%; }
        .index_header .index_headshot img {
          height: 79.375%; } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_headshot {
        height: 77.63975%;
        width: 33.33333%; }
        .index_header .index_headshot img {
          height: 77.63975%; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_headshot {
        height: 77.8%;
        width: 26.45359%; }
        .index_header .index_headshot img {
          height: 77.8%; } }
  @media screen and (max-width: 39.9375em) {
    .index_header:before {
      background-color: rgba(36, 47, 49, 0.4);
      position: absolute !important;
      top: 0rem !important;
      right: 0rem !important;
      bottom: 0rem !important;
      left: 0rem !important;
      content: '';
      width: auto;
      height: 100%; } }
  @media print, screen and (min-width: 40em) {
    .index_header:before {
      background: linear-gradient(to right, rgba(36, 47, 49, 0.4) 15%, rgba(36, 47, 49, 0));
      position: absolute !important;
      top: 0rem !important;
      right: 0rem !important;
      bottom: 0rem !important;
      left: 0rem !important;
      content: '';
      width: auto;
      height: 100%; } }
  .index_header .index_header_content {
    position: relative; }
    @media screen and (max-width: 39.9375em) {
      .index_header .index_header_content {
        margin-top: -100%; } }
    @media screen and (min-width: 40em) and (max-width: 63.9375em) {
      .index_header .index_header_content {
        margin-top: -42.93333%; }
        .index_header .index_header_content h1 {
          margin-top: 5%;
          font-size: 56px;
          color: #111617;
          opacity: .7; } }
    @media print, screen and (min-width: 64em) {
      .index_header .index_header_content {
        margin-top: -34.00204%; }
        .index_header .index_header_content h1 {
          margin-top: 3%;
          font-size: 72px;
          color: #111617;
          opacity: .7; } }
    .index_header .index_header_content .index_name {
      text-align: center;
      width: 100%;
      background-color: rgba(71, 106, 105, 0.9);
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      -webkit-flex: 0 0 auto;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      min-height: 0px;
      min-width: 0px;
      width: calc(100% - 1.875rem);
      margin-right: 0.9375rem;
      margin-left: 0.9375rem;
      z-index: 1; }
      .index_header .index_header_content .index_name:after {
        position: absolute !important;
        top: 0rem !important;
        right: 0rem !important;
        bottom: 0rem !important;
        left: 0rem !important;
        content: '';
        width: auto;
        height: 100%;
        background: url(../img/header/nav2.png);
        background-repeat: repeat-x;
        margin-left: -12%;
        z-index: -1;
        opacity: .3; }
      @media screen and (max-width: 39.9375em) {
        .index_header .index_header_content .index_name {
          display: none; } }
      @media screen and (min-width: 40em) and (max-width: 63.9375em) {
        .index_header .index_header_content .index_name {
          margin-top: 21.46667%;
          padding-left: 35%; } }
      @media print, screen and (min-width: 64em) {
        .index_header .index_header_content .index_name {
          margin-top: 17.00102%;
          padding-left: 20%; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Josh Guberman</title>
    <link rel="stylesheet" href="assets/css/app.css">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicon/manifest.json">
    <link rel="mask-icon" href="assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <link rel="shortcut icon" href=".assetsimg/favicon/favicon.ico">
    <meta name="msapplication-config" content="assets/img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">

  </head>
  <body>

    <div class="top-bar" id="big">
     <div class="top-bar-left">
     <!--
      <ul class="menu">
       <li class="menu-text">Josh Guberman</li>
      </ul>
     -->
     </div>
     <div class="top-bar-right">
      <ul class="menu">
       <li><a href="#">About Me</a></li>
       <li><a href="#">CV</a></li>
       <li><a href="#">Projects</a></li>
       <li><a href="#">Artwork</a></li>
       <li><a href="#">Blog</a></li>
      </ul>
     </div>
    </div><div class="top-bar" id="small">
     <div class="menu">
      <div class="menu-text">Josh Guberman</div>
     </div>
    </div>
    <div class="index_header">
     <div class="index_headshot">
      <img src="assets/img/header/headshot.svg" alt="headshot of Josh Guberman">
     </div><!-- index_headshot -->
     <div class="index_header_content">
      <div class="index_name">
      <h1>Josh Guberman</h1>
      </div><!-- index_name -->
     </div> <!-- index_header_content -->
    </div> <!-- index_header_container --><div class="about-me">
     <div class="spacer"></div>
     <div class="top-heading"><h2>About Me</h2></div>
     <div class="spacer"></div>
     <div class="about-content">
      <p>Some words are written here</p>
     </div>
    </div>

    <div class="footer-container">
     <div class="footer-wrapper">
      <div class="footer">
       <p>&copy;Josh Guberman 2017</p>
      </div>
     </div>
    </div>

    <script src="assets/js/app.js"></script>
    <script>$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
  // newSize is the name of the now-current breakpoint, oldSize is the previous breakpoint
});</script>
  </body>
</html>
Saw Zin Min Tun
  • 642
  • 3
  • 9
  • What does this do? How does it fix his problem? Explain what you are doing! https://stackoverflow.com/help/how-to-answer – Rob Aug 28 '17 at 02:21
  • I don't see any differences between your CSS and mine. Substituted for my CSS, the problem remains with the code you've provided. Thanks, though. Would you mind providing a bit more information about post? – jguberman Aug 28 '17 at 02:28
  • i think need jquery link.Try connect jquery link. – Saw Zin Min Tun Aug 28 '17 at 02:31
  • @SawZinMinTun, as in, you want me to (for instance) paste `` somewhere into my html file? If your asking for jquery or JS that I've written for the site, there is none - I'm using the pre-build JS library included with the Foundation framework. – jguberman Aug 28 '17 at 02:39