CSS code rendering different result in Chrome and Firefox

StackOverflow https://stackoverflow.com/questions/20998845

  •  25-09-2022
  •  | 
  •  

Question

I am currently learning Ruby on Rails by following Micheal Hartl's tutorial to create a twitter clone.

I was working on the CSS code for the front page. But for some weird reason, It is rendering a different view for both Firefox and Chrome.

I have added screenshots. The navigation bar in the upper right page ( consisting of Home, Help and Sign In) seems to disappear in Firefox.

I have tried tinkering around with the code, but I just can't seem to get the logo and the navigation bar to get aligned in Firefox, like they are aligned in Chrome.

Chrome

Firefox

Here is the CSS code:

.container{

width: 710px;
padding-left:30px;
}

body{

background: #cff;
padding-left:30px;
margin:1em;
}

header{
 margin-top: 30px;
 padding-top: 30px;
 padding-left: 20px;


}

header img {
padding: 1em;
background: #fff;
position: relative;
margin-left:-1.1em;
}

section{
 margin-top:1em;
 font-size:120%;
 padding:20px;
 background: #fff;
 }

 section h1{
 font-size:200%;
 }


 a{
 color: #09c  ;
 text-decoration:none;
 }

 a:hover{
 color: #069;
 text-decoration:underline;
 font-weight:bold;
 }

 a:visited{
 color:#069;
 }

 nav{

 float:right;
 background: white;
 padding: 0 0.7em;
white-space:nowrap;
margin-top: -5.4em;
margin-left:-0.4em;


 }

 nav ul{

 margin: 0;
 padding: 0;
 }

 nav ul li{

 list-style-type:none;
 display:inline-block;
 padding:0.2em 0;
 }

 nav ul li a {

 padding: 0 5px;
 font-weight: bold;
 }

 nav ul li a:visited{
 color: #09c;
 }

 nav ul li a:hover{
 text-decoration:underline;
 }


 a.signup {

 margin-left:auto;
 margin-right:auto;
 display:block;
 text-align:center;
 width: 190px;
 color:#fff;
 background: #006400;
 font-size:150%;
 font-weight:bold;
 padding:20px;
 }

 .round{

 border-radius: 10px;
 -moz-border-radius:10px;
 -webkit-border-radius:10px;
 }

 footer {

 text-align: center;
 width:800px;
 margin-left:auto;
 margin-right:auto;
 margin-top:100px;
 } 

 footer nav{

 float:none;
 }

The image and the Navigations are defined in the header.html.erb page. The code of that page is:

<header>
      <%= link_to logo,root_path %>
     <nav class = "round">


      <ul>

       <li> <%= link_to "Home", root_path %></li>
       <li> <%= link_to "Help", help_path %></li>
       <li> <%= link_to "Sign in", '#' %></li>
      </ul> 
      </nav>
</header>

Here is the source code generated by Chrome:

<body>
   <div class="container">
    <header>
      <a href="/"><img alt="Sample app" class="round" src="/assets/logo.png" /></a>
     <nav class = "round">


      <ul>

       <li> <a href="/">Home</a></li>
       <li> <a href="/help">Help</a></li>
       <li> <a href="#">Sign in</a></li>
      </ul> 
      </nav>
</header>
    <section class ="round">

<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>

<a href="#" class="signup round">Sign up now!</a>


     </section>
     <footer>
 <nav class = "round">
  <ul>
    <li> <a href="/about">About</a></li>
    <li> <a href="/contact">Contact</a></li>
    <li> <a href="https://github.com/piy9/Twitter_clone" target="_blank">Git Repo</a></li>
    <li> <a href="http://railstutorial.org" target="_blank">Rails Tutorial</a></li>
    </ul>
</nav>
</footer>

     </div> 
</body>

Source code generated by Firefox:

 <body>
   <div class="container">
    <header>
      <a href="/"><img alt="Sample app" class="round" src="/assets/logo.png" /></a>
     <nav class = "round">


      <ul>

       <li> <a href="/">Home</a></li>
       <li> <a href="/help">Help</a></li>
       <li> <a href="#">Sign in</a></li>
      </ul> 
      </nav>
</header>
    <section class ="round">

<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>

<a href="#" class="signup round">Sign up now!</a>


     </section>
     <footer>
 <nav class = "round">
  <ul>
    <li> <a href="/about">About</a></li>
    <li> <a href="/contact">Contact</a></li>
    <li> <a href="https://github.com/piy9/Twitter_clone" target="_blank">Git Repo</a></li>
    <li> <a href="http://railstutorial.org" target="_blank">Rails Tutorial</a></li>
    </ul>
</nav>
</footer>

     </div> 
</body>

No correct solution

OTHER TIPS

I think part of the problem is that you have this CSS definition:

nav {
    float: right;
    background: white;
    padding: 0 0.7em;
    white-space: nowrap;
    margin-top: -5.4em;
    margin-left: -0.4em;
}

Which is being applied to BOTH your nav in your <header> and in your <footer>. I would remove margin-top: -5.4em; completely and then change this CSS definition:

footer {
   text-align: center;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
  margin-top: 100px;
}

by updating margin-top: 100px; to something like margin-top: 20px; and see if you have any better luck.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top