CODEWITHSUNDEEP
htmlcssinternet-explorer-8border
nojohnny101
nojohnny101

Reputation: 562

ie 8 links shfit when clicked

i'm getting this strange behavior with some simple linked text with a border in IE 8. when the below boxes are clicked, IE reduces the height and widens the box, also reducing the size of the text within the border....

here is my relevant css:

.learn-more, .donate {
width: 20%;
position: absolute;
top: 172px;
border: 1px dashed black;
padding: 4px;
text-align: center;
}

here is my html:

<div class="program-description">
<p><b>-Education: Primary Level-</b></p>
<p>A primary level education is where success begins and is the foundation needed for further education. U4U provides opportunities for destitute children to attend a reputable school and begin the journey to success.</p>
<a href="sponsorship.html" alt ="Learn more about Sponsorship" class="learn-more">Learn more</a>
<a href="https://squareup.com/market/unified-for-uganda/sponsorship" target="_blank" alt="Donate to Sponsorship"class="donate">Donate</a>
</div>

i do have a normalize.css sheet but is that really causing the conflict? i've been banging my head about this for a while...

here it is live: http://unifiedforuganda.com/ugandanprograms.html

Upvotes: 0

Views: 53

Answers (1)

Code Uniquely
Code Uniquely

Reputation: 6373

Normalize.css is settings the a:focus and a:visited to a standard (without border styling). What's happened is that you have applied the .learn-more, .donate to a and given them a border but you haven't dealt with the visited version in your style: So the links revert tot he defaults and lose their borders. just provide a CSS override to these styles in your style sheet

.learn-more:visited, .donate:visited {

    width: 20%;
    position: absolute;
    top: 172px;
    border: 1px dashed black;
    padding: 4px;
    text-align: center;
}

Upvotes: 1

Related Questions