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

Discussion in 'HTML' started by Disc Magnet, Jun 22, 2010.

  1. Disc Magnet

    Disc Magnet Guest

    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: http://www.webdevout.net/test?0C
    (It has a padding-bottom: 2px though since 1px didn't seem enough).
    Code reproduced below.

    <html>
    <head>
    <style type="text/css">
    #header ul {
    list-style: none;
    padding:0;
    margin:0;
    }
    #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;
    }
    </style>
    </head>
    <body>
    <div id="header">
    <h1>Tabs</h1>
    <ul>
    <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>
    </ul>
    </div>
    <div id="content">
    <p>Ispum schmipsum.</p>
    </div>
    </body>
    </html>

    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?
    Disc Magnet, Jun 22, 2010
    #1
    1. Advertising

  2. Disc Magnet

    123Jim Guest

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

    "Disc Magnet" <> wrote in message
    news:...
    >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:
    > http://www.webdevout.net/test?0C
    > (It has a padding-bottom: 2px though since 1px didn't seem enough).
    > Code reproduced below.
    >
    > <html>
    > <head>
    > <style type="text/css">
    > #header ul {
    > list-style: none;
    > padding:0;
    > margin:0;
    > }
    > #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;
    > }
    > </style>
    > </head>
    > <body>
    > <div id="header">
    > <h1>Tabs</h1>
    > <ul>
    > <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>
    > </ul>
    > </div>
    > <div id="content">
    > <p>Ispum schmipsum.</p>
    > </div>
    > </body>
    > </html>
    >
    > 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?


    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)
    123Jim, Jun 22, 2010
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mr. SweatyFinger
    Replies:
    2
    Views:
    1,763
    Smokey Grindel
    Dec 2, 2006
  2. ojorus
    Replies:
    2
    Views:
    330
    ojorus
    Apr 13, 2007
  3. steve
    Replies:
    2
    Views:
    721
    steve
    Jul 5, 2007
  4. Ole Streicher
    Replies:
    14
    Views:
    6,572
    Ole Streicher
    Jun 12, 2008
  5. rantingrick
    Replies:
    44
    Views:
    1,177
    Peter Pearson
    Jul 13, 2010
Loading...

Share This Page