Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Laura Cressman
Laura Cressman
12,548 Points

Clicking links changes spacing between them?

Hi everyone, it's me again! Thank you for being so patient with all of my questions. I am trying to code a navigation bar, but realize that when I am on the home page, and click the link to the home page, the spacing between the items in the nag bar decreases slightly. This is very strange to me, so I wanted to ask if anyone knew why that might be, since it should just be refreshing the page...Also any other feedback would be awesome! Here's the code:

<header>
            <a href="index.html"><h1 id="title">My Site</h1></a>

            <ul class="nav">
                <li><a href="index.html" class="selected">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </header>

#title {
    background-color: #006;
    color: #0F0;
    font-family: Arial, sans-serif;
    font-size: 2.4em;
    text-align: center;
    width: 100%;
    margin: 0;
    padding: 1% 0;
    -webkit-box-shadow: 0 8px 6px -4px #000;
    -moz-box-shadow: 0 8px 6px -4px #000;
    box-shadow: 0 8px 6px -4px #000;
    position: relative;
    z-index: 100;
}

.nav {
    background-color: #09C;
    width: 100%;
    margin: 0;
    padding: 1.2% 0 1% 0;
}

ul.nav {
    text-align: center;
}

ul.nav li {
    font-size: 1.2em;
    display: inline-block;
    padding: 0 1.5%;
    white-space: nowrap;
}

ul.nav a {
    color: #CFF;
    padding: 0 2%;
    -webkit-transition-duration: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -transition: 0.5s;
}

ul.nav a:hover, ul.nav a.selected {
    color: #0F0;
}
Bob Ziroll
Bob Ziroll
4,933 Points

Have you tried recreating this in different browsers? When I was making my portfolio website, transitions did tiny - but still noticeable - funny things in Chrome, like resize images very slightly for a second while the transition was happening. Maybe try it in Safari and Firefox if you're using Chrome?

Unfortunately I don't know why that happened or how to fix it, so I know I'm not being super helpful probably. :/

Laura Cressman
Laura Cressman
12,548 Points

I think I figured it out-I think having padding for both the li and a elements in the nav class was a bad move...

Bob Ziroll
Bob Ziroll
4,933 Points

Ah yes, that could be it. Probably just add padding to the outer element?