SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    border-bottom of link not showing in IE7

    I'm in the beginning development of a site and running into a problem with links. I'd like all links within text areas to get a bottom border when you mouse over them. I thought I was setting it up correctly, and it seems towork in all Mac based browsers, but when I checked on IE7 on a PC (this is the only version of IE I have access to), it doesn't work. I'd like to be able to use this link style in any text throughout the site, and have it maintain the font properties, changing only the color and add a bottom border on hover.

    I have another type of link called "more" which also specifies a bottom border and it does work in IE7.

    Here's that section of the CSS:

    /*===Links===*/

    a{
    color: #d06b63;
    }

    a:hover {
    border-bottom:solid 1px #d06b63;
    }

    a.more {
    font-size: 9px;
    font-weight: bold;
    text-transform:uppercase;
    }

    a.more:hover {
    border-bottom: solid 1px #d06b63;
    }

    /*===Links end===*/

    Here's the link to the page:
    http://www.laurafigdesign.com/nbcaf/sub_template.html

    Any suggestion on how to get the bottom border to show in IE7?

    Thanks,
    Laura

  2. #2
    SitePoint Wizard webcosmo's Avatar
    Join Date
    Oct 2007
    Location
    Boston, MA
    Posts
    1,431
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    its not border-bottom style, rather use
    text-decoration: underline

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but I purposely used bottom-border instead of text-decoration. It gives more control over the styling and looks a bit nicer. I figure text-decoration a back-up solution, but I wondered if there might be another.

    Laura

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Location
    St. Francisville, LA USA
    Posts
    54
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey LauraFig, I think the problem may be in the order you are declaring your pseudo class. Instead of just declaring
    a{
    color: #d06b63;
    }
    try adding
    a:link {color:#d06b63;} /* unvisited link */
    a:visited {color:#d06b63;} /* visited link */
    a:hover {color:#do6b63;
    border-bottom:solid 1px #d06b63;} /* mouse over link */
    a:active {color:#do6b63;} /* selected link */
    This may solve the issue, if not I would use an alternate style sheet for IE 7or less
    <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->
    Then you could use text-decoration: underline as a fall back only on these browsers and everyone else will see your true design

    Hope this helps

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2011
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by bmorgan1959 View Post
    Hey LauraFig, I think the problem may be in the order you are declaring your pseudo class. Instead of just declaring
    a{
    color: #d06b63;
    }
    try adding
    a:link {color:#d06b63;} /* unvisited link */
    a:visited {color:#d06b63;} /* visited link */
    a:hover {color:#do6b63;
    border-bottom:solid 1px #d06b63;} /* mouse over link */
    a:active {color:#do6b63;} /* selected link */
    This may solve the issue, if not I would use an alternate style sheet for IE 7or less
    <!--[if lt IE 8]> <link rel="stylesheet" type="text/css" href="ie7-and-down.css" /> <![endif]-->
    Then you could use text-decoration: underline as a fall back only on these browsers and everyone else will see your true design

    Hope this helps
    Thanks very much for your reply. Since I didn't get any additional responses earlier, I tried another forum and got the following solution:
    * + html a {
    border-bottom: 1px transparent solid;
    display: inline-block;
    vertical-align: bottom;
    }

    As far as I can tell, it seems to be working.

    Again, thanks for your thoughts and I'll keep this in mind in case the first solution fails.

    Laura Fig


Bookmarks

Posting Permissions

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