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 Johan Rabie
Johan Rabie
2,427 Points

html5 em inline items

I have the following html

        <nav>
            <ul>
                <li><a href="./index.html" data-selected="true">Getting Started</a></li>
                <li><a href="./index.html">Templates</a></li>
                <li><a href="./index.html">Help</a></li>
            </ul>
        </nav>

and I have the following css

body { background-color: white; font-family: 'Open Sans'; font-weight: 400; line-height: 1.45; color: #333; }

nav ul { list-style-type: none; }

nav ul li { display: inline-block; }

If I make the li in nav inline it renders really small on mobile devices but is better on desktop. I would have thought that using em will allow the size items to scale more appropriate according to the device.

though the li shows as 1 em, compared to other text on the screen also in 1 em, the li is much much smaller.

what do I need to do to make the li 1em to render the same as other text 1em?

Arkadiusz Zalewski
Arkadiusz Zalewski
9,453 Points

Try to use 'rem' instead of 'em'. It will compare the font size to the root value.

6 Answers

Dan Oswalt
Dan Oswalt
23,438 Points

There may be something in the browser's default style sheets that is doing that. What happens if you explicitly set a font-size in the body? Say, font 16px? List elements will inherit this. That way you know what exactly you're working with when calculating ems.

Johan Rabie
Johan Rabie
2,427 Points
Johan Rabie
Johan Rabie
2,427 Points

I tried rem, but it gives me the same results. I am using the google device emulator to test how it is going to work on different devices and am wondering if this is not perhaps a bug in the emulator. I can't see why the text should render small just because you make the display inline.

Daniel Hildreth
Daniel Hildreth
16,170 Points
Daniel Hildreth
Daniel Hildreth
16,170 Points

Hey Johan, I agree with Dan. I believe it is the default browser's font size. Does the font size look different on different browsers? If so, then you just need to add a font size to your elements.

Johan Rabie
Johan Rabie
2,427 Points
Johan Rabie
Johan Rabie
2,427 Points

I had a look over different emulators and also different browsers and I think that the default browser settings must be normalized anyway because the difference between chrome and IE is to much with respect to margining and padding. My goal today is to get a normalized script added and test it on a proper emulator on my mac.

I have found that I get odd results with some of the emulators like gemimotion using android as the image width gets out of shape.

I am still pretty much a noob with this so the learning curve with all these odds and ends is a bit high, but I am very appreciative of your assistance.

Johan Rabie
Johan Rabie
2,427 Points
Johan Rabie
Johan Rabie
2,427 Points

Just to give feedback:

I have now added a normalize css that I got from github. The browser emulator works fine now so does the ios emulator.

Adding the normalize makes such a big difference it's almost a must have.

Dan Oswalt
Dan Oswalt
23,438 Points

Yeah, normalize.css and other browser-leveling reset stylesheets are often just included with frameworks like bootstrap. Just remember that you can always do your own kinds of default overriding by defining inherited things like font-size at the root.

Daniel Hildreth
Daniel Hildreth
16,170 Points
Daniel Hildreth
Daniel Hildreth
16,170 Points

Yes it is very helpful and handy to have a normalize. Heck, you can even make your own normalize.css if you are that advanced LOL. But hey everybody has to start somewhere.