The ultimate visual aim is to create a horizontal menu with links that can span multiple lines but are all vertically centered.
In modern browsers, this effect can be achieved using CSS with the display: table property. Here is an example of how it can be implemented:
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link<br />spanning lines</a></li>
<li><a href="#">Link</a></li>
</ul>
CSS rules:
ul {
display: table
}
ul li {
display:table-cell;
vertical-align:middle;
}
ul li a {
display: block;
}
This method works well in most cases. However, there have been reports of some users experiencing issues with Firefox 3.x on both Windows and OSX where the LIs may wrap below others on initial page load.
A simple page reload seems to fix this problem in 99% of cases.
The bug appears to be sporadic and hard to replicate consistently. It has been observed on various systems, with some users encountering it more frequently than others.
Desired outcome:
link 1 link 2 link 3 link 4
Unexpected result at times:
link 1 link 2 link 3
link 4
While searching for solutions, I found a reference to a similar issue here:
CSS menu broken in Firefox (display:table-cell;)
Has anyone else experienced this issue or have insights into what might be causing it?