html5 - CSS 'position:relative;' and 'top:xx%;' tag combo work in chrome but not in any non-webkit browser (FF, IE, Opera, etc) -


Especially for the code that I consider to be a simple piece, I have come in a very strange practice! In fact, I am trying to 'position: relative'; In the footer navigation chrome below my page it is properly below in FF (or any other non-webkit browser) it is not below and is almost at the top of the page if I change a CSS line (position: position Based on: Absolute;) It works for all browsers, but it does not float correctly because I resize / zoom in / out the screen size. I have confirmed it in the 'Boiler Plate' HTML / CSS and reset it along with all the proper browsers (resets) and am getting the same behavior. It's in Windows 7. Two very few snippets of HTML and CSS are given below. Why is not this working? To work in browsers, I have a solution about how to get a simple footer navigation and to float it correctly because I appreciate the zoom in / out!

  & lt; Ul id = "avmenu" & gt; ; & Lt; Li class = "on" & gt; & Lt; A href = "first.html" & gt; First page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "second.html" & gt; Second page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "third html" & gt; Third page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "fourth.html" & gt; Fourth page & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "fifth.html" & gt; Fifth page & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; Ul # avmenu {margin: 35px 0; Padding: 0; Font: 12px varnaana; List-style-type: none; Status: Relative; & Lt; --- As it works only in Chrome, make changes in this situation: Absolute and it works in all browsers but does not float good resizing or zooming. Top: 70%; & Lt; - It only works in Chrome when the above situation: Relative. Work in an unworthy manner: Complete. * Left: 20%; } Ul # avmenu li {display: inline; } UL # Amenu Li Li {padding: 5px 10px; Limit: 1 px solid # aaaa; Background-color: #EE; Color: # 47a; Text-decoration: None; }    

Check that it helps you:

To make you see that I have compelled the body to full height, depending on the characteristics that are wrapped around the UL on your original page, you may need to adjust it.

For details of relative versus absolute, I will not improve this discussion:

CSS

  Html, Body {height: 100%; } Ul # avmenu {margin: 35px 0; Padding: 0; Font: 12px varnaana; List-style-type: none; Status: Relative; Top: 70%; Left: 20%; } Ul # avmenu li {display: inline; } UL # Amenu Li Li {padding: 5px 10px; Limit: 1 px solid # aaaa; Background-color: #EE; Color: # 47a; Text-decoration: None; }    

Comments

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

github - Teamcity & Git - PR merge builds - anyway to get HEAD commit hash? -

ios - Replace text in UITextView run slowly -