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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Border Problem (IE vs. Everything else)

    I'm having a problem where the top and bottom borders aren't showing up as I want them to in IE, where they work fine in Firefox and Opera. You can see the page at http://209.7.3.209/index-new.php

    The Tabs for the navigation all have side borders in all browsers, but the top and bottom borders don't show up in IE6 or IE7. The CSS file that applies is http://209.7.3.209/tabber.css (but there are 2 more CSS files used, the main one being http://209.7.3.209/fenwick.css).

    Thanks for the help!

  • #2
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by briguyd View Post
    The Tabs for the navigation all have side borders in all browsers, but the top and bottom borders don't show up in IE6 or IE7.
    There is a bug in IE6/7 where an element that hasLayout will clip content that should really be rendered outside. Your ul element hasLayout because you have given it an explicit width. In many respects hasLayout is the same as overflow: hidden.

    Fortunately, you can neutralize the bug by setting position: relative for the child element. In your case:
    Code:
    div.tabberlive ul.tabbernav li a {
     padding: 3px 0.5em;
     margin-left: 3px;
     border: 3px solid #778;
     background-color: #000000;
     text-decoration: none;
     color: #fff;
     z-index: 999;
     position: relative; /* IE6/7 fix for clipped content */
    }

  • #3
    New to the CF scene
    Join Date
    Jul 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome, that did it, thanks!


  •  

    Posting Permissions

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