I found error on my tab menu that I made it myself. The layout was messed on web browser which its layout engine is WebKit (Safari 3.1.2 or Google Chrome 0.2.152.1) or Presto (Opera 9.52) layout engine, but no problem was found in Mozilla Firefox 2.0.0.18, 3.0.4 and IE 7. Below are the screen shots of each web browser with different layout engine:
Safari 3.1.2
Google Chrome
Opera 9.52
Mozilla Firefox 2.0.0.18
Mozilla Firefox 3.0.4
IE 6
IE 7
The layouts above were constructed by the following HTML and CSS:
HTML:
<div id="globalnav"> <ul id="menu"> <li class="page_item home-link current_page_item"> <a href="http://xing.web.id/blog/">Blog</a> </li> <li class="page_item"> <a href="http://xing.web.id/blog/about/">About</a> </li> <li class="page_item"> <a href="http://xing.web.id/blog/useronline/">Who’s online?</a> </li> <li class="page_item"> <a href="http://xing.web.id/blog/lifestream/">LifeStream</a> </li> </ul> </div>
CSS:
div#globalnav {
border-bottom: 1px solid #005599;
height: 22px;
margin: -20px auto 15px;
text-align: right;
}
ul#menu {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
ul#menu li.page_item {
display: inline;
padding: 0 10px;
text-align: center;
}
ul#menu li.current_page_item {
background: white;
border-color: #005599 #005599 white #005599;
border-style: solid;
border-width: 1px;
padding-bottom: 5px;
}
ul#menu li a {
position: relative;
text-decoration: none;
top: 2px;
}
I tried to figure out where the problems were. Then I found:
- <ul> has its default top and bottom margin and this is critical, so I fix it by adding margin:0px; to ul#menu
- The bottom border of div#globalnav supposed to be covered by current selected page style of <li> (.current_page_item), but I made a mistake, I put these styles:
position: relative;
top: 2px;
in ul#menu li a that didn't achieve my purpose. So I move them to ul#menu li.page_item
- There's 1px difference of <li> position (height? or padding?) between Gecko and WebKit. WebKit somehow more 1px than Gecko. Sigh, I have no idea if by using CSS could solve my problem (of course I had tried several ways, but didn't working). So I used a small hacking, I put a <div> (id="hack") right under the <div id="globalnav"> with the following style:
background: white;
height: 15px;
Since the ul#menu li.page_item had been styled position: relative;, it will stays on the top of every element. In this case, element stacking order rule is definitely needed here to be applied well. So, I simply give position: relative; in div#hack.
Voila!
div#globalnav {
border-bottom: 1px solid #005599;
height: 20px;
text-align: right;
}
ul#menu {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin:0px;
}
ul#menu li.page_item {
display: inline;
padding: 3px 10px;
position: relative;
top: 2px;
}
ul#menu li.current_page_item {
background: white;
border-color: #005599 #005599 white #005599;
border-style: solid;
border-width: 1px;
}
ul#menu li a {
text-decoration: none;
}
div#hack {
background: white;
height: 15px;
position: relative;
}
Screenshots:
Safari 3.1.2
Google Chrome
Opera 9.52
Mozilla Firefox 2.0.0.18
Mozilla Firefox 3.0.4
IE 6
IE 7
Well, while I was testing on WebKit browser, I found something very odd (or rather I call it a 'bug'?) and this really took me whole day finding out the problem. This bug only occur on WebKit browser. I'll write this WebKit layout bug at another post.
