• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Menu Bar Not Displaying Properly on Safari

TokyoNerd

New Coder
Below is the code I'm using to build a website. Everything looks great on every web browser except for Safari. The website is in both Japanese and English, and for whatever reason, the gray line underneath the menu bar isn't displaying properly on the Japanese version of the website when I test it in Safari. The English version works fine in Safari. I'd like it so that the gray line that's on the bottom of the menu bar is displayed as normal.

I've tried changing the height to 100vx, but that didn't work. Any help would be much appreciated.


HTML:
<!DOCTYPE html>
<html lang="ja">
  
<meta name="viewport" content="width=device-width, initial-scale=1.0;" charset="utf-8">
  
<body style="background-color: white; font-family: sans-serif;">
  
<title>MORIKOBOSHI・ホームページ</title>
    
<div class="page-wrap">
    
<div class="cp_cont">
<input id="cp_toggle03" type="checkbox"/>
<div class="cp_mobilebar">
<label for="cp_toggle03" class="cp_menuicon">
<span></span>
</label>
</div>
<label id="h-menu_black" class="cp_toggle03" for="cp_menuicon"></label>
<div id="body" class="noscroll"></div>
      
<header class="cp_offcm03">
      
<nav>
<ul style="text-align: center; margin-left: 210px; overflow: hidden;">
          
<li style="border-bottom: .05px solid lightgray;"><a href="Website_Home_Page.html">ホーム</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Website_Blog.html">ブログ</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Website_About.html">このサイトについて</a></li>
<li style="border-bottom: .05px solid lightgray;"><a href="Bibliography.html">参考文献</a></li>
  
<div class="searchbar">
          
<form id="frmSearch" class="search2" method="get" action="default.html" style=" padding-right: 10px; padding-top: 20px; text-align: center; position: inline;">
<input class="search2" id="txtSearch" type="text" placeholder="Googleカスタム検索" name="serach_bar" size="31" maxlength="255" value="" style="top: 185px; width: 180px; height: 26px;">
<input class="search1" type="submit" name="submition" value="検索" style="padding-left: 5px; top: 153px; height: 25px; width: 34px; display: inline-flex; justify-content: center;">
<input class="search2" type="hidden" name="sitesearch" value="default.html">   
  
  
<script type="text/javascript">
 document.getElementById('frmSearch').onsubmit = function() {
 window.location = 'http://www.google.com/search?q=site:morikoboshi.com' + document.getElementById('txtSearch').value;
        return false;
    }
  
 document.getElementById('cp_toggle03').onchange = function() {
 if (document.getElementById('cp_toggle03').checked) {
 document.body.style.overflow = "hidden";
  } else {
 document.body.style.overflow = "";
  }
}
 
if(!!window.performance && window.performance.navigation.type == 2)
{
    window.location.reload();
}
  
</script>
 
</form>
</div>
</ul>   
</nav>
</header>
  
<br><div class="image" style="margin: 10px;">
  
<a href="Website_JapanTravel.html"><img src="photos/Home_Page/Travel/Homepage_Travel_Japanese.jpg" alt="Travel" width="85%"></a>
  
<div class=" responsive-image-container"><a href="photos/Blog/Japanese_Culture/Blog/yokai/yokai.html"><img src="photos/Home_Page/Yokai/Homepage_yokai_Japanese.jpg" alt="Yokai" width="42.4%"></a> <a href="photos/Links/Kansai/Kansai_html_photos/Kyoto_html_photo/Kyoto/Blog/Kongoji/Kongoji_html_photo/Kongoji.html"><img src="photos/Home_Page/Kongoji/Kongoji_homepage_Japanese.jpg" alt="Kongoji" width="42.4%"></a>
</div>
  
<div class=" responsive-image-container"><a href="photos/Links/Kanto/Kanto_html_photos/Saitama_html_photos/Saitama/Blog/Tamagawa_Onsen/Tamagawa_Onsen_html_photo/Tamagawa_Onsen.html"><img src="photos/Home_Page/Tamagawa_Onsen/Homepage_Tamagawa_Onsen_Japanese.jpg" alt="Tamagawa_Onsen" width="42.4%"></a> <a href="Website_About.html"><img src="photos/Home_Page/About_Website/Homepage_Website_Japanese.jpg" alt="Koizumi" width="42.4%"></a>
</div>
  
<br><br><footer class="site-footer" style="font-size: 12px;">MORIKOBOSHI© | <a href="Website_Home_Page_English.html">English</a></footer></div>
    
</div>
    
<style>
  
 .searchbar{float: right;}
  
 .image{text-align: center;}
  
 .setsumei{margin-left: 20px;
           margin-right: 20px;}
  
 .footer{width: 100%;
           height: 40px;
           text-align: center;
           border-top: 1px solid black;
           position: absolute;
           bottom: 0;
           padding: 10px;}
  
 .page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -40px;
}

 .page-wrap:after {
  content: "";
  display: block;
  }

 .site-footer, .page-wrap:after {
  /* .push must be the same height as footer */
  height: 10px;
}

 .site-footer {
  text-align: center;
  border-top: 1px solid black;
  padding: 10px;
}
  
  

 @media (max-width: 1130px)and (min-width: 280px) {
 .responsive-image-container{
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    img{width:85%;}
    }
      

 *, *:before, *:after {
    padding-left: 0;
    margin: 0;
    box-sizing: border-box;
  
}   

 ol, ul {
    list-style: none;
}

 a {
    text-decoration: none;
    color: black;
}
  
 .cp_cont {
    height: auto;
}
  
/* menu */
 .cp_offcm03 {
    position: relative;
    z-index: 5000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    width: 100%;
    height: auto;
    padding-top: 0;
    -webkit-transition: transform 0.3s ease-in;
            transition: transform 0.3s ease-in;
    text-align: center;
    color: black;
    background-color: white;
}
 .cp_offcm03 nav,
 .cp_offcm03 ul {
    height: 100%;
}

 .cp_offcm03 li {
    display: inline-block;
    margin-right: -6px;
}

 .cp_offcm03 a {
    display: block;   
    padding: 15px 45px;
    margin-bottom: -5px;
    -webkit-transition: background-color .3s ease-in;
            transition: background-color .3s ease-in;
}
  
 .cp_offcm03 a:hover {
    background-color: lightgray;
}

/* menu toggle */
 #cp_toggle03 {
    display: none;
}

 #cp_toggle03:checked ~ .cp_offcm03 {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 #cp_toggle03:checked ~ .cp_container {
    -webkit-transform: translateX(0);
                    transform: translateX(0);
}

 .cp_mobilebar {
    display: none;
  
}

/* content */
 .cp_container {
    position: relative;
    top: 0;
    padding: 35px auto;
    -webkit-transition: transform .3s ease-in;
            transition: transform .3s ease-in;
} 

 .cp_content {
    margin: 0 auto;
    padding: 20px;
    height: 65vh;
    text-align: center;

}

@media (max-width: 1130px)and (min-width: 280px) {
/* menu */
 .cp_offcm03 {
        position: fixed;
        left: -250px;
        overflow-y: hidden;
        width: 250px;
        height: 100%;
        padding-top: 40px;
        color: black;
        background-color: white;
        z-index: 1000;
    }
  
 .cp_offcm03 nav {
        background: white;
        border-right: 0.5px solid lightgray;
        margin-left: -210px;
    }
  
  
  
 .cp_offcm03 li {
        display: block;
        margin-right: 0;}

      
      
 .cp_offcm03 a {
        padding: 20px;
      
    }
  
/* menu toggle */
 .cp_mobilebar {
        display: block;
        z-index: 2000;
        position: relative;
        top: 0;
        left: 0;
        padding: 0 25px;
        width: 100%;
        height: 40px;
        background-color: white;
        border-bottom: .05px solid lightgray;
      
      
    }
  
 .cp_menuicon {
        display: block;
        position: relative;
        width: 25px;
        height: 100%;
        cursor: pointer;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
 .cp_menuicon > span {
        display: block;
        position: absolute;
        top: 55%;
        margin-top: -0.3em;
        width: 100%;
        height: 0.2em;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease;
                transition: transform .3s ease;
    }
 .cp_menuicon > span:before,
 .cp_menuicon > span:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 1px;
        background-color: black;
        -webkit-transition: transform .3s ease-in;
                transition: transform .3s ease-in;
    }
  
 .cp_menuicon > span:before {
        -webkit-transform: translateY(-0.6em);
                transform: translateY(-0.6em);
    }
 
 .cp_menuicon > span:after {
        -webkit-transform: translateY(0.6em);
                transform: translateY(0.6em);
    }

 #cp_toggle03:checked + .cp_mobilebar .cp_menuicon {
        -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
    }
  
 #cp_toggle03:checked + .cp_mobilebar span:before,
 #cp_toggle03:checked + .cp_mobilebar span:after {
        -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
    }
  
 #cp_toggle03:checked ~ .cp_offcm03 {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
  
 #cp_toggle03:checked ~ .cp_container {
        -webkit-transform: translateX(250px);
                transform: translateX(250px);
    }
  
 input:checked ~ #h-menu_black {
    display: block;/*カバーを表示*/
    opacity: .6;
}
  
 #h-menu_black {
    display: none;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    transition: .7s ease-in-out;
}
  
/* content */
 .cp_container {
        top: 60px;
        height: 92vh;
        text-align: center;
    }
  
 .noscroll{
        overflow: hidden;
        position: fixed;
    }
  
</style>
    </div>
    </body>
</html>
 
Last edited by a moderator:

OldMan

King Coder
Browsers work hard to render the website code into a usable object. Safari is not great at doing this. Your code is so wrong one has to applaud chrome and firefox and edge for making this look good. Here is the backbone to a website:
Code:
<!DOCTYPE html>
<html lang="ja">
<head>
<meta>
<title></title>
<link rel="stylesheet" href="tyles.css" />
<style></style>
</head>
<body>

<script></script>
</body>
</html>
Your code is so messed up Please fix it so we can read what you want to be done.
I looked at your style section and
@media (max-width: 1130px)and (min-width: 280px) {
was missing the ending bracket.
Please move the two @medias to the end of the style codes when you resubmit your code.
Thank you.
 
Top