Encountering some strange behavior with a simple piece of code that I can't seem to figure out! I am trying to position a footer navigation at the bottom of my page using 'position:relative;' and it works perfectly in Chrome. However, in FF (or any other non-webkit browser), the navigation bar is almost at the top of the page instead of the bottom. If I change the CSS line from 'position:relative' to 'position:absolute', it works in all browsers but doesn't float correctly when resizing or zooming the screen. Even with a basic HTML/CSS setup and proper browser resets, I still face the same issue. This is all happening on Windows 7. Below are snippets of the code. Can anyone help me understand why this isn't working? Any solutions on how to make a simple footer navigation work across all browsers and float correctly while zooming 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;
}