html - Chrome and opera leaves empty space on top because of li padding -



html - Chrome and opera leaves empty space on top because of li padding -

i'm working on homepage fullpage slider. @ firefox went right! @ chrome , opera, have empty space on top of page.

i noticed space menu padding (li), when turn 0 space getting shorter not leaving.

here html

<ul id="connect"> <li> logo </li> </ul> <ul id="menu"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul>

and css is

#connect { z-index: 10; position: fixed; width: 100%; list-style: none; margin: 0; margin-left: 90px; padding: 20px; } #menu { z-index: 10; float: right; margin: 0; font-size:12px; list-style: none; position:relative; top:30px; right:20px; font-family: 'open sans', sans-serif; } li { display:block; float: left; padding: 10px; }

could help?

i'd re-write code it's more simple , semantic: http://jsfiddle.net/kc4umn1c/

whenever utilize "position: fixed" should specify x/y coordinates ("left/right" in case). i've added styles below.

also, using reset.css file create of styles fit nicely between browsers. (google html5 boiler plate, have one.)

good luck!

html

<header class="header"> <h1 class="logo">logo</h1> <nav class="menu"> <ul> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </nav> </header>

css

* { margin: 0; padding: 0; box-sizing: border-box; } .header { position: fixed; left: 0; top: 0; right: 0; background: black; z-index: 1; padding: 20px; color: white; } .logo { float: left; display: inline-block; } .menu { float: right; display: inline-block; color: white; } .menu ul { list-style: none; } .menu ul li { float: left; padding: 10px; }

html css google-chrome cross-browser

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -