Tab CSS Fixing

axing — Wed, 26 Nov 2008 09:58:01 +0000

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:

id="globalnav">
  id="menu">
    class="page_item home-link current_page_item">
      href="http://xing.web.id/blog/">Blog
    
    class="page_item">
      href="http://xing.web.id/blog/about/">About
    
    class="page_item">
      href="http://xing.web.id/blog/useronline/">Who’s online?
    
    class="page_item">
      href="http://xing.web.id/blog/lifestream/">LifeStream

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:

- The bottom border of div#globalnav supposed to be covered by current selected page style of
- (.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
- 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
  (id="hack") right under the
  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.

axing's blog » Update

Tab CSS Fixing