CSS browser positioning problem?

Question

I have a navigation at the top of my page which i want to keep fixed so the user can access it all the time. At the moment on Google Chrome it appears where it should be, right at the top of the screen with no gaps, etc. But once viewed in Firefox it has dropped down a few pixels :/ My margin in my body is set to 0 so no gaps appear around the site.

Here is a printscreen of the problem in Firefox - http://i39.tinypic.com/2yoadz6.jpg

Here is a printscreen of it working fine in Chrome - http://i41.tinypic.com/4vfo88.jpg

Answer 1

Your nav has 5-pixels of top padding. Try:



* { margin: 0; padding: 0; border: 0; } /* browser reset */



body {

background: #333;

font-family: Gudea, Arial, Helvetica, sans-serif;

}

#nav {

width: auto;

height: 30px;

position: fixed;

top: 0;

right: 2px;

background-color: #009933;

text-align: center;

}



Ron

Answer 2

Hard to answer without seeing CSS code. Try removing navbar from document flow with position:fixed;

http://css-tricks.com/scrollfollow-sidebar/



*Edit*

Tried your code on Firefox and Chrome. Went smoothly. Something else is causing the gap.

Here's sample code on Google drive

https://docs.google.com/file/d/0B1qDMmxZfmLmSVVJTEl1NllVQVk/edit?usp=sharing



And here's how the code looks in Firefox and Chrome (program versions provided)

http://img442.imageshack.us/img442/9395/navbarfixed.png

Answer 3

on the precise of your css record do you have a default html, tackle, blockquote, physique, dd, div, dl, dt, fieldset, sort, physique, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, midsection, dir, hr, menu, pre { demonstrate: block; unicode-bidi: embed } li { demonstrate: checklist-merchandise } head { demonstrate: none } table { demonstrate: table } tr { demonstrate: table-row } thead { demonstrate: table-header-team } tbody { demonstrate: table-row-team } tfoot { demonstrate: table-footer-team } col { demonstrate: table-column } colgroup { demonstrate: table-column-team } td, th { demonstrate: table-cellular } caption { demonstrate: table-caption } th { font-weight: bolder; text fabric-align: midsection } caption { text fabric-align: midsection } physique { margin: 8px } h1 { font-length: 2em; margin: .67em 0 } h2 { font-length: a million.5em; margin: .75em 0 } h3 { font-length: a million.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, sort, ol, dl, dir, menu { margin: a million.12em 0 } h5 { font-length: .83em; margin: a million.5em 0 } h6 { font-length: .75em; margin: a million.67em 0 } h1, h2, h3, h4, h5, h6, b, sturdy { font-weight: bolder } blockquote { margin-left: 40px; margin-staggering: 40px } i, cite, em, var, tackle { font-style: italic } pre, tt, code, kbd, samp { font-kin: monospace } pre { white-area: pre } button, textarea, enter, pick { demonstrate: inline-block } huge { font-length: a million.17em } small, sub, sup { font-length: .83em } sub { vertical-align: sub } sup { vertical-align: great } table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: midsection } td, th, tr { vertical-align: inherit } s, strike, del { text fabric-ornament: line-via } hr { border: 1px inset } ol, ul, dir, menu, dd { margin-left: 40px } ol { checklist-style-form: decimal } ol ul, ul ol, ul ul, ol ol { margin-precise: 0; margin-backside: 0 } u, ins { text fabric-ornament: underline } br:until eventually now { content fabric: "A"; white-area: pre-line } midsection { text fabric-align: midsection } :link, :visited { text fabric-ornament: underline } :concentration { define: skinny dotted invert } /* initiate bidirectionality settings (do no longer replace) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override } BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override } *[DIR="ltr"] { direction: ltr; unicode-bidi: embed } *[DIR="rtl"] { direction: rtl; unicode-bidi: embed } @media print { h1 { internet site-destroy-until eventually now: consistently } h1, h2, h3, h4, h5, h6 { internet site-destroy-after: dodge } ul, ol, dl { internet site-destroy-until eventually now: dodge } }