CODEWITHSUNDEEP
htmlcss
Sungharsh J
Sungharsh J

Reputation: 61

CSS reset is not working

CSS reset (yahooReset) is not working in cross browsers mainly between IE and chrome, why are all the div elements and fonts comparatively bigger in chrome? How can i make both browsers compatible? Appreciate any suggestions. See my code below:

div#topBar {
  border: 1px solid black;
  margin: 0.2em auto 0em;
  height: 6em;
  background: #74756c;
}
.logo {
  font-family: 'Cinzel', serif;
  /* google font*/
  color: #191970;
  font-size: 350%;
  padding: 0em 0.3em 0em;
  background-color: #E6E6FA;
  text-shadow: 0 0 2px 8px white;
  border: 1px solid #4195fc;
}
div#box {
  margin: 0.6em 0em 1em 1em;
}
nav#navigation {
  float: right;
  font-size: 140%;
  margin: 15px 6px 0px 0px;
}
<body>
  <div id="topBar">
    <div id="box">
      <b class="logo">RaGa</b>
    </div>
    <nav id="navigation">
      <a href="index.html" class="nav-link">Home</a>
      <a href="index.html" class="nav-link">Imprint</a>
      <a href="index.html" class="nav-link">Privacy</a>
      <a href="index.html" class="nav-link">Terms & Conditions</a>	
    </nav>
  </div>

</body>

Upvotes: 0

Views: 376

Answers (2)

Sungharsh J
Sungharsh J

Reputation: 61

I have found the answer. In my code I wrote below code 

body { font-size:12px } 
/* this will create problems in cross browser rendering */

Google chrome got default font size of 15px which wont allow your code to render below this, but IE does.

I heard Google stopped support to below code to reset default font size.

* {
-webkit-text-size-adjust: none;
}

Upvotes: 0

Giorgi Nadiradze
Giorgi Nadiradze

Reputation: 144

I think some changes will help you

  1. change font-size value in px
  2. change em to px
  3. remove <b> tags. This is very old.

Upvotes: 2

Related Questions