Space between text and border?

HTML & CSS
1

What I have in the top image in IE11
What they expect in the buttom image.
The Font looks heavier, like a bold but what would give more spacing between the letters and the border? I’ve tried line-hieght: because it’s inline.
and I tried margins & padding on the anchor to push the list item out.
what i have
what i tryn get

html

<div id="block-system-navigation" class="block block-system block-menu">    
  <div class="content">
    <ul class="menu">
<li class="first leaf"><a href="https://www.opencharityuk.org/#about" title="https://www.opencharityuk.org/#about">About Open Charity</a></li>
<li class="collapsed"><a href="/blog" title="The Blogs">The Blog</a></li>
<li class="last leaf"><a href="https://www.meetup.com/Open-Charity/" title="">Join Us</a></li>
        </ul>
    </div>
</div>

css

h3{
    font-family: MuseoSans;
    font-weight: 300;
    color: white;
}
h1{
    font-family: MuseoSans;
    font-weight: 100;
    color: white;
    font-style: italic;
}
#header{
    top: 0px;
    position: fixed;
    z-index: 2;
    height: auto;
    width: 100%;
    background: white;
}
 .region-header{
    float: right;
}

.menu {
    text-decoration: none;
    font: menu;
    display: inline-block;
    padding: 2px 8px;
    /*background: ButtonFace;*/
    border-style: solid;
    
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
    border-color: rgb(97, 192, 189);
    
    color: ButtonText;
    color: rgb(97, 192, 189);
    
    border-radius: 2px;
    border-width: 2px;
    border-image-outset: 0px;
    border-image-repeat: stretch;
    border-image-slice: 100%;
    border-image-source: none;
    border-image-width: 1;
    box-sizing: border-box;
    cursor: pointer;
    font-family: museosans, sans-serif;
    font-size: 14px;
    height: 40px;
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
    padding-top: 11px;
    text-align: left;
    text-decoration-color: rgb(97, 192, 189);
    text-decoration-line: none;
    text-decoration-style: solid;
    text-transform: uppercase;
    
}
li { line-height: 40px; 
    display: inline;
    }
a { line-height: 40px;   
    height: 40px;
    padding: 25px;
    text-decoration:none;
    }
li:hover {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-style: solid;
    border-color: green;
    border-width: 1px;
    }
.last {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-style: solid;
    border-color: green;
    border-width: 1px;
    }    
a:hover {
  color: rgb(97, 192, 189);
    }

#main-wrapper{
    padding-top: 50px;
    }
2

Try some padding on the li and make it inline-block instead of inline.

2 Likes
3

I had set your anchor as a block and li as inline-block in your other thread. It is always troublesome trying to style inline elements in a menu.

Also note, the height you have on your anchor is not taking effect since you have it as the default of inline. Only blocks can take dimensions (which you don’t need anyway)

2 Likes
4

Thank guys, it’s looking much better

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.