CODEWITHSUNDEEP
htmlcss
Jade Dougherty
Jade Dougherty

Reputation: 1

<A Href> has a lot of empty space beneath the text

EDIT: I've made a few changes, based on suggestions, but the problem is persisting on IE, and I don't think I'm doing anything too fancy for IE. I'm not sure what's getting lost in translation.

I'm working on an assignment for class, where we're using html & css to make a web page.

I'm trying to create a horizontal nav bar at the top of a web page, and I've gotten the navbar to behave mostly how I'd like. The problem is that I want the text of the link snug against the bottom of the nav bar, but the area of the link is doing one of two things depending on how I approached the problem (EDIT: Now only happening in internet explorer).

My first instinct was to use vertical-align, but I have since read in 5 or 6 threads that it does not work on inline elements.

I have toyed around with altering the height and line height, to try and get an alignment that works (text at the bottom of the link), but that has ended up pushing the text, AND the area of the of the link down past the nav bar.

I've also tried toying with the padding-bottom, to try and see if I can adjust that, and one way or another, and I've only been able to push the link further upward with that.

I've been researching around for something that can help me find a fix, and I've found a lot of articles that are close but no cigar.

Some of the things I've looked at are (woops I guess I can only post two links): Why anchor tag does not take height and width of its containing element

There was one about empty space beneath certain fonts, and there were several about tables, and several about vertical alignment.

This is where I'm at so far: http://jsfiddle.net/brezzen/w09q7h7y/2/

html:

<body>
    <header>
        <nav class="header">
            <ul>
                <li><a href= "#">Contact</a></li>
                <li><a href= "#">Values</a></li>
                <li><a href= "#">About</a></li>
                <li><a href= "#">Home</a></li>
            </ul>       
        </nav>
    </header>
    <article>
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />
        <br />     bleep blorp bloop
    </article>
</body>

css:

/* Debugging */

*
{
    border: 1px solid red;
}  */

/* Blocking & Defaults */

header, article, aside, figure, figcaption, hgroup, section, nav
{
    display: block; 
}

*
{
    font-family: 'Kozuka Gothic Pro EL', 'Kozuka Gothic Pro', Myriad, Helvetica, sans-serif;
    font-size: 100%;
    color: white;
    padding: 0px;
    margin: 0px;
}


/* Body */

body {
    background-color: #bbffff;
    font-weight: normal;
    position: relative;
    min-width: 1000px;
    max-width: 2000px;
}

/* All Navigation */

nav {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 82px;
    background-color: #7396ff;
    border-bottom: 3px solid #bbbbbb;
}

nav ul {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding-right: 10%;
    list-style-type: none;
    font-size: 125%;
}

nav ul li {
    display: inline-block;
    vertical-align: bottom;
    float: right;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

I don't know what's goin on, but the empty space hanging under the text is huge, so it's hard for me to believe that it's just a font quirk. I thought that moving text around inside of the area of the link would be a lot easier than this, and I think I've gotten in over my head here. Any help, or direction toward a good resource would be greatly appreciated.

Upvotes: 0

Views: 448

Answers (2)

jayscript
jayscript

Reputation: 319

There are several ways to align an element vertically. If it is only one line of text within an element, the easiest way is to set the line-height the same with the height of the element.

It is not a good practice to use % to set the font-size. Instead, use px, em, or rem.

nav ul {
  height: 1.5rem;
}
nav li {
  margin: 0;
  padding: 0 0.4rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1rem;
}

Depending on how you organize your CSS, you might want to add styles to the anchor like this

nav li a {
  margin: 0;
  padding: 0 0.4rem;
  height: 1.5rem;
  line-height: 1.5rem;
  font-size: 1rem;
}

as well. Pay attention to specificities.

Upvotes: 0

Leeish
Leeish

Reputation: 5213

line-height You are increasing the font-size to 125% and there is a "height" of each line of text that affects this. (http://jsfiddle.net/w09q7h7y/3/)

nav ul {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding-right: 10%;
    list-style-type: none;
    font-size: 125%;
    line-height: 1;
}

Upvotes: 1

Related Questions