htmlcsstabs

How to make tabs with pure HTML/CSS

I'm trying to do Tabs with pure HTML/CSS, and it works nice in all major browsers. Except IE, both 7 and 8.

If I don't add display: table to the ul, the content is not on a new line in every browser. However, IE doesn't display it in a new line even after I add that. What can I do about that? Is there a better way to make tabs in pure HTML/CSS?

<!DOCTYPE>
<html>
    <head>
        <style type="text/css">
          ul.tabs {
              display: table;
              list-style-type: none;
              margin: 0;
              padding: 0;
          }

          ul.tabs>li {
              float: left;
              padding: 10px;
              background-color: lightgray;
          }

          ul.tabs>li:hover {
              background-color: yellow;
          }

          ul.tabs>li.selected {
              background-color: orange;
          }

          div.content {
              border: 1px solid black;
          }
        </style>
    </head>
    <body>
        <ul class="tabs">
            <li class="selected">One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
        <div class="content">
            This should really appear on a new line.
        </div>
    </body>
</html>
Solution

  • Because of the floated <li> elements your <ul> element is zero height.

    Try adding ul { overflow: auto; } and div.content { clear: both; } to your CSS