Why 'display: inline' and 'padding-bottom: 1px' is bad for making tabs?

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I was reading this article to make HTML CSS tabs.

In the first selection on "Inline list-items" it suggests how to
create tabs using 'display: inline' and a selected tab by 'padding-
bottom: 1px'. I have created a temporary example here:
(It has a padding-bottom: 2px though since 1px didn't seem enough).
Code reproduced below.

<style type="text/css">
#header ul {
    list-style: none;
#header li {
    display: inline;
    border: solid;
    border-width: 1px 1px 0 1px;
    margin: 0 0.5em 0 0;
#header li a {
    padding: 0 1em;
#content {
    border: 1px solid;
#header #selected {
    padding-bottom: 2px;
    background: white;
<div id="header">
    <li><a href="#">This</a></li>
    <li id="selected"><a href="#">That</a></li>
    <li><a href="#">The Other</a></li>
    <li><a href="#">Banana</a></li>
<div id="content">
  <p>Ispum schmipsum.</p>

But later in the section on "Floated list-items", the author says,

"For the very same reason that the "selected" tab works by spilling
over onto the content box, padding cannot be applied to the initial
tab states. They just wouldn't behave."

Under what circumstances the practice of "display: inline" and
"padding-bottom: 2px" can go wrong?

The alternative he suggests is: "float: left" and "positive: relative;
top: 1px". How is this better?

Re: Why 'display: inline' and 'padding-bottom: 1px' is bad for making tabs?

Quoted text here. Click to load it

The output looks different between Firefox and IE. I'm not sure if this is
what your author is referring to.
Which doctype is being used there? as I found recently that some problems
are solved by being strict 4.01 (from transitional)

Site Timeline