css - Vertically centered, absolute positioned element only displaying correctly in Chrome -


I am trying to put a vertical navigation section on my website, which is standing on the left side of the screen and in the center . I am also trying to make the height of the screen responsive. I did it by setting the font height in VH, it works fine in Chrome, but the whole element in IE and Firefox is at the top of the page. I'm a bit new to web design, any help would be appreciated!

HTML

  & lt; Nav> & Lt; Ul & gt; & Lt; A href = # & gt; & Lt; Li & gt; Home & lt; / li & gt; & Lt; / A & gt; & Lt; A href = # & gt; & Lt; Li & gt; About & lt; / li & gt; & Lt; / A & gt; & Lt; A href = # & gt; & Lt; Li & gt; Work & lt; / li & gt; & Lt; / A & gt; & Lt; A href = # & gt; & Lt; Li & gt; Contact & lt; / li & gt; & Lt; / A & gt; & Lt; / Ul & gt; & Lt; / Neo & gt;   

css

  navigation {below: 0; Display: Table; Font-size: 7vh; Height: auto; Line-height: 15vh; Margins: Auto; Overflow: Auto; Padding: 3vh; Padding-right: 5vh; Status: Completed; Top: 0; Vertical-align: central; Z-index: 1}    

workspace-center: center Does not really work in some browsers like Internet Explorer (even IE 8 Beta) Simply use vertical-align: center instead of margin-top: 60x . .

CSS:

  navigation {down: 0; Display: Table; Font-size: 7vh; Height: auto; Line-height: 15vh; Margins: Auto; Overflow: Auto; Padding: 3vh; Padding-right: 5vh; Status: Completed; Top: 0; Margin top: 60px; z-index: 1}   

For vertical focusing with CSS, refer to this.

Comments

Popular posts from this blog

Java - Error: no suitable method found for add(int, java.lang.String) -

java - JPA TypedQuery: Parameter value element did not match expected type -

c++ - static template member variable has internal linkage but is not defined -