0

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.

Community
  • 1
  • 1
Jade Dougherty
  • 1
  • 2
  • Why did you make the first word of every paragraph in your question bold? That is so distracting, I'm having trouble reading your question. – gilly3 Sep 04 '15 at 21:27
  • I have an easier time reading long sections of text when new paragraphs are indented or bolded in the first few words. – Jade Dougherty Sep 04 '15 at 21:33

2 Answers2

1

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;
}
Leeish
  • 5,203
  • 2
  • 17
  • 45
  • I'm not quite sure I understand what you're getting at with this comment. To see what would happen I removed the font-size change, and the line height entirely to see what would happen, and the space of the href was still double the height of the text itself, which leads me to believe I'm misunderstanding you here. Edit: Okay, I took a look at it in some other browsers, and I'm only getting this doubled height in IE. Should I be putting a vendor tag in somewhere? – Jade Dougherty Sep 04 '15 at 20:16
  • I don't know what your issue is. I loaded the page in Chrome, there was a gap above and below the letters which removed by setting the line-height to 1. Thought that was your issue. Loading the page in IE I do see the words are pushed to the top of their area. – Leeish Sep 04 '15 at 20:59
  • Haha, at least now I know I'm not the only one seeing it; that's a relief. It gives me a few more ideas on what to change around, and play with. Thanks again for your time. :) – Jade Dougherty Sep 04 '15 at 21:22
0

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.

jayscript
  • 319
  • 2
  • 5
  • 13
  • Thank you for the suggestions on how to improve my style, but even with these changes I continue to have a large empty space, about double my text height, beneath the text, which is still a clickable link, while on IE. This works great elsewhere though, so thank you! – Jade Dougherty Sep 04 '15 at 20:42
  • Inspect the element in Chrome. Command + Option + I to open the dev tools, and tell us what you see. – jayscript Sep 04 '15 at 21:55
  • On a side note, you should not capitalize html tags. They will still render, but there is no point of going against conventions. – jayscript Sep 04 '15 at 22:01