9 {{ upvoteCount | shortNum }}
9 {{ upvoteCount | shortNum }}

Strange Issue

by jbearnolimits
7 replies
  • WEB DESIGN
    • |
This is strange. I have an <hr> tag that I want above my link. It worked fine until I put the code in to make the words Learn More turn into a link. After I did that the horizontal line dropped to the bottom BELOW the link. Any reason this would happen when adding a link?

Code:
<div class="learnmoreblock2"><hr><a href="onlinebiblestudies.php">Learn More</a></div>
Here are the relevant css lines:

Code:
 .learnmoreblock2  {
position: absolute;
bottom: 0px;
width: 100%;
color: #E3481A;
text-decoration: none;
} 
.learnmoreblock2 a  {
position: absolute;
bottom: 0px;
width: 100%;
color: #E3481A;
text-decoration: none;
}
 .learnmoreblock2 a:hover  {
position: absolute;
bottom: 0px;
width: 100%;
color: #E3481A;
}
#issue #strange
  • Profile picture of the author KirkMcD
    This is wrong:
    .learnmoreblock2 a {
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #E3481A;
    text-decoration: none;
    }
    .learnmoreblock2 a:hover {
    position: absolute;
    bottom: 0px;
    width: 100%;
    color: #E3481A;
    }
    take it out.
    {{ DiscussionBoard.errors[9939448].message }}
    • Profile picture of the author jbearnolimits
      Originally Posted by KirkMcD View Post

      This is wrong:
      .learnmoreblock2 a {
      position: absolute;
      bottom: 0px;
      width: 100%;
      color: #E3481A;
      text-decoration: none;
      }
      .learnmoreblock2 a:hover {
      position: absolute;
      bottom: 0px;
      width: 100%;
      color: #E3481A;
      }
      take it out.
      Doing so removes the way I want the links to look and turns them into regular looking links. Could you be more specific about what is wrong with it? All I want to do is drop the link below the line.
      {{ DiscussionBoard.errors[9940851].message }}
      • Profile picture of the author Zenoth
        I don't see the point of using absolute position in your css code.

        Code:
        .learnmoreblock2  {
color: #E3481A;
} 
.learnmoreblock2 a  {
display: block;
color: #E3481A;
text-decoration: none;
}
 .learnmoreblock2 a:hover  {
color: #E3481A;
}
        {{ DiscussionBoard.errors[9941661].message }}
        • Profile picture of the author David V
          Agree.... There's several things that should be changed about that...
          Get rid of the "absolute", get rid of the "hr" and use css.
          {{ DiscussionBoard.errors[9941667].message }}
          • Profile picture of the author jbearnolimits
            Originally Posted by David V View Post

            Agree.... There's several things that should be changed about that...
            Get rid of the "absolute", get rid of the "hr" and use css.
            Wow lol, right after I got it fixed I came back here to share how I did it and see all these sudden reply's.

            Anyway, thanks for the help. I took another look at it and for future reference for anyone else having this issue here is the new css:

            Code:
             .learnmoreblock2  {
position: absolute;
bottom: 0px;
width: 100%;
color: #E3481A;
text-decoration: none;
}
 .learnmoreblock2 a  {
color: #E3481A;
text-decoration: none;
}
 .learnmoreblock2 a:hover  {
color: #E3481A;
}
            {{ DiscussionBoard.errors[9941681].message }}
          • Profile picture of the author Zenoth
            Originally Posted by David V View Post

            Agree.... There's several things that should be changed about that...
            Get rid of the "absolute", get rid of the "hr" and use css.
            Yeah, that's even better.
            {{ DiscussionBoard.errors[9941686].message }}
  • Profile picture of the author David V
    Originally Posted by jbearnolimits View Post

    This is strange. I have an <hr> tag that I want above my link. It worked fine until I put the code in to make the words Learn More turn into a link. After I did that the horizontal line dropped to the bottom BELOW the link. Any reason this would happen when adding a link?
    Your code is incorrect and redundant.

    Here's the quick fix:

    Codepen.io "Learn More" block hr fix
    {{ DiscussionBoard.errors[9941657].message }}

Trending Topics