Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts

    CSS tabs: IE cuts off top border

    I've written/adapted some CSS tabs for use on my site. Firefox and Opera display them perfectly (as far as I can tell), but, for some reason, IE (7 is all I've tested with) cuts off the top border of the inactive tabs (all the tabs without the class "active").

    I'm lost as to why this is happening. Perhaps someone could shed some light on the subject?

    PHP Code:
    <?xml version="1.0" encoding="iso-8859-1"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    .box {
      background-color:#1C1C1C;
      color:#DBDBDB;
      border:1px solid #353535;
    }
    p {
      margin-left:5px;
    }
    table {
      margin:5px auto;
    }
    body {
      background-color:#000000;
      color:#DBDBDB;
    }
    /* Universal info */
    ul.tabs {
      text-align:left;
      margin:0px;
      list-style-type:none;
      padding:4px;
      font-size:12px;
    }
    ul.tabs li {
      display:inline;
    }
    ul.tabs li.active a {
      position:relative;
      top:1px;
      padding-top:4px;
    }
    ul.tabs li a {
      padding:4px 10px;
      text-decoration:none;
      border-bottom:0 !important;
    }
    .tabcontent {
      margin-top:0 !important;
      padding:3px;
      border-top:0;
    }
    .box {
      margin:1%;
      padding:2px;
      font-size:11px;
    }
    /* Color info */
    ul.tabs {
      border-bottom:1px solid #353535;
    }
    ul.tabs li.active {
      border-bottom:1px solid #1C1C1C;
      background-color:#1C1C1C;
    }
    ul.tabs li.active a {
      background-color:#1C1C1C;
    }
    ul.tabs li a:hover {
      background-color:#1E1E1E;
    }
    ul.tabs li.active a:hover {
      background-color:#1C1C1C;
    }
    ul.tabs li a {
      border:1px solid #353535;
      background-color:#141414;
      color:#DBDBDB;
    }
    </style>
    </head>
    <body>
    <ul class="tabs" style="width:40%;margin-left:30%;margin-top:5%;" id="tabs">
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    </ul>
    <div class="tabcontent box" style="width:40%;margin-left:30%" id="data">
    <p>Testing tabs.</p>
    </div>
    </body>
    </html>
    I'd appreciate any help as to how to fix the problem.

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try removing the first line.

    <?xml version="1.0" encoding="iso-8859-1"?>

    It sometimes causes funny effects.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    Regular Coder
    Join Date
    Jun 2006
    Posts
    225
    Thanks
    6
    Thanked 3 Times in 3 Posts
    Nope, that didn't work. Thanks for the suggestion, though.

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    It appears that the display: inline was the issue (or one of the issues). Another was that when you hovered a link, IE jumped up. I played around with it and basically turned out a simpler form of the same thing you had but appears to look and work identical on both IE and FF now. You'll notice the bottom border of the UL is not there but is now the top border of the DIV. It's better this way because the ul was over shooting the div by 1-2 px and didn't look good.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>m</title>
    <style type="text/css">
    
    .box {
      background-color:#1C1C1C;
      color:#DBDBDB;
      border:1px solid #353535;
      padding:2px;
      width:40%;
    }
    
    p {
      margin-left:5px;
    }
    
    table {
      margin:5px auto;
    }
    
    body {
      background-color:#000000;
      color:#DBDBDB;
      font: 1.2em sans-serif;
    }
    
    .tabcontent p {
      padding:12px;
      margin: 0;
    }
    
    
    /* Universal info */
    
    ul.tabs {
      text-align:left;
      margin: 0 0 -1px 0;
      list-style-type:none;
      padding: 0;
      width:40%;
      overflow: auto;
      position: relative;
      z-index: 10;
    }
    
    ul.tabs li {
      float: left;
      border: 1px solid #353535;
      padding: 0;
      margin: 0 4px;
    }
    
    ul.tabs li a {
      padding: 3px 10px;
      display: block;
      text-decoration:none;
      color: #666;
    }
    
    ul.tabs li a:hover {
      background: #1C1C1C;
      color: #999;
    }
    
    ul.tabs li.active {
      border-bottom: 1px solid #1C1C1C;
    }
    
    ul.tabs li.active a, ul.tabs li.active a:hover {
      background: #1C1C1C;
      color: #DBDBDB;
    }
    
    
    
    /* Color info */
    
    /* ==== COMMENTED ALL THIS OUT FOR TESTING
    
    ul.tabs {
      border-bottom:1px solid #353535;
    }
    ul.tabs li a {
      border:1px solid #353535;
      background-color:#141414;
      color:#DBDBDB;
    }
    ul.tabs li.active {
      border-bottom:1px solid #353535;
      background-color:#1C1C1C;
    }
    ul.tabs li.active a {
      background-color:#1C1C1C;
    }
    ul.tabs li a:hover {
      background-color:#1E1E1E;
    }
    ul.tabs li.active a:hover {
      background-color:#1C1C1C;
      border-bottom:1px solid #353535;
    }
    ==== */
    
    </style>
    </head>
    <body>
    <ul class="tabs">
    <li class="active"><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    </ul>
    <div class="tabcontent box" id="data">
    <p>Testing tabs.</p>
    </div>
    </body>
    </html>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • Users who have thanked harbingerOTV for this post:

    name _F1 (01-26-2008)

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    harbingerOTV

    I found this to work better on my PC

    <body>
    <ul class="tabs">
    <li class="active">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
    <li><a href="#">Tab 3</a></li>
    <li><a href="#">Tab 4</a></li>
    </ul></li>


    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •