0

margin-top is working in IE but not working in Google Chrome. In my design two menus display each one above the other.

The problem is in this line margin-top:30%; in .anothermenu ul.

In the design if I work in Chrome then the second menu displays above the first menu and the second menu display in top of page (menu 111,222,333). However in internet explorer 11 not display this problem 

body {
  margin: 0
}

.container ul {
  border-top: 2px solid red;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  width: 100%;
  /* Full width */
  height: 4%;
  padding: 1px;
}

.container li {
  float: right;
}

.container li a {
  color: white;
  padding: 16px;
  text-decoration: none;
}

.container li i {
  color: white;
}

.w3ls_header_middle {
  padding: 0 0;
}

.agileits_logo {
  float: right;
  margin-right: 0em;
  margin-top: 2em;
}

.agileits_banner {
  float: left;
  margin-left: 1em;
}

.anothermenu ul {
  position: absolute;
  margin-top: 30%;
  list-style-type: none;
  overflow: hidden;
  background-color: #333;
  height: 10%;
  width: 100%;
}

.anothermenu li {
  float: left;
  width: 10%;
}

.anothermenu li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.anothermenu li a:hover:not(.active) {
  background-color: #111;
}
<div class="container">
  <ul>
    <li><a href="#home">الرئيسيه</a></li>
    <li><a href="#news">نبذه عن</a><i>|</i></li>
    <li><a href="#contact">اتصل بنا</a><i>|</i></li>
    <li><a href="#contact">اللغه</a><i>|</i></li>
    <li><a href="#contact"> تسجيل دخول</a><i>|</i></li>
  </ul>
  <div class="w3ls_header_middle">
    <div class="container">
      <div class="agileits_logo">
        <img src="../../images/logo.png">
      </div>
      <div class="agileits_logo"></div>
    </div>
    <div class="agileits_banner">
      <embed src="../../images/banner.swf" type="application/x-shockwave-flash" width="600" height="200" />
    </div>
    <div class="clearfix"> </div>
  </div>
</div>
<div class="anothermenu">
  <ul>
    <li><a href="#home">111</a></li>
    <li><a href="#news">222</a><i>|</i></li>
    <li><a href="#contact">333</a><i>|</i></li>
    <li><a href="#contact">444</a><i>|</i></li>
    <li><a href="#contact">555</a><i>|</i></li>
  </ul>
</div>
ahmed salah
  • 47
  • 1
  • 6
  • You need to provide the actual, valid HTML output. That @Scripts stuff is useless to the majority who don't use .NET stuff. – Rob Apr 12 '17 at 13:24
  • OK i will do but why my code above working on IE 11 AND not work in google chrome – ahmed salah Apr 12 '17 at 13:28
  • 1
    Any time someone says "it works in IE" but not the other browsers, it immediately tells me the code is wrong. IE is inept at best but I can't test your code without a workable example. – Rob Apr 12 '17 at 13:29
  • Do something with the @RenderBody, too. What is that supposed to do? – Rob Apr 12 '17 at 13:30
  • I tried your code on Chrome, and second menu appears at %30 from the top -> [link](https://jsfiddle.net/o2gxgz9r/5497/) – Faruk Yazici Apr 12 '17 at 13:33

2 Answers2

1

You should try this.it can be Chrome caching problem, Did Ctrl+F5 thing work&. Do disable chrome caching in development tools! It should work OR On your browser toolbar Select History, and then Select Clear browsing data. Under "Clear browsing data,"

CLICK Clear browsing data.

Bukhari
  • 151
  • 12
0

Clear your cache in Chrome, I had the same problem one time. Chrome doesn't reload your file every time if it judge it doesn't change.

First, use CTRL+F5 instead of F5 when you refresh your page (CTRL+F5 force all files to reload). But sometimes it doesn't work.

So second, clear your cache (Settings -> Advanced Settings -> Clear Cache).

Follow this link and read the accepted answers, this guys explains how to "force" a reload of your css file.

Good luck !

Community
  • 1
  • 1
Maitre Manuel
  • 21
  • 1
  • 5