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
Post a Comment