I have come across a very peculiar behavior especially for what I consider to be a simple piece of code! Basically, I am trying to 'position:relative;' a footer navigation at the bottom of my page. In chrome it is correctly in the bottom. In FF (or any other non-webkit browser) it isn't at the bottom and almost at the top of the page. If I change ONE CSS line (position:relative to position:absolute;) it works for all browsers but it doesn't float correctly as I resize the screen or zoom in/out. I have confirmed this in 'boiler plate' HTML/CSS and with all the proper browser(s) resets as well and am getting the same behavior. This is all in Windows 7. Below are two very short snippets of HTML and CSS. Why isn't this working? Any solutions on how I can get a simple footer navigation to work across browsers AND have it float correctly as I zoom in/out will be greatly appreciated!
<ul id="avmenu">
<li class="current"><a href="first.html">First page</a></li>
<li><a href="second.html">Second page</a></li>
<li><a href="third.html">Third page</a></li>
<li><a href="fourth.html">Fourth page</a></li>
<li><a href="fifth.html">Fifth page</a></li>
</ul>
ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;
position:relative; <---As is this works in chrome only. JUST CHANGE THIS to position:absolute and it works in all browsers but it doesn't float well resizing or zooming.
top:70%; <--This only works ONLY in CHROME when above position:relative. Work improperly whhn position: absolute.
*left:20%;
}
ul#avmenu li {
display: inline;
}
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}
See if this helps you: http://jsfiddle.net/panchroma/u9qtd/
To make this happen you will see I've forced the body to be full height. Depending on the specifics of what wraps around the UL on your actual page, you might need to adjust this.
As for the details of relative vs absolute, I can't improve on this discussion: Position Relative vs Position Absolute?
CSS
html, body {
height: 100%;
}
ul#avmenu {
margin: 35px 0;
padding: 0;
font: 12px Verdana;
list-style-type: none;
position:relative;
top:70%;
left:20%;
}
ul#avmenu li {
display: inline;
}
ul#avmenu li a {
padding: 5px 10px;
border: 1px solid #aaa;
background-color: #eee;
color: #47a;
text-decoration: none;
}