Horizontal Menu Displays Incorrect on Widescreen M

Question

I have a small problem with a horizontal menu I have implemented for a website. The menu only contains three items, but when viewed on quite a large widescreen monitor, the last item appears to collapse on to a new line. I can't actually test this myself as the widescreen monitor is used by my client, and whilst I can't reproduce the error they have sent me this screenshot.

The client is using Internet Explorer 8 on Windows 7, and I have tested this browser and OS on a normal size monitor which seems to work. It seems to be the widescreen that is the problem.

Here is how the page looks on my screen, and every other subsequent screen I've tested on.

Here is the code I have for the menu.

HTML

<div class="menu">
    <ul class="nav">
        <li class="nav-item" id="first-item"><a href="/why-us.php">WHY US</a></li>
        <li class="nav-item"><a href="/links.php">LINKS</a></li>
        <li class="nav-item"><a href="/contact.php">CONTACT</a></li>
    </ul>
</div>

CSS

.nav-item {
    font-size:2em;
    margin-left:175px;
}

.nav-item a {
    color:#2B2F73;
}

.nav {
    list-style-type:none;
    padding:0;
    margin:auto;
    width:744px;
}

.nav li {
    list-style-type:none;
    float:left;
    display:inline;
}

#first-item {
    margin-left:0px !important;
}

.menu {
    width:960px;
    height:40px;
    margin:auto;
}

Can anyone identify any glaring errors in my code that may be producing this error?

Answer 1

The problem is that they've got their "Text Size" set to "Larger" (or perhaps "Largest"):

Your code is here, and it looks exactly like the client's screenshot with "Larger" text in IE8.

Now you can reproduce the problem, you should be able to fix it.

I'd provide better instructions, but it's difficult to do so without being able to see the entire site.

The "widescreen monitor" part is not relevant - you're declaring width: 960px on the outermost container (.menu). It will be 960px no matter what the screen width is.

Answer 2

I'd suggest to play a bit with your width tags.

What about removing the one in "nav" ?

I'm sorry this is not a question to ask here. This problem is very easy to solve, you can figure out yourself if you try to change things...

My best advice on this question is that you get a decent tool to "test" CSS and see the result "live". I'm happy with the Firefox/Chrome FireBug extension (but it doesn't save the result, you have to copy&paste it).

Answer 3

Try this .nav-item { font-size:2em; margin-left:5em; }

Granted, if the chrome (the user's browser) increases their text size too much, no matter what it will eventually break if you use ems as they are of course based on the text size.

<subjective> In general, its best-practice to use percentages for text-sizes and use pixels for margins/padding/distances for best consistancy between browsers.

Also using a reset css (like YUI base-reset-fonts.css) is a good idea too </subjective>

Answer 4

try reducing some width in .nav-item, .nav and .menu

If this does not helps you, then can you please provide the link where this is been hosted. So that we can check ther and quickly reply to you.