Friday, 23 August 2013

Rails layout error in Chrome but Firefox show's fine

Rails layout error in Chrome but Firefox show's fine

I'm working in a site where the footer show's well in firefox but chrome
shows error's. By errors, I mean, just look the images below:
Firefox one.

And this is the chrome one:

This is my *footer partial: *
<div class="navbar navbar-fixed-bottom">
<div class="row-fluid">
<div class="span4" id="foo_left">
<ul>
<li><%= link_to "About Us" , '/about' %></li>
<li><%= link_to "Contact" , '/contact' %></li>
<li><%= link_to "How it Works" , '/howitworks' %></li>
</ul>
</div>
<div class="span4" id="company"><p>Copyright 2013 Rawdi. All rights
reserved.</p></div>
<div class="span4" id="foo_right">
<ul>
<li><%= link_to "Privacy" , '/privacy' %></li>
<li><%= link_to "Terms & Policies" , '/tnc' %></li>
</ul>
</div>
</div>
This is the css for that (SASS):
#footer {
padding-top: 10px;
margin-top:15px;
.row-fluid {
padding-top:10px;
background-color: #060606;
#foo_left {
float:left;
ul {
list-style: none;
li {
display: inline;
border-right: 1px solid grey;
a {
margin: 5px 10px 5px 5px;
}
a:hover {
text-decoration: none;
margin: 5px 10px 5px 5px;
}
}
}
}
#foo_right {
float:right;
ul {
float:right;
list-style: none;
margin-right: 10px;
li {
display: inline;
border-right: 1px solid grey;
a {
margin: 5px 10px 5px 5px;
}
a:hover {
text-decoration: none;
margin: 5px 10px 5px 5px;
}
}
}
}
#company {
float:center;
text-align: center;
font-size: 12px;
}
}
}
And this is the application.html.erb for more info:
<body>
<div id="header" class="container"><%= render 'layouts/header' %><%=
render 'layouts/dropdown' unless @disable_dropdown %></div>
<div class="container" id="body">
<%= yield %>
</div>
<div id="footer" class="container-fluid"><%= render 'layouts/footer' %></div>
Why is this happening? why chorme and firefox are showing different
layouts? Help.

No comments:

Post a Comment