Top and Bottom Link Borders not Showing Up in IE

Discussion in 'CSS' started by g1c9, Nov 14, 2007.

0
  1. #1
    Problem is straightforward enough but seems to have no solution... the top and bottom A borders aren't displaying in IE.

    code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>tagcloud</title>

<style>

body
{
/* margin: 1em 1em; */
}

.tag a
{
border: 1px solid black;
border-width: 6px 1px;
text-decoration: underline;
color: #4477aa;
font-family: tahoma;
/*
font-size: 1.2em;
padding: 0.3em;
*/
font-size: 18px;
padding: 6px 10px;

}
</style>


</head>

<body>

<span class="tag">
<a class="item" href="#">elephants</a>
</span>




</body>

</html>
    Code (markup):
    please help. thanks in advance.

    cameron
     
    g1c9, Nov 14, 2007 IP
  2. KatieK

    KatieK Active Member

    Messages:
    116
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    58
    #2
    Cameron,

    Add this code to your style declaration:

    .tag a
{ display: inline-block; }
    Code (markup):
    The missing borders are related to IE's haslayout rendering model - adding the inline block declaration ensures that the elements do 'have layout', which corrects the missing borders.

    You can read more about haslayout here: <a href="http://www.satzansatz.de/cssd/onhavinglayout.html">http://www.satzansatz.de/cssd/onhavinglayout.html</a>.

    (BTW - the way you stripped your posted code to the bare minimum really helped me to find the issue. Thanks.)
     
    KatieK, Nov 14, 2007 IP