CSS Experiences

Statement sequence
Apparently the sequence of things in CSS is very important. I always thought I could just rearrange the code as I wanted to and that way make the CSS files easier to read. But it will certainly have some nasty effects if you are not carefull.

After looking more into the jQuery based tabbed navigation concept I discovered a couple of days ago, I learned a valuable lesson today during styling of the tabbed folders. Never forget, there is a huge difference between this statement sequence:

ul.tabs li a.active {
   background-color:#ffffff;
   color:#282e32;
   border:1px solid #464c54;
   border-bottom: 1px solid #ffffff;
}
ul.tabs li a:hover {
   background-color:#2f343a;
   border-color:#2f343a;
}

And the correct sequence:

ul.tabs li a:hover {
   background-color:#2f343a;
   border-color:#2f343a;
}
ul.tabs li a.active {
   background-color:#ffffff;
   color:#282e32;
   border:1px solid #464c54;
   border-bottom: 1px solid #ffffff;
}

The important difference is that the :hover background will kick through the active tab if declared after the active class background. In this case, it was really obvious what caused the nauseating effect. Glad I made a note, next time it may not be that easy to identfy.

By the way, this thing happened during step 10 of this tabbed content area tutorial at NETTUTS

Everything comes with presets
Now, in an the same styling process I had strange difficulties getting the style sheet to behave as I wanted it to. Things looked really ugly in the tabbed list – I could  not align the tabs with the box below.

Finally it dawned on me and with a single hard reset statement in the beginning of the file, everything worked as planned:

*    { 
         margin: 0;
         padding: 0;
      }

The reason is that all html entities are set up with preset margins, paddings etc. The statement here will reset everything.

Apparently it is bad practise, at least according to Smashing Magazine, because it is hard on the rendering clients with specific setup for each and every element and that it might rule otherwise good default styling.

Oh well….