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.