I’m trying to make an horizontal menu, vertically and horizontally aligned.
I’m actually using
- tags, and it looks exactly as I want in firefox.
- In internet explorer 9, the background that appears when I mouse over on an item, is moved 1 px upper, over the black line.
- In chrome, the li element is 20px high instead of 16 like on firefox, moving the menu a little lower
- In safari and opera I have the same chrome problem.
However, this is the only browser where it is rendered correctly.
Notice that opera, safari and chrome also have a problem where my separator is 3px high and 1px large, while on firefox I can visualize it correctly.
I don’t know really why, but because I lost 2 nights behind this problem I think I need definitely some help.
Here is the situation with firefox (you can click on images to zoom in):
While here you can see Chrome situation (webkit in general):
The css for the menu is this:
#menu
{
bottom: 111px;
height: 54px;
width: 100%;
top: auto;
}
#menu-bar-top, #menu nav
{
background-repeat: repeat-x;
width: inherit;
}
#menu-bar-top
{
background-image: url(../../img/Layouts/default/Hr-bottom.png);
background-color: transparent;
border-style: none;
height: 18px;
}
#menu nav
{
background-image: url(../../img/Layouts/default/Menu-background.png);
height: 36px;
}
#menu nav div
{
text-align: center;
height: inherit;
margin: 0;
}
#menu nav ul
{
list-style-type: none;
font-family: Ethnocentric;
font-size: 1.2em;
padding: 0;
height: inherit;
margin: 0;
color: white;
}
#menu nav ul li
{
position: relative;
top: 10px;
display: inline;
padding: 0;
margin: 0;
}
#menu nav ul li.menu-separator
{
background-position: center center;
background-repeat: no-repeat;
background-image: url(../../img/Layouts/default/Menu-separator.png);
font-size: 1px;
}
#menu nav ul li a
{
text-decoration: none;
padding: 10px 10px 8px 10px;
margin: 0 -5px;
color: white;
}
#menu nav ul li a:hover
{
background-position: 0px 0px;
background-repeat: repeat-x;
background-image: url(../../img/Layouts/default/Menu-background-hover-2.png);
}
While html can be found here:
<section id="menu">
<hr id="menu-bar-top" />
<nav>
<div>
<ul>
<li><a href="#">Home</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Lavori svolti</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Balbo e consorzi</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Ciao</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<li class="menu-separator"> </li>
<li><a href="#">Etc...</a></li>
<!-- ... other Etcs ...-->
</ul>
</div>
</nav>
</section>
Because I think ul is creating me more problems than it should, I’m ok with changing html markup (notice that is html5), doesn’t matter if it feels a bit incorrect (like using divs and spans only). What I really need, is a crossbrowser solution to this and any suggestion is appreciated. I don’t need Ie6 support, I’m ok with IE9 and lasterversion of chrome, opera, safari, firefox.
Notice that the background of my menu and the background of the mouseover effect are both gradients, so I can’t just use a color.
Thanks for any suggestion, hope anyone can help me with this because I can’t really solve the problem and I would like to avoid various css per browser.
Edit 1:
I don’t get why I can’t make the separator height what I want, I put text inside but definitely doesn’t fit the size I need, it’s an inline element but I can’t put a block element inside an inline element :\
Edit 2:
Ok I have uploaded the whole webpage with graphics, I didn’t create a JSFiddle at the moment but you can see the webpage and download it as a ZIP file:
Edit 3:
Added the JS Fiddle, however I can’t make font works there
While Jona’s answer helped me a lot with pseudo-elements (I didn’t know it was possible such a thing), it doesn’t answer completely to my question: expecially, I used a line-height that is half of my height and I didn’t use float: left, which instead creates only problems with centering the menu.
Instead what really fixed everything for me is display:block on A tag and expecially display: inline-block for li tags.
This changed the way tags behaves to do exactly what I wanted with some minor tweaks.
I still have some small problems with google chrome, but I think is connected with the fact that for chrome (and safari) the font is 20 px height instead of 16 like in all other browsers (don’t know why), but they are not so bad (the text is 4 px lowered, I can accept this).
Here is the complete edit of what I built with css, using Diodeus’s and Jona’s answers, along with a small html markup change:
HTML:
CSS:
You can visit the webpage here (this link won’t last ever)