Hello,
zrobiłem sobie menu na stronie jako poziomo zorientowaną listę
nieuporządkowaną. Mam taki kod:

<div id="page-navigation">
<ul class="page-navigation-menu">
<li class="page-navigation-menu-element">
<a href="/welcome" class="nav-link">Start</a>
</li>
<li class="page-navigation-menu-element">
<a href="/surveys" class="nav-link">New survey</a>
</li>
<li class="page-navigation-menu-element">
<a href="/profile" class="nav-link">Profile</a>
</li>
<li class="page-navigation-menu-element">
<a href="help.html" class="nav-link nav-link-last">Help</a>
</li>
</ul>
</div>

i takiego cssa:

html {
height: 100%;
margin: 0px;
padding: 0px;
}

.nav-link {
display: inline-block;
height: 20px;
text-decoration: none;
width: 8em;
}

.nav-link:hover {
}


.nav-link-last {
border-right: 1px solid white;
}

#page-navigation {
max-height: 40px;
text-align: center;
}

.page-navigation-menu {
clear: both;
display: inline-block;
margin: 0px;
list-style: none;
padding: 0px;
}

.page-navigation-menu-element {
background-color: red;
display: inline-block;
font-size: 1.2em;
}

I mam taki problem, że page-navigation-menu-element nie przylegają do
siebie, jest między nimi przerwa. Oglądam na Opera 11 na Windows XP Pro.

Może ktoś ma pomysł, co jest nie tak i jak temu zaradzić? Dzięki.

--
Pozdrawiam
Zbyszek Malec