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
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    style ignored when inside a table (most of the time)

    ok, I am not a .css guy but found a cool template. 99% modyfying worked great, all <a href > links nad a nice _ _ _ dashed underline. I need to do a 2 column list so started a table, added 10 or so rows and 2 columns.

    Now all but 2 links actually underline the link. They all take the right font, color, etc. but only one keeps the underline.

    The test page can be seen at (http://www.debarywoods.org/community.php) Opera, FF, all work perfect, but IE 6/7 this happens.

    Any help or fix's are appreciated.

    Lr

  • #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 xlancealotx View Post
    Now all but 2 links actually underline the link. They all take the right font, color, etc. but only one keeps the underline.

    The test page can be seen at (http://www.debarywoods.org/community.php) Opera, FF, all work perfect, but IE 6/7 this happens.
    There is a bug in IE6/7 where an element with hasLayout clips content that should otherwise be rendered outside the element. To see what this has to do with your underlines not showing up in IE6/7 consider this:
    • Your underline is actually implemented as a bottom border on inline elements to get the dashed appearance
    • That dashed bottom border is actually situated outside the table cell
    • A table cell automatically hasLayout

    There is a fix for this IE bug. When one sets position: relative for the element that should stick outside then it again shows up outside the element. In your case the fix is this:
    Code:
    .sidebaritem a, #column2 a, .sidebaritem a:hover, #column2 a:hover { padding: 0px 0px 2px 0px;
      text-decoration: none;
      border-bottom: 1px dashed;
      position: relative; /* add this */
    }

  • #3
    New to the CF scene
    Join Date
    Jun 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    intersting. I am decent when it comes to design, better at developing, but when you start looking at these new .css sites, I am in a new country without a map!

    That fix did the job, thanks for both the reply, and the reasoning behind.

    Lr


  •  

    Posting Permissions

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