Member Avatar for Latrell_vie

Hi ! My website is working as intended on bigger screen,
but at @media screen and (max-width: 767px) following happens:
on firefox website still works fine but on google chrom the design cracks; <div class="menubar1">
extends out of <div class="topnavibar">

Anyone sees where i made the mistake ?

My index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">
    <link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32" />
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="initial-scale=1">

</head>
<body>
<!--#include file="topnavibar.html" -->
<div class="maincontentHome">
    <img id="Banner" src="Banner3.gif" alt="Banner" >
    <div class="maincontentpic"></div>
     <div class="clearer"></div> 
</div>
<div class="footer">
 <div class="checkoutsection"> Check&nbsp;out&nbsp;partnersites:</div>
 <div style="clear: both"></div>
 <div class="footerlinkscontainer"> 
    <div id="updateDiv"><script type="text/javascript" src="footerContentEn.js"> </script></div>
 <div class="copyrightImpressumSection">&nbsp &copy Lalala.com &nbsp | All rights reserved | Salzburg Tel: 0660 1234567 </div>
 <div id="hitCounter"><a href="http://www.reliablecounter.com" target="_blank"><img src="" alt="www.reliablecounter.com" title="www.reliablecounter.com" border="0"></a><br /><a href="http://www.arztpraxismarketing.de" target="_blank" style="font-family: Geneva, Arial; font-size: 9px; color: #330010; text-decoration: none;">Praxismarketing</a>
  </div>
 </div>
</div>
<script>
function bigImg(x) {
    x.style.height = "40px";
    x.style.width = "40px";
    mousePointer(this);
}
function mousePointer(x){
    this.style.cursor="pointer"; 
}

function normalImg(x) {
    x.style.height = "20px";
    x.style.width = "20px";
}
function goToGB(){
     location.href = 'indexEn.html';
}
function goToAUT(){
     location.href = 'index.html';
}
</script>
</body>
</html>

and here is my style.css:

html,body{min-height:120%;width:100%;margin:0;background-image:url(pic9890.jpg);background-size:120%;background-attachment:fixed;}
/*------top section-------*/
.topnavibar{position:relative;margin-top:1%;height:13%;margin-left:10%;margin-right:10%;text-align:center;font-size: 250%;
            background:#CECEF6;color:black;border:thick solid silver;border-radius: 25px;opacity:0.9}
.menubar1{padding:2.3%;margin-top:1%;margin-bottom:1%;margin-left:1%;margin-right:1%;border:black 1px solid;border-radius:3px;}
.menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:17px;
        background:#333;
        padding: 2% 2%;
        color:gold;
        margin-right:10px;
        text-decoration:none;
        border-radius:3px;
        -webkit-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -ms-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -moz-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        -o-transition:background 0.3s linear 0s,color 0.3s linear 0s;
        transition:background 0.3s linear 0s,color 0.3 linear 0s;}
.menubar1 > a:hover{background:gold;color:#333;}
#flags{position:absolute;top:1%;right:3%;cursor: pointer;}
/*------maincontent section-------*/        
.maincontentHome{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background:white;
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.maincontentSubpages{position:relative;margin-top:1%;min-height:100%;margin-left:10%;margin-right:10%;background-image: url(glossywhite4.jpg);
            border:thick solid silver;border-radius: 25px 25px 0px 0px;}
.workersdiv{background:#CECEF6;border: thick solid black;border-radius: 25px;font-size: 150%;margin-left:5%;margin-right:5%;margin-bottom:2%;padding:4%;}
#Banner{position:relative;top:1em;display: block;margin-left: auto;margin-right: auto;}
.clearer{clear: both;}

.maincontentpic{position:relative;top:2em;height:50em;background-image:url(CompHandWeb1.gif);background-size:100%;background-repeat: no-repeat;}

#picUeuWorker1{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(sam2.JPG); background-size: cover;}
#picUeuWorker2{float:left;border:thick red;margin-right:3%;width: 5em; height:9em;background-position: 50% 50%;background-repeat: no-repeat;background-image:url(ario2.jpg); background-size: cover;}
/*------footer section-------*/
.footer{position:relative;height:18%;margin-left:10%;margin-right:10%;margin-bottom:1%;background-color:black;color:grey;opacity:1;border:thick solid silver;
        border-bottom-left-radius:25px;border-bottom-right-radius:25px;}
.checkoutsection{font-size:110%;float:left;border:1px;background:orange;padding:1.5%;}
.footerlinkscontainer{text-align:center;margin:0% 0%;padding:0% 0%;font-size:200%;}
.footer  a{line-height:150%;margin:2% 1%;padding:0% 0%;}
.footer a:visited{color:blue;}
.footer a:hover{color:purple;}
#updateDiv{text-align:center;color:blue;line-height:150%;margin:2% 0% 0% 0%;padding:0% 0%;}
.copyrightImpressumSection{position:relative;font-size:60%;text-align:center;margin-bottom:1%;}
#hitCounter{position:absolute;bottom:0.1%;right:3%;font-size: 20%}

@media screen and (max-width: 767px) {
   .topnavibar{height:160px;}
   #flags{position:absolute;top:-10%;left:1%;margin-bottom:3px;} 
   .menubar1{display:flex;flex-direction:column;position:absolute;top:10%;width:93%;}
    .menubar1 > a {box-sizing:border-box;display:block;font-family:arial,helvetica,sans-serif;
        padding:0; margin:0;
        aling-self:stretch;
        margin-bottom:1px;
        font-size:17px;}

    #Banner{position:absolute;top:2em;width: 100%;display: block;margin-left: auto;margin-right: auto;}
    }
    .maincontentpic{position:relative;top:2em;height:30em;background-image:url(CompHandWeb1.gif);
     background-size:100%;background-repeat: no-repeat;}
    .copyrightImpressumSection{position:relative;width:100%;font-size:60%;text-align:center;margin-bottom:1%;}
    #hitCounter{position:static;height:20%;bottom:8%;right:3%;font-size: 20%;}
@media screen and (max-width: 768px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:5px;}
    }
@media screen and (max-width: 980px) {
    .menubar1 > a {
        font-size:7px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    }
@media screen and (max-width: 1300px) {
    .menubar1 > a {font-family:arial,helvetica,sans-serif;
        font-size:10px;}

    #Banner{position:relative;top:1em;display: block;width: 100%;margin-left: auto;margin-right: auto;}
    }
  • 2 Contributors
  • 3 Replies
  • 276 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rtrethewey

Dani AI

Generated

Good spot by — fixing the viewport explained the Chrome vs Firefox discrepancy. Since confirmed that solved the immediate symptom, a few follow‑ups will make the menu resilient across browsers and future edits.

Cross‑browser layout differences commonly come from a few sources visible in the posted CSS: percentage heights (e.g. a parent with height:13% but no fixed parent height), absolutely positioned children that the parent can’t contain, a small typo in a flex property, and overlapping media queries with adjacent breakpoints. Any misspelled property will be ignored (so a flex child won’t get the intended behavior), and absolute positioning can let an element sit outside its parent’s box in one engine but appear “contained” in another depending on how heights are computed.

A minimal set of hardening changes that avoids repeating code already in the thread:

/* safer sizing model */
*, *::before, *::after { box-sizing: border-box; }

/* ensure the top bar contains children and won't collapse */
.topnavibar { position: relative; overflow: hidden; padding: 0.8rem; }

/* mobile: stack links without absolute positioning so they stay inside the nav */
.menubar1 { display: flex; flex-direction: column; position: relative; top: 0; left: 0.5rem; right: 0.5rem; }

/* make each link wrap and fill the available width */
.menubar1 > a { display: block; width: 100%; align-self: stretch; white-space: normal; word-break: break-word; }

Practical debugging steps: use DevTools’ element inspector and the device toolbar to watch computed width/height, temporarily add an outline (for example * { outline: 1px dashed red; }) to see bounding boxes, and consolidate media queries (avoid adjacent max-width: 767px and max-width: 768px rules that can fight each other). Prefer padding/min‑height or px/vh for header sizing rather than percent heights unless the ancestor chain has explicit heights. These small changes will reduce browser quirks and future breakage.

Recommended Answers

All 3 Replies

Member Avatar for rtrethewey

Your 'viewport' <meta> tag is inadequate. Try:

<meta name="viewport" content="width=device-width, initial-scale=1">

Edited by rtrethewey
Member Avatar for Latrell_vie

Big thanks rtrethewey , that was the problem !!!! How did you find it so fast, did you once have the same trouble ?

Member Avatar for rtrethewey

It's just that the 'viewport' <meta> tag is a critical step in achieving responsive design, so that was the first thing I looked at in your code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.