Nav elements are smaller on one page than they are on another?

Hi all, having some issues with a nav element. I’ve used the same html code for both pages. One is an index page the other is a contact page. Here is what the nav element looks like:

<header>
        <nav>
            <ul>
                <li class="touch"><a href="index.html">Home</a></li>
                <li class="touch"><a href="">Projects</a></li>
                <li class="touch"><a href="">Thoughts</a></li>
                <li class="touch"><a href="">Resources</a></li>
                <li class="touch"><a href="contact.html">Contact</a></li>
            </ul>
        </nav>
    </header>

Both pages have the same css files linked within head:

meyer_reset.css
design.css
layout.css

I’ve just finished my first @media query rules for (min-width: 320px) and everything was fine until I noticed the anchor tags within the nav element do not have the same size across web pages.

For some reason, the anchor tags are 30px high within index.html but are 29.33 px high within contact.html

I have no idea what the issue could be? I do have a form element within contact.html but not index.html

Otherwise, styles are applied consistently across both. Here are the two css files:

design.css
html {

    font-size: 62.5%;

    /* font-size 1em = 10px on default browser settings */

    color: #383838;

}

* {

    box-sizing: border-box;

}

body {

    background-color: #fafcfb;

}

nav li {

    font-family: 'Noto Sans JP', sans-serif;

    font-weight: 300;

    border-right: 1px solid #383838;

    /* transition: border 0.5s; */

}

nav li:last-child {

    border-right: none;

}

/* ul:hover > li {

    border-right: none;

}

ul:hover > li:hover {

    border-bottom: 1px solid #383838;

} */

/* un-comment for higher screen sizes */

nav a {

    text-decoration: inherit;

    color: inherit;

    display: block;

}

h1, h2, h3 {

    font-family: 'Roboto', sans-serif;

    font-weight: 700;

}

p, li, label {

    font-family: 'Noto Sans JP', sans-serif;

    font-weight: 300;

}

input[type="text"], input[type="email"], input[type="textarea"] {

    font-family: 'Noto Sans JP', sans-serif;

    font-weight: 300;

}

button {

    font-family: 'Noto Sans JP', sans-serif;

    font-weight: 300;

    background-color: #383838;

    color: #fafcfb;

    border-radius: 0.5em;

    border: none;

    max-width: fit-content;

}

@media (min-width: 320px) {

    

    nav a {

        font-size: inherit;

    }

    nav li {

        font-size: 1rem;

        transition: border 0.5s ease-in-out, background-color 0.5s ease-in-out;

    }

    h1 {

        font-size: 3.6rem;

    }

    

    h2 {

        font-size: 3rem;

    }

    

    h3 {

        font-size: 2.5rem;

    }

    p, li, label, input[type="text"], input[type="email"], input[type="textarea"], button {

        font-size: 1.5rem;

    }

    form {

        font-size: 1.5rem;

    }

    .touch {

        background-position: center;

        background-size: cover;

        transition: background 0.5s;

    }

    .touch:active {

        background-color: #6e00cf;

        color: white;

        background-size: 100%;

        transition: 0s;

    }

}
layout.css
nav {

    margin-bottom: 0.5em;

}

@media (min-width: 320px) {

    nav ul {

        display: flex;

        justify-content: space-evenly;

    }

    nav li {

        flex: 1 1 auto;

    }

    nav a {

        padding: 1em;

    }

    h1 {

        margin-bottom: 0.278em;

    }

    h2 {

        margin-bottom: 0.333em;

    }

    h3 {

        margin-bottom: 0.2em;

    }

    p {

        margin-bottom: 0.667em;

        line-height: 1.2em;

    }

    section ul {

        margin-left: 2em;

        margin-bottom: 1em;

    }

    section li {

        line-height: 1.2em;

    }

    #sizing_form {

        width: 100vw;

    }

    form > * {

        display: flex;

        flex-direction: column;

        padding: 0.5em;

        margin: 0.5em;

        flex: 1 1 auto;

    }

    form button {

        display: inline-block;

    }

    form label {

        margin-bottom: 0.3em;

    }

    form input {

        margin-bottom: 1em;

    }

    

    form textarea {

        max-width: 100%;

    }

}

#img {

    max-width: 50vw;

    margin: auto;

}

img {

    max-width: 100%;

    max-height: 100%;

}

I’m no html/css expert, but what happens if you comment out your form element on the second page?
If fonts are still different, that is a really strange behavior.

I tried doing this actually. It didn’t change the behavior at all. Thought maybe it could have been some issue with cascade and switched around when the style sheets are referenced within in contacts.html and nothing either

I hope someone can help and my code isn’t an awful convoluted mess :sweat_smile:

Update: it looks like this behavior is occurring within Google Chrome. I was messing around with the console/element picker so maybe that messed something up? I still wouldn’t know what the issue is.

Behavior not consistent across web browsers. Used Mozilla Firefox and was able to switch between pages and screen sizes with no weird text-resizing within nav.

Any ideas?

I don’t know, but if you will find the answer, please post it.

1 Like

Update 2: The height of the header for contact.html is 44.67… The height of the header for index.html is 45. I have no idea why this is happening. The markup is not different at all. I’ve commented out the form > * selector several times. That’s literally the only difference and I’m at a loss for what to do.

I’d like to see the site somewhere online so I can analyze it.

Are you aware that percent is a percentage of the parent element and that ems vary according to the parent a similar way?

I don’t rely on browser defaults. Am using normalize.css now. But don’t blindly swap it for Meyer’s reset in the middle of a project because the results can be very different. (depending on the code)

I use rem’s to style font-sizes and em’s to style things connected to those font-sizes (padding, border-radius, margins, etc for a given element).

I generally set the html font-size to 62.5% bc it’s supposed to be good practice when wanting something easily scalable (10px) for users who set their default browser font-size to something other than 16px (now it’s a percentage and not an absolute value).

Percentage generally isn’t a unit I use elsewhere unless it’s for sizing a div or something.

I don’t really know deployment yet, I’m just coding along with a bootcamp course I’m taking. I would use a codepen but can’t figure out how to host css files on Dropbox and also link them to the pen. Images have an easy syntax to add at the end but Dropbox doesn’t want to let me link anything else as easily. Thanks for your reply :slight_smile:

I am using a selector that may not be doing what I think it’s doing?

form > * {
display: flex;
        flex-direction: column;
        padding: 1em;
        margin: 1em;
        flex: 1 1 auto;
}

^^ This selects every element within a form, yes? I’ve commented it out several times and it hasn’t changed anything. I’m thinking it’s just Chrome at this point.

Every direct child, not every element. That is if you have nested elements they are not part of that selector.

How that will affect the CSS also depends on if the child will inherit the styles. For example, the nested link will not get the styles from its div parent container.

<div class="box">
  <p>Direct child</p>
  <div>
    <a href="#">Nested child (not affected)</a>
  </div>
</div>
.box > * {
  font-size: 2rem;
  color: red;  
}

We really have to see the page and all the code to be able to help. Can you post it to Codesandbox or link to a GitHub repo.

1 Like

lasjorg you’re right of course :slight_smile:

I’ve uploaded the code to this repository:

I don’t see any code, just the .gitattributes and README.md files.

Yeah I feel dumb. Sorry, version control is new to me still. All I did was initialize the repository locally at first. My bad. It should all be there now.